# Ace — High-Performance Code Editor for the Browser

> A high-performance, embeddable code editor written in JavaScript that brings native-editor features like syntax highlighting, auto-completion, and code folding to the browser.

## Install

Save as a script file and run:

# Ace — High-Performance Code Editor for the Browser

## Quick Use
```html
<div id="editor" style="height: 400px;">function hello() {
  console.log("Hello, Ace!");
}</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 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/


---
Source: https://tokrepo.com/en/workflows/asset-c8e01b43
Author: Script Depot