DEV Community


CodeMirror - A simple and efficient code editor component for your web applications

prahladyeri profile image Prahlad Yeri Originally published at ・2 min read

I'm a huge fan of simple things in life, things that achieve a lot with minimal efforts or configuration from the user's end. And whenever I come across such simple things, I like to share it with everyone and that's what I'm doing now.

In my recent flask based web project, one requirement was to provide a code editor in the app itself. The web app has a main system and a subsystem, and the user wanted the subsystem part to be dynamically scripted so that she can change that part of the code later and customize it herself. The web-based editor looks something like this (except that it contains the actual code instead of this Hello World placeholder):

CodeMirror Demo

This was possible due to CodeMirror which is an open source javascript library, they have a github repository too. You don't even have to download this library, its available on CDNJS, so you can simply link the stylesheet and two scripts in your html head tag like this:

<script src=""></script>
<link rel="stylesheet" href="">
<script src=""></script>

The first two resources are necessities (codemirror.min.js and codemirror.min.css), whereas the last one for mode (python.min.js) depends on which language or mode you want the editor for. In my case, it was python but there are dozens of modes available for different languages like java, php, ruby, html, css, etc.

The best thing about using this component is getting started itself! All you have to do is create a html textarea (which I already had as a dumb code editor!) and you are good to go:

    console.log('adding codeMirror object');
    window.myCodeMirror = CodeMirror.fromTextArea(document.getElementById("txtScript"), {
       lineNumbers: true,
        mode: 'python',
    window.myCodeMirror.on('change', editor => {
    window.myCodeMirror.on('keydown', editor => {
        //do whatever you want

The CodeMirror.fromTextArea() is the important method which directly converts your textarea to a code editor, so simple and so effective! But note that after that, it totally makes your textarea element vanish (display: none) and you'll have to use the CodeMirror object variable (window.myCodeMirror in this example) to read or write text to it:

var code = window.myCodeMirror.getValue(); //get value from editor
window.myCodeMirror.setValue(code); //set value to editor

This component also has tons of configuration options like tabSize, theme, direction (ltr/rtl), lineNumbers, etc. I hope this editor component will help you if you ever come across a web project that requires it.

Happy coding, code and prosper!

Discussion (3)

Editor guide
milosb793 profile image

Thanks for the great introduction :)

immortal000 profile image
Siddarth Kotthur

Can you please provide us with HTML code for the codeMirror?

gerwinvbeek profile image
GerwinvBeek • Edited

<textarea id="txtScript"></textarea>