Ace — High-Performance Code Editor for the Browser

Introduction

Ace is an embeddable code editor that powers the editing experience in Cloud9 IDE, GitHub's code view, and many other web-based developer tools. It provides a feature set comparable to native editors including syntax highlighting for over 150 languages, multiple cursors, code folding, and search-and-replace with regex.

What Ace Does

• Provides syntax highlighting and language modes for 150+ programming languages
• Supports multiple cursors, block selection, and simultaneous editing
• Offers auto-completion with language-aware snippets and live syntax checking
• Handles large files efficiently with virtual rendering that only draws visible lines
• Includes 30+ built-in themes and full keyboard shortcut customization

Architecture Overview

Ace uses a model-view architecture. The EditSession holds the document model, tokenizer state, and undo history. The VirtualRenderer draws only the visible viewport using absolutely positioned DOM elements, enabling smooth scrolling through files with hundreds of thousands of lines. A worker thread runs syntax validation and language analysis off the main thread.

Self-Hosting & Configuration

• Include via CDN or install with npm install ace-builds
• Call ace.edit(element) to attach the editor to any DOM container
• Set language mode with editor.session.setMode('ace/mode/python')
• Apply a theme with editor.setTheme('ace/theme/github')
• Enable live syntax checking with editor.session.setUseWorker(true) (on by default for supported modes)

Key Features

• Virtual rendering for smooth performance on files exceeding 100K lines
• Integrated search with regex, case sensitivity, and whole-word options
• Code folding, bracket matching, and indent guides
• Vim, Emacs, and Sublime Text keybinding modes
• Accessible with ARIA attributes and configurable font sizes for readability

Comparison with Similar Tools

• CodeMirror 6 — Modular rewrite with better extensibility and accessibility; Ace has more built-in language modes
• Monaco Editor — Powers VS Code with richer IntelliSense; larger bundle than Ace
• Prism.js / highlight.js — Read-only syntax highlighting; Ace is a full interactive editor
• Quill / Tiptap — Rich text editors for prose; Ace is purpose-built for source code
• CodeFlask — Lightweight embeddable editor; lacks Ace's scale for large files and advanced features

FAQ

Q: How does Ace handle very large files? A: Ace uses virtual rendering, drawing only the lines visible in the viewport. This lets it handle files with hundreds of thousands of lines without DOM bloat.

Q: Can I use Ace in a React or Vue project? A: Yes. Community wrappers like react-ace and vue-ace-editor provide component-based integration with two-way binding.

Q: Is Ace still actively maintained? A: Yes. Ace continues to receive updates on GitHub with regular bug fixes and new language modes.

Q: How do I add custom auto-completions? A: Register a completer object with editor.completers.push() that implements getCompletions(editor, session, pos, prefix, callback).

Sources

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