Guide · Open source

How to use SimpleMDE Markdown editor: install and configure

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

SimpleMDE is an open-source JavaScript component that turns a plain textarea on a web page into a Markdown editor with toolbar buttons, keyboard shortcuts and live styling of Markdown syntax. This guide is for web developers who want to embed a Markdown input box in their own site or form, and for anyone who wants to see what it can do before adding it. By the end you will know how to install it, create an editor, read and set its content, and turn on autosave and other options.

SimpleMDEsparksuite/simplemde-markdown-editor · ★ 10.1k · MIT Install options & downloads

Quick start

1Install the package. Run npm install simplemde --save in your project folder, or use one of the CDN options in the README.
2Include the files. Load simplemde.min.css and simplemde.min.js on your page, or import the package in your build.
3Add a textarea. Place a textarea with an id in your HTML form where you want the editor to appear.
4Create the editor. Call new SimpleMDE with element set to your textarea to replace it with the editor.
5Set options. Add options such as autosave with a uniqueId, or hideIcons, to match your form.
6Read and write content. Use simplemde.value() to get the Markdown text and simplemde.value(text) to set it.

What SimpleMDE does and who it is for

SimpleMDE is a drop-in replacement for a textarea. The README says the editor lets people who are less experienced with Markdown use familiar toolbar buttons and shortcuts, and it renders the syntax while you edit so the expected result is visible. Headings are shown larger, emphasized words are italicized and links are underlined.

It is a component to embed, not a finished application. It is a good fit for web developers building a Markdown input into their own site, and for non-technical users who need toolbar help. It is less suited to teams that want a standalone desktop or web app.

Replaces a textarea with a Markdown editor
Toolbar buttons and keyboard shortcuts
Live styling of Markdown syntax while typing
Built-in autosaving and spell checking

Install SimpleMDE with npm, bower or jsDelivr

The README lists npm as the install route for a package manager setup. Run the command in your project folder. The README also documents bower and jsDelivr CDN options. jsDelivr may take a few days to pick up the latest release, according to the README.

The README does not list any prerequisites.

npm: the README uses the simplemde package name
bower: also available per the README
jsDelivr: loads the CSS and JS files from a CDN

npm install simplemde --save

Create your first editor on a page

After installing, load SimpleMDE on the first textarea on a page. To target a specific textarea, pass its element as an option. The README shows both a pure JavaScript method and a jQuery method. Replace MyID with the id of your textarea.

Without an element option, SimpleMDE uses the first textarea on the page
Pass element: document.getElementById("MyID") to choose one

<script>
var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });
</script>

Get and set the editor content

Call value() with no argument to read the current Markdown text. Call it with a string to replace the content. The README uses this pattern for both reading and writing.

simplemde.value();
simplemde.value("This text will appear in the editor");

Turn on autosave and other key options

Autosave saves the text being written and loads it back later. According to the README, it forgets the text when the form it is in is submitted. Enable it with autosave.enabled, set a delay in milliseconds (default 10000, or 10 seconds), and give each instance a uniqueId so it does not clash with other editors on the site.

Other options include autofocus, placeholder, initialValue, hideIcons and showIcons, spellChecker (on by default), and toolbar (can be set to false to hide it). Setting forceSync to true stores changes in the original textarea immediately.

autosave.enabled: defaults to false
autosave.delay: defaults to 10000 ms
autosave.uniqueId: required for autosave to work
spellChecker: defaults to true
indentWithTabs: defaults to true
tabSize: defaults to 2

var simplemde = new SimpleMDE({
  autosave: {
    enabled: true,
    uniqueId: "MyUniqueID",
    delay: 1000,
  },
  spellChecker: true,
  hideIcons: ["guide", "heading"]
});

Customize rendering, syntax and status bar

The parsingConfig option changes how Markdown is parsed while editing, and renderingConfig changes how it is parsed for preview. For code highlighting in preview, the README says to set codeSyntaxHighlighting to true and include highlight.js on the page yourself. The previewRender option lets you supply your own parser. The status option controls the status bar, and you can add custom items.

parsingConfig: editing-time parsing (e.g. strikethrough, allowAtxHeaderWithoutSpace)
renderingConfig: preview-time parsing (e.g. singleLineBreaks, codeSyntaxHighlighting)
previewRender: custom function that returns HTML from plain Markdown
status: set to false to hide the status bar, or pass an ordered list of items

What people use it for

Adding a Markdown input box to a comment or post form on your own website
Saving drafts between page loads with autosave on a long-form writing page
Letting non-technical users write formatted text with toolbar buttons
Customizing toolbar icons or status bar items for a specific admin screen

Frequently asked questions

Is SimpleMDE free to use?

The repository is licensed under the MIT licence, as shown on its page. The MIT licence permits use under its terms, so check the licence text for the details that apply to your project.

How do I install SimpleMDE?

The README gives npm install simplemde --save as the package manager route. It also documents bower and jsDelivr CDN links. The README does not list any prerequisites.

Does SimpleMDE save my text automatically?

Yes, if you enable it. Set autosave.enabled to true and provide a unique uniqueId. The README says text is saved at the delay you set, which defaults to 10 seconds, and it is forgotten when the form is submitted.

Does SimpleMDE have a spell checker?

Yes. The spellChecker option defaults to true, and you can set it to false to disable it. The README describes SimpleMDE as one of the first editors to feature both autosaving and spell checking.

Can I use SimpleMDE to build a standalone Markdown app?

The README describes SimpleMDE as a component to embed in a page. It does not describe a standalone app, so you would need to build the surrounding application yourself.

What are good alternatives to SimpleMDE?

Projects listed as comparable are EasyMDE, Editor.md, Toast UI Editor and CodeMirror. EasyMDE is a related project, and CodeMirror is a general code editor that SimpleMDE is built on top of. Compare features such as collaboration, which the README does not mention for SimpleMDE, before choosing.

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

SimpleMDE suits web developers who want a ready-made Markdown input inside their own site or form, and non-technical users who benefit from toolbar buttons and autosave. It is a component, not a complete app, and the README does not describe ongoing maintenance support, so teams needing collaborative editing or guaranteed upkeep should compare alternatives such as EasyMDE, Toast UI Editor or Editor.md first.

Install options & downloads