Ace — High-Performance Embeddable Code Editor for the Web

Introduction

Ace is the code editor that powers Cloud9 IDE, GitHub's editor, and many other web-based development tools. It provides a native-feeling editing experience in the browser with features matching desktop editors, including syntax highlighting for over 100 languages, code folding, search and replace with regex, and customizable key bindings.

What Ace Does

• Renders a full-featured code editor inside any HTML element
• Provides syntax highlighting and mode detection for 100+ programming languages
• Supports multiple cursors, code folding, and bracket matching
• Offers configurable key bindings (Vim, Emacs, Sublime modes)
• Handles large files efficiently with virtual rendering of visible lines only

Architecture Overview

Ace uses a virtual renderer that only draws visible lines in the viewport, enabling smooth editing of files with hundreds of thousands of lines. The editor separates the document model (EditSession) from the view layer (VirtualRenderer) and input handling (KeyBinding), allowing multiple views of the same document and customizable input modes.

Self-Hosting & Configuration

• Install via npm and import from ace-builds/src-noconflict/ace
• Set language mode with editor.session.setMode("ace/mode/python")
• Choose from 20+ built-in themes or create custom ones
• Configure options like font size, tab width, and soft wrap via editor.setOptions({})
• Load worker scripts for syntax validation in supported languages

Key Features

• Virtual rendering handles files with 100K+ lines without performance loss
• Built-in autocompletion engine with snippet support
• Live syntax checking via Web Worker background threads
• Accessible with ARIA attributes and screen reader support
• Lightweight at ~300KB minified with no external dependencies

Comparison with Similar Tools

• Monaco Editor — Monaco (VS Code's editor) is more feature-rich but significantly larger in bundle size
• CodeMirror — CodeMirror 6 is modular and modern; Ace has broader legacy browser support
• Prism.js — Prism is read-only syntax highlighting; Ace is a full interactive editor
• Highlight.js — Highlight.js only colorizes static code blocks without editing capabilities
• Quill — Quill is a rich text editor; Ace is purpose-built for source code

FAQ

Q: How does Ace compare to Monaco in bundle size? A: Ace is roughly 300KB minified vs Monaco at 2-4MB, making Ace better suited for bandwidth-constrained applications.

Q: Can Ace handle very large files? A: Yes. The virtual renderer only draws visible lines, so performance remains consistent regardless of file length.

Q: Does Ace support collaborative editing? A: Ace provides the editor component; real-time collaboration requires an external OT or CRDT layer such as Yjs or ShareDB.

Q: Is Ace still maintained? A: Yes. Ace continues to receive updates with new language modes, themes, and performance improvements.

Sources

• https://github.com/ajaxorg/ace
• https://ace.c9.io