Skip to content

Editor.md

An embeddable Markdown editor component for web pages, built on CodeMirror, jQuery and Marked.

Stars
14.3k
Forks
2.4k
Licence
MIT
Language
JavaScript
Last update
2.5 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Editor.md is a JavaScript component you add to a web page so visitors get a Markdown editor with a live preview. It is built on CodeMirror for the editing area, jQuery, and Marked for rendering. It also includes a function to convert Markdown text into HTML for display on a page.

  • Add a Markdown editor with live preview to a web form
  • Render stored Markdown text as HTML on a page using markdownToHTML
  • Write math formulas with KaTeX and diagrams with flowchart or sequence syntax
  • Let users upload images from the editor, per the README feature list

Great for

  • Web developers who want a Markdown input box inside their own site or admin panel
  • Projects that already use jQuery and want a drop-in editor
  • Sites that need Markdown with KaTeX formulas, flowcharts, or sequence diagrams
  • Teams that need a Markdown editor with image upload and a live preview

Not ideal for

  • Projects that do not use jQuery or JavaScript, since the README describes a jQuery-based component
  • Anyone needing HTML-to-Markdown conversion, which the README says is not supported
  • Teams wanting an actively maintained editor, since the latest push shown is from April 2024 and the README does not describe current maintenance
Step-by-step guide: how to use Editor.mdInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js or Bower (only if you use npm or bower install) · jQuery, loaded in the page

    Install with npm

    npm install editor.md

    Install with Bower

    bower install editor.md
  2. 2

    Run it

    • Install the package with npm or bower, or download the zip from GitHub
    • Include the editormd CSS file and jquery.min.js in your HTML page
    • Add a div with an id, then call editormd("editor", { path: "editor.md/lib/" }) inside a jQuery ready function
    • Open the page in a browser to see the editor
  3. 3

    Get the most out of it

    • Use the markdown option to set initial Markdown text from your code
    • Turn on saveHTMLToTextarea to submit rendered HTML along with the Markdown in a form
    • Use the onchange and onpreviewed callbacks to react to user edits
    • Load it with Require.js or Sea.js if your site uses those module loaders
    • Write your own editor plugins using the custom plugin support described in the README

Downloads

Strengths

  • Gives a full Markdown editor with live preview, code folding, and search and replace
  • Supports GFM and CommonMark, plus extras like table of contents, emoji, and task lists
  • Has many configuration options and a plugin system with AMD/CMD module loading

Trade-offs

  • Depends on jQuery and older browser-era libraries, so it may not fit modern JavaScript stacks
  • The README shows no recent release activity, and the last push date is April 2024
  • The README is truncated, so some setup and feature details could not be verified

How it compares

ProjectStarsTypeLevelUpdatedBest for
editor.md (this)14.3kLibrarybeginner2.5 years agoWeb developers who want a Markdown input box inside their own site or admin panel
tui.editor18kLibraryintermediate2.3 years agoWeb developers who want an embeddable Markdown editor in their own site or app
milkdown12kLibraryadvanced4 days agoDevelopers adding a rich markdown editing box to a web app
vditor11.4kLibraryintermediate19 days agoDevelopers who want to embed a Markdown editor in a web app
react-markdown15.9kLibrarybeginner1 months agoReact developers who need to display Markdown content such as comments, docs, or posts
showdown14.9kLibrarybeginner8 days agoJavaScript developers adding Markdown rendering to a web page

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.