A simple UI for the CodeMirror text editor.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


CodeMirror UI

CodeMirrorUI is a simple interface written by Jeremy Green to act as a wrapper around the CodeMirror text editor widget by Marijn Haverbeke. CodeMirror is a syntax highlighter and formatter that makes it much easier to edit source code in a browser. CodeMirrorUI is a wrapper that adds interface functionality for many functions that are already built into CodeMirror itself. Functionality includes undo, redo, jump to line, reindent selection, and reindent entire document. Two options for find/replace are also available. It is based on the MirrorFrame example that Marijn included with CodeMirror.

Code Climate




Note Starting with version 0.0.17 CodeMirror-UI upgraded to CodeMirror-2.3. The find and replace functionality relies on the searchcursor add-on for CodeMirror. Make sure to add the searchcursor line from the installation instructions if the search/replace is not working.

Easily Configurable

It's easy to configure an editor with something like this:

//first set up some variables
var textarea = document.getElementById('code1');
var uiOptions = { path : 'js/', searchMode: 'popup' }
var codeMirrorOptions = {
    mode: "javascript" // all your normal CodeMirror options go here

//then create the editor
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);


// First the CodeMirror stuff
<script src="lib/CodeMirror-2.3/lib/codemirror.js" type="text/javascript"></script>
<script src="lib/CodeMirror-2.3/lib/util/searchcursor.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/lib/codemirror.css">
<script src="lib/CodeMirror-2.3/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/mode/javascript/javascript.css">

//Then the CodeMirrorUI stuff
<script src="js/codemirror-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/codemirror-ui.css" type="text/css" media="screen" />

You'll probably need to adjust the paths to fit your situation.

Please see index.html for examples and many additional details.


Thanks to Marijn Haverbeke for creating and releasing CodeMirror in the first place.
Without his excellent contribution to the community this project would have no reason to exist.

Thanks to Mark James of famfamfam.com for his Silk Icons.


CodeMirror UI is provided under the MIT License. See the LICENSE file for full details.