Ace — High-Performance Code Editor for the Browser

Introduction

Ace is a standalone code editor component that runs entirely in the browser. Originally developed for the Cloud9 IDE, it delivers desktop-grade editing with syntax highlighting for over 120 languages, configurable keybindings, and a rich extension API.

What Ace Does

• Provides syntax highlighting for 120+ programming languages
• Supports Vim, Emacs, and Sublime Text keybinding modes
• Handles large files efficiently with virtual rendering
• Offers built-in search, replace, and code folding
• Exposes a comprehensive JavaScript API for programmatic control

Architecture Overview

Ace uses a virtual renderer that only paints visible lines into the DOM, keeping performance constant regardless of file size. The editor core separates the document model (EditSession) from the view layer (VirtualRenderer) and input handling (KeyBinding). Language modes and themes are loaded on demand as standalone modules.

Self-Hosting & Configuration

• Install via npm: npm install ace-builds
• Include pre-built files from node_modules/ace-builds/src-min-noconflict/
• Configure themes, modes, and options through the editor API
• Enable autocomplete with ace/ext/language_tools
• Set custom keybindings with editor.commands.addCommand()

Key Features

• Virtual rendering handles files with millions of lines
• On-demand module loading keeps initial payload small
• Accessible with ARIA attributes and screen reader support
• Integrates with LSP-based autocompletion via extensions
• Battle-tested in production at AWS Cloud9 and many online IDEs

Comparison with Similar Tools

• Monaco Editor — Powers VS Code; richer IntelliSense but larger bundle size
• CodeMirror — Modular v6 rewrite with smaller core; growing ecosystem
• Prism.js — Read-only syntax highlighting, not an editor
• Highlight.js — Server-side and client-side highlighting only, no editing

FAQ

Q: How does Ace compare to Monaco for bundle size? A: Ace's core is roughly 200 KB minified versus Monaco's 2+ MB, making Ace better suited for bandwidth-constrained apps.

Q: Can I use Ace with React or Vue? A: Yes. Community wrappers like react-ace and vue-ace-editor provide component interfaces around the Ace API.

Q: Does Ace support collaborative editing? A: Ace itself does not include real-time collaboration, but its document model can be integrated with OT or CRDT libraries.

Q: Is Ace still maintained? A: Yes. The project receives regular updates and is actively used in AWS Cloud9.

Sources

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