CodeMirror

In-browser code editing made almost bearable

Make a donation:

Paypal
Bank

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a parser has been written for the language you are editing (see below for a list of supported languages), the code will be coloured, and the editor will help you with indentation.

To get a look at CodeMirror, see the test pages for the various parsers...

JavaScript
XML/HTML
CSS
SPARQL
HTML mixed-mode
HTML+PHP mixed-mode (courtesy of Yahoo!)
Python (courtesy of Timothy Farrell)
Lua (courtesy of Franciszek Wawrzak)
Ruby (by Michal Hantl, unfinished)
SQL (courtesy of John Benediktsson)
PLSQL (courtesy of Peter Raganitsch)
diff (courtesy of Liran Nuna)
Groovy (by eXo Platform)
C# (by Boris Gaber and Christopher Buchino)

Or take a look at some real-world uses of the system...

Releases

22-07-2010: Version 0.8:

Add a cursorCoords method to find the screen coordinates of the cursor.
A number of fixes and support for more syntax in the PHP parser.
Fix indentation problem with JSON-mode JS parser in Webkit.
Add a minification UI.
Support a height: dynamic mode, where the editor's height will adjust to the size of its content.
Better support for IME input mode.
Fix JavaScript parser getting confused when seeing a no-argument function call.
Have CSS parser see the difference between selectors and other identifiers.
Fix scrolling bug when pasting in a horizontally-scrolled editor.
Support toTextArea method in instances created with fromTextArea.
Work around new Opera cursor bug that causes the cursor to jump when pressing backspace at the end of a line.

21-06-2010: Version 0.7:

Fixes issue where calling .submit() on a form with a fromTextArea CodeMirror failed to submit the edited content.
Add Groovy parser (hosted externally).
Make line-numbering much, much faster.
Fix occasional buggy behaviour of the enter key in Opera.
Add a FAQ document.
Make search use do-what-I-mean Emacs-like behaviour to determine case-sensitivitiy is not explicitly specified.
Add a C# parser contrib module.
A number of bugfixes and extensions to the PHP parser (lambdas, abstract classes, configurable opening tags).
Fix multiline comments in the Lua parser.

27-04-2010: Version 0.67: More consistent page-up/page-down behaviour across browsers. Fix some issues with hidden editors looping forever when line-numbers were enabled. Make PHP parser parse "\\" correctly. Have jumpToLine work on line handles, and add cursorLine function to fetch the line handle where the cursor currently is. Add new setStylesheet function to switch style-sheets in a running editor.

01-03-2010: Version 0.66: Adds removeLine method to API. Introduces the PLSQL parser. Marks XML errors by adding (rather than replacing) a CSS class, so that they can be disabled by modifying their style. Fixes several selection bugs, and a number of small glitches.

12-11-2009: Version 0.65: Add support for having both line-wrapping and line-numbers turned on, make paren-highlighting style customisable (markParen and unmarkParen config options), work around a selection bug that Opera reintroduced in version 10.

23-10-2009: Version 0.64: Solves some issues introduced by the paste-handling changes from the previous release. Adds setSpellcheck, setTextWrapping, setIndentUnit, setUndoDepth, setTabMode, and setLineNumbers to customise a running editor. Introduces an SQL parser. Fixes a few small problems in the Python parser. And, as usual, add workarounds for various newly discovered browser incompatibilities.

31-08-2009: Version 0.63: Overhaul of paste-handling (less fragile), fixes for several serious IE8 issues (cursor jumping, end-of-document bugs) and a number of small problems.

30-05-2009: Version 0.62: Introduces Python and Lua parsers. Add setParser (on-the-fly mode changing) and clearHistory methods. Make parsing passes time-based instead of lines-based (see the passTime option).

Supported browsers

At this time, the following browsers are supported:

Firefox 1.5 or higher
Internet Explorer 6 or higher
Safari 3 or higher
Opera 9.52 or higher
Chrome

Making it work on other browsers that have decent support for the W3C DOM model should not be too hard, but I am not actively testing against those.

Getting the code

All of CodeMirror is released under a zlib-style license. To get it, you can download the latest release or the current development snapshot as zip files, try the compression API to create a compressed version, or use git to get the repository:

git clone http://marijn.haverbeke.nl/codemirror/.git

This second method is recommended if you are planning to hack on CodeMirror ― it makes it easy to record your patches and share them with me. CodeMirror can also be found on GitHub: http://github.com/marijnh/CodeMirror.

Support

There is a Google group (a sort of mailing list/newsgroup thingy) for discussion and news related to CodeMirror. Please check the FAQ before asking a questoin. You can also e-mail me directly: Marijn Haverbeke.

Documentation

The manual is all most users will need to read (or skim).
If you're interested in working on the code, this document about CodeMirror's architecture will be useful.
The source code is, for the most part, rather well commented, so if all else fails, you can try reading it.