Guide · Open source

How to use editor.md: install, set up and render Markdown

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Editor.md is an open source JavaScript component that adds a Markdown editor with a live preview to a web page. It is built on CodeMirror, jQuery and Marked. This guide shows how to install it, create an editor on a page, convert Markdown to HTML for display, and check whether it fits your project.

Editor.mdpandao/editor.md · ★ 14.3k · MIT Install options & downloads

Quick start

1Confirm jQuery is available. Make sure your page loads jQuery before Editor.md, since the component depends on it.
2Install the package. Run npm install editor.md or bower install editor.md, or download the zip from the GitHub link.
3Add the stylesheet and container. Include editormd.min.css and add a div with an id to hold the editor.
4Load the scripts. Include jQuery and editormd.min.js in that order.
5Initialise the editor. Call editormd with the container id, and set path to the lib folder that holds CodeMirror and Marked.
6Render Markdown where needed. For display-only pages, use editormd.markdownToHTML with Marked and prettify loaded.

Check the prerequisites before you install

Editor.md is a jQuery-based component, so your page needs jQuery loaded. The README lists Node.js or Bower as the tools you need only if you install through npm or bower. If you download the zip from GitHub instead, you do not need either of those tools.

jQuery, loaded in the page before Editor.md
Node.js, only if you use npm install
Bower, only if you use bower install

Install Editor.md with npm or Bower

The README gives two package-manager install commands. Run whichever matches your toolchain from your project folder.

You can also download the project as a zip from the GitHub download link in the README.

npm install editor.md
bower install editor.md

Create a Markdown editor on a page

Add the Editor.md stylesheet, a container div with an id, jQuery, and the Editor.md script. Then call editormd with the container id and an options object. The path option tells Editor.md where its dependent libraries (CodeMirror, Marked and others) live.

The README notes that Editor.md can create the textarea for you automatically, so the inner textarea in the example is optional. Set the initial text with the markdown option, or use the textarea content.

Set width and height in the options; both default to 100%.
Set autoFocus to false if you do not want the editor to take focus on load.
Use the onchange callback to react when the text changes.

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            path : "editor.md/lib/"
        });
    });
</script>

Convert Markdown to HTML for display

If you only need to show Markdown on a page, use editormd.markdownToHTML instead of the editor. Load the preview stylesheet and the Marked and prettify libraries, then call the function on a container div that holds the Markdown in a textarea.

The README says htmlDecode can be enabled to allow HTML tags. When you do, filter dangerous tags such as style, script and iframe yourself for website security.

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <textarea style="display:none;">### Hello world!</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
        var testView = editormd.markdownToHTML("test-markdown-view", {});
    });
</script>

Turn on the extras you need

Editor.md supports standard Markdown, CommonMark and GitHub Flavored Markdown. It also has extras such as table of contents, emoji, task lists, @links, TeX formulas based on KaTeX, flowcharts and sequence diagrams. Most editor behaviour is controlled by the options object, which the README lists with default values.

Some options from the README you may want to change: mode (gfm or markdown), theme and previewTheme, readOnly, codeFold, searchReplace, and saveHTMLToTextarea, which creates a textarea holding the HTML for a form post.

mode: "gfm" or "markdown"
readOnly: false by default
saveHTMLToTextarea: false by default
autoLoadModules: true by default, loads dependent modules automatically

Know the limits

The README says Editor.md does not convert HTML back to Markdown. It also describes the component as jQuery-based, so it is a poor fit for projects that do not use jQuery or JavaScript. The README does not describe current maintenance, and the latest push shown is from April 2024, so check the repository activity before you build on it.

What people use it for

Adding a Markdown input box to an admin panel or content management screen
Letting users write comments or posts in Markdown on your own site
Displaying Markdown text stored on the server as HTML, using markdownToHTML
Writing documents with KaTeX formulas, flowcharts or sequence diagrams in a web form

Frequently asked questions

Is Editor.md free to use?

The repository is listed under the MIT licence. The MIT licence generally allows use, modification and redistribution, so check the licence file in the repository for the full terms.

What do I need to install Editor.md?

You need jQuery loaded in your page. Node.js is needed only if you install with npm, and Bower is needed only if you install with bower.

How do I install Editor.md with npm?

Run npm install editor.md in your project folder. Then include the stylesheet and scripts from the installed folder in your page.

Can Editor.md convert HTML to Markdown?

No. The README says Editor.md does not support HTML to Markdown parsing and mentions that it may be added in the future.

What are good alternatives to Editor.md?

Projects compared in this directory include CodeMirror, Toast UI Editor, SimpleMDE and EasyMDE. Pick one based on whether you use jQuery and how actively it is maintained.

Does Editor.md support formulas and diagrams?

Yes. The README lists TeX support based on KaTeX, plus flowchart and sequence diagram extended syntax.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Editor.md suits web developers who already use jQuery and want a drop-in Markdown editor with live preview, image upload and diagram support inside their own site or admin panel. If you do not use jQuery, need HTML-to-Markdown conversion, or want an editor with clearly active maintenance, look at CodeMirror, Toast UI Editor, SimpleMDE or EasyMDE instead.

Install options & downloads