Cymatical / markdown-html-form

Write markdown, preview html, submit as a form

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Author: Justin McCandless (
Simple Demo:
Demo with Hallo:
Minimum Dependecies: jQuery
Two-way Dependecies: to-markdown

The purpose of this project is to create the most simple and efficient way to write blog posts and other content on the web. This is accomplished through an easy to setup markdown to html form element and preview.


HTML Setup

In order to use this project, you must have at least one textarea tag with the .mdhtmlform-md class on it. All markdown input into this field will be converted to html and kept in sync with with any divs or textareas with the .mdhtmlform-html on them. So a typical setup might look like this:

<!-- Edit markdown here! -->
<textarea class="mdhtmlform-md">## Write markdown in the textarea!</textarea>
<br /><br />

<!-- Display converted html here! -->
<div class="mdhtmlform-html"></div>
<br /><br />

<!-- And insert converted html for submission here. -->
<textarea class="mdhtmlform-html" style="display: none;"></textarea>

Javascript Setup

Simply include the mdhtmlform.js file found in the src/ folder after jQuery and Showdown, and you're good to go.

Two-way Conversion

I've shown how to sync the Markdown to an HTML preview div or textarea, but if you also want the HTML textarea to sync back to Markdown then that's easy too. Just make sure you also include to-markdown before mdhtmlform and the HTML will sync back automatically. Don't forget your HTML textarea still needs the mdhtmlform-html class. Check out examples/two-way for an example.

Multiple Instances

If you need multiple Markdown textareas syncing their HTML to separate elements on the same page, this is also easily accomplished. Just add a unique data-mdhtmlform-group data attribute to the elements of each instance you need. Here's an example:

<!-- The first Markdown input -->
<textarea class="mdhtmlform-md" data-mdhtmlform-group="0">## Write markdown in the textarea!</textarea>
<br /><br />

<!-- HTML preview of whatever is in the first Markdown input -->
<div class="mdhtmlform-html" data-mdhtml-group="0"></div>
<br /><br />

<!-- The second Markdown input -->
<textarea class="mdhtmlform-md" data-mdhtmlform-group="1">## Write completely different markdown in this textarea!</textarea>
<br /><br />

<!-- HTML preview of whatever is in the second Markdown input -->
<div class="mdhtmlform-html" data-mdhtml-group="1"></div>

Check out the examples/multiple/ folder for a full working example.


The project will initialize itself and start working automatically when jQuery is ready, but if you want to initialize it yourself at a differnt time, simply call its constructor and pass in the Markdown textarea you're using:

new MdHtmlForm($("textarea.mdhtmlform-md"))


Check out the examples in the examples/ folder to see some working demos. All make use of HTML5 Boilerplate for their starting points.

Simple Example

Live at:

The simple example is probably the most basic use case of the project. Markdown entered into a form shows a preview in realtime, and on submission of the form submits the converted html via a hidden input.

Two-way Example

Live at:

This examples shows how to sync in both directions, with a raw HTML textarea syncing with a Markdown textarea and a preview div.

Multiple Example

Live at:

This examples shows how to get two independent instances of the project working on the same page. Convert two differnt Markdown textareas to two differnt HTML previews.

Hallo Example

Live at:

This example makes use of Hallo to make the live preview of the markdown editable. This basically gives you a markdown editor and a WYSIWYG editor kept in sync.


This project is free software licensed under the MIT license. See

ezoic increase your site revenue


Write markdown, preview html, submit as a form



Language:CoffeeScript 100.0%