node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Travis CI Coveralls npm LICENSE

A markdown-it renderer plugin by using Incremental DOM.

Let's see key features: or




const IncrementalDOM = require('incremental-dom')
const md = require('markdown-it')().use(
  md.renderToIncrementalDOM('# Hello, Incremental DOM!')


Define as window.markdownitIncrementalDOM.

  <script src=""></script> 
  <script src=""></script> 
  <script src="./node_modules/markdown-it-incremental-dom/dist/markdown-it-incremental-dom.min.js"></script> 
  <div id="target"></div>
    var md = new markdownit().use(markdownitIncrementalDOM)
      md.renderToIncrementalDOM('# Hello, Incremental DOM!')


You can use the recent version through CDN provides by jsDelivr.

<script src=""></script>


We recommend using yarn to install.

$ yarn add incremental-dom markdown-it
$ yarn add markdown-it-incremental-dom

If you wanna use npm, try this:

$ npm install incremental-dom markdown-it --save
$ npm install markdown-it-incremental-dom --save


When injecting this plugin by .use(), you should pass Incremental DOM class as second argument. (window.IncrementalDOM by default)

const IncrementalDOM = require('incremental-dom')
const md = require('markdown-it')().use(

If it is succeed, 2 new rendering methods would be injected to instance.

TIPS: This plugin keeps default rendering methods render() and renderInline().


You can pass option object as third argument. See below:

    incrementalizeDefaultRules: true,
  • incrementalizeDefaultRules: For better performance, this plugin would override a few default renderer rules only when you calls injected methods. If the other plugins that override default rules have occurred any problem, You can disable overriding by setting false. (true by default)

Rendering methods

MarkdownIt.renderToIncrementalDOM(src[, env]) => Function

Similar to MarkdownIt.render(src[, env]) but it returns a function for Incremental DOM. It means doesn't render Markdown immediately.

You must render to DOM by using IncrementalDOM.patch(node, description). Please pass the returned function to the description argument. For example:

const node = document.getElementById('#target')
const func = md.renderToIncrementalDOM('# Hello, Incremental DOM!')
// It would render "<h1>Hello, Incremental DOM!</h1>" to <div id="target">
IncrementalDOM.patch(node, func)

MarkdownIt.renderInlineToIncrementalDOM(src[, env]) => Function

Similar to MarkdownIt.renderToIncrementalDOM but it wraps MarkdownIt.renderInline(src[, env]).

Renderer property

get MarkdownIt.IncrementalDOMRenderer => Renderer

Returns Renderer instance that includes Incremental DOM support.

It will inject Incremental DOM features into the current state of MarkdownIt.renderer at getting this property.

NOTE: This property is provided for the expert. Normally you should use renderToIncrementalDOM().

But it might be useful if you have to parse Markdown and operate tokens manually.

const md = new MarkdownIt()
const tokens = md.parse('# Hello')
// ...You can operate tokens here...
const patch = md.IncrementalDOMRenderer.render(tokens, md.options)
IncrementalDOM.patch(document.body, patch)


$ git clone
$ yarn install
$ yarn build

Lint & Format

$ yarn lint            # Run ESLint and Prettier to JS 
$ yarn lint --fix      # Fix lint and formatting of JS 
$ yarn format:check    # Run Prettier to Markdown, JSON and CSS 
$ yarn format --write  # Fix formatting by Prettier 

Publish to npm

$ npm publish

⚠️ Use npm >= 5.0.0.


Yuki Hattori (@yhatt)


This plugin releases under the MIT License.