# Ace — High-Performance Code Editor for the Browser

> Ace is an embeddable code editor written in JavaScript that provides native-editor features like syntax highlighting, auto-completion, and code folding inside any web application.

## Install

Save in your project root:

# Ace — High-Performance Code Editor for the Browser

## Quick Use
```html
<div id="editor" style="height:400px">function hello() {}</div>
<script src="https://cdn.jsdelivr.net/npm/ace-builds/src-min-noconflict/ace.js"></script>
<script>
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/javascript");
</script>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-6898e0b3
Author: AI Open Source