Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build Status Dependabot Status Ember Observer Score

An Ember component for the excellent CodeMirror editor.


ember install ivy-codemirror # install:addon for Ember CLI < 0.2.3

If you are using a version of Ember prior to 2.3, you will also need to install the ember-hash-helper-polyfill addon:

ember install ember-hash-helper-polyfill


This addon provides an ivy-codemirror component which wraps a CodeMirror editor. You can set its value property to the code that you want to be displayed:

{{ivy-codemirror value=myCode}}

Data Down, Actions Up

In the spirit of Data Down, Actions Up, the value will not be modified directly. Instead, when a CodeMirror change event occurs, a valueUpdated action will be sent, and will be given the new value as an argument. You might implement this action handler like so:

<!-- app/templates/index.hbs -->
{{ivy-codemirror value=myCode valueUpdated=(action "updateMyCode")}}
// app/controllers/index.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    updateMyCode(newCode) {
      this.set('myCode', newCode);

However, for this simple use case, Ember provides the built-in mut helper. You could use this helper in your template instead of writing the action handler yourself, like so:

<!-- app/templates/index.hbs -->
{{ivy-codemirror value=myCode valueUpdated=(action (mut myCode))}}


ivy-codemirror also allows passing options to CodeMirror via the options property. The easiest way to do this is via Ember's built-in hash helper, like so:

{{ivy-codemirror options=(hash lineNumbers=true mode="javascript")}}


By default, only CodeMirror's default theme (found in codemirror.css) is included. Additional themes can be included by specifying them in your ember-cli-build.js file:

var app = new EmberApp({
  codemirror: {
    themes: ['solarized', 'twilight']

The example above would include themes/solarized.css and themes/twilight.css into vendor.css.

Modes & Key Maps

In addition to themes, you can also include language modes and key maps via the modes and keyMaps options, respectively:

var app = new EmberApp({
  codemirror: {
    modes: ['javascript'],
    keyMaps: ['vim']

The example above would include mode/javascript/javascript.js and keymap/vim.js into vendor.js.


In addition to the above, you can also include any CodeMirror addon files like so:

var app = new EmberApp({
  codemirror: {
    addonFiles: ['lint/lint.css', 'lint/lint.js']

The above example would add lint/lint.css to vendor.css and lint/lint.js to vendor.js.


Fork this repo, make a new branch, and send a pull request. Make sure your change is tested or it won't be merged.

To run tests:

git clone # <this repo>
yarn install
yarn test

Or, to start a test server that continually runs (for development):

ember test --server
You can’t perform that action at this time.