Ace (Ajax.org Cloud9 Editor)
Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resources you need to get started with Ace.
Syntax highlighting for over 120 languages (TextMate/Sublime/.tmlanguage files can be imported)
Over 20 themes (TextMate/Sublime/.tmtheme files can be imported)
Automatic indent and outdent
An optional command line
Handles huge documents (at last check, 4,000,000 lines is the upper limit)
Fully customizable key bindings including vim and Emacs modes
Search and replace with regular expressions
Highlight matching parentheses
Toggle between soft tabs and real tabs
Displays hidden characters
Drag and drop text using the mouse
Multiple cursors and selections
Cut, copy, and paste functionality
Take Ace for a spin!
Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.
If you want, you can use Ace as a textarea replacement thanks to the Ace Bookmarklet.
Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of
src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as
The easiest version is simply:
<div id="editor">some text</div>
<script> var editor = ace.edit("editor");</script>
With "editor" being the id of the DOM element, which should be converted to an editor. Note that this element must be explicitly sized and positioned
relative for Ace to work. e.g.
and configure the editor to use the theme:
The mode can then be used like this:
to destroy editor use
Additional usage information, including events to listen to and extending syntax highlighters, can be found on the main Ace website.
You can also find API documentation at http://ace.c9.io/#nav=api.
Also check out the sample code for the kitchen sink demo app.
If you still need help, feel free to drop a mail on the ace mailing list, or at
After the checkout Ace works out of the box. No build step is required. To try it out, simply start the bundled mini HTTP server using Node.JS
The editor can then be opened at http://localhost:8888/kitchen-sink.html.
To open the editor with a file:/// URL see the wiki.
You do not generally need to build ACE. The ace-builds repository endeavours to maintain the latest build, and you can just copy one of src* subdirectories somewhere into your project.
However, all you need is Node.js and npm installed to package ACE. Just run
npm install in the ace folder to install dependencies:
To package Ace, we use the dryice build tool developed by the Mozilla Skywriter team. Call
node Makefile.dryice.js on the command-line to start the packing. This build script accepts the following options
-m minify build files with uglify-js
-nc namespace require and define calls with "ace"-bm builds the bookmarklet version
--target ./path specify relative path for output folder (default value is "./build")
To generate all the files in the ace-builds repository, run
node Makefile.dryice.js full --target ../ace-builds
Running the Unit Tests
The Ace unit tests can run on node.js. Assuming you have already done
npm install, just call:
You can also run the tests in your browser by serving:
This makes debugging failing tests way more easier.
Ace is a community project and wouldn't be what it is without contributions! We actively encourage and support contributions. The Ace source code is released under the BSD License. This license is very simple, and is friendly to all kinds of projects, whether open source or not. Take charge of your editor and add your favorite language highlighting and keybindings!
Feel free to fork and improve/enhance Ace any way you want. If you feel that the editor or the Ace community will benefit from your changes, please open a pull request. For more information on our contributing guidelines, see CONTRIBUTING.md.