Renders Mobiledoc input to DOM output

Usage no npm install needed!

<script type="module">
  import bustleMobiledocAppleNewsRenderer from 'https://cdn.skypack.dev/@bustle/mobiledoc-apple-news-renderer';


Mobiledoc Apple News Renderer

Renders mobiledoc to an array of apple news components. Supports mobiledoc version 0.3.0 and later. Supports Apple News format 1.4.

Apple News Format 1.0 Reference

The mapping in lib/utils/apple-news is used to map mobiledoc section tag names to Apple News component roles.

The renderer returns an render result that is a fully-realized (albeit unstyled) article.json. The article's components correspond to the rendered sections of the mobiledoc.


Must pass an htmlSerializer property to the renderer, as well as a dom property.

htmlSerializer is a function that will be called with a DOM (or SimpleDOM) element and it will return the serialized HTML as a string.


import Renderer from 'mobiledoc-apple-news-renderer';
import SimpleDOM from 'simple-dom';

let renderer = new Renderer(mobiledoc, {
  cards: [],
  dom: new SimpleDOM.Document(),
  htmlSerializer: (element) => {
    return new SimpleDOM.HTMLSerializer(SimpleDOM.voidMap).

let rendered = renderer.render();
let article = rendered.result;
   article: {
     version: '1.0',
     title: 'Default Title',
     layout: {},
     ... other Apple News default properties
     components: [
         role: 'body',
         format: 'html',
         text: 'The rendered HTML of the first mobiledoc section...'

Running tests

In browser:

  • npm start
  • visit http://localhost:4200/tests


  • npm test


Before publishing run npm run build to generate the transpiled files in dist/