# Ace Editor — Embeddable Code Editor for the Web

> A high-performance code editor written in JavaScript that runs in the browser, supporting syntax highlighting for over 110 languages and 20+ themes.

## Install

Save in your project root:

# Ace Editor — Embeddable Code Editor for the Web

## Quick Use
```html
<div id="editor" style="height: 400px;">function hello() {
  console.log("Hello, world!");
}</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 an embeddable code editor written in JavaScript that brings native-editor features to the browser. Originally developed for the Cloud9 IDE, it provides syntax highlighting, autocompletion, code folding, and search-and-replace for over 110 programming languages. Ace is used in production by platforms like GitHub, Wikipedia, and many online coding tools.

## What Ace Does
- Provides syntax highlighting for 110+ languages including JS, Python, Go, Rust, and SQL
- Supports code folding, bracket matching, and auto-indentation
- Offers find-and-replace with regular expression support
- Handles large files efficiently with virtual rendering (only visible lines are in the DOM)
- Supports multiple cursors and rectangular selection

## Architecture Overview
Ace uses a virtual renderer that only creates DOM nodes for visible lines, enabling smooth editing of files with tens of thousands of lines. The editor separates the document model (EditSession) from the view layer (VirtualRenderer) and input handling (KeyBinding). Language modes are loaded on demand, and the tokenizer runs incrementally to avoid blocking the UI thread on large files.

## Self-Hosting & Configuration
- Include via CDN, npm (ace-builds), or bundle from source
- Set language mode per editor instance with session.setMode()
- Choose from 20+ built-in themes or create custom themes
- Configure tab size, soft tabs, word wrap, and font size via the API
- Enable or disable features like autocompletion, snippets, and live linting

## Key Features
- Virtual rendering for smooth performance on large files
- 110+ language modes with incremental tokenization
- Extensible autocompletion with snippet support
- Built-in search with regex, case sensitivity, and whole-word options
- Fully configurable keybindings including Vim and Emacs modes

## Comparison with Similar Tools
- **Monaco Editor** — powers VS Code, heavier but richer features; Ace is lighter and easier to embed
- **CodeMirror 6** — modern rewrite with excellent extensibility; Ace has a larger legacy ecosystem
- **Prism.js/highlight.js** — read-only highlighters; Ace is a full interactive editor
- **Quill/TipTap** — rich text editors; Ace is purpose-built for source code editing

## FAQ
**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.

**Q: Does Ace support LSP or language server integration?**
A: Not natively. You can connect external linters or completers via the Ace API, but there is no built-in LSP client.

**Q: How does Ace handle very large files?**
A: Ace's virtual renderer only creates DOM elements for visible lines, so it handles files with 100K+ lines without significant slowdown.

**Q: Is Ace still maintained?**
A: Yes. Ace continues to receive updates and is actively used in major platforms including AWS Cloud9.

## Sources
- https://github.com/ajaxorg/ace
- https://ace.c9.io

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