Mobiledoc renderer that outputs valid react jsx


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @dailybeast/mobiledoc-react-renderer in KB


Mobiledoc React Renderer

Mobiledoc server and client rendering for Mobiledoc-kit.

This renderer is used across www.thedailybeast.com to perform both client and server rendering of our React app. It supports rendering of markups, atoms, cards and custom sections of any mobiledoc (0.3.0 or greater).



This renderer is intended to be used from react components, for example:

import PropTypes from 'prop-types';
import { Component } from 'react';
import MobiledocReactRenderer from 'mobiledoc-react-renderer';

const mobiledoc = {
  "atoms": [],
  "cards": [],
  "markups": [],
  "sections": [
        [0, [], 0, "Hello world!"]
  "version": "0.3.0"

export default class Mobiledoc extends Component {
  static propTypes = {
    mobiledoc: PropTypes.object.isRequired

  constructor(props) {

    const options = { atoms: [], cards: [], markups: [] };

    this.renderer = new MobiledocReactRenderer(options);

  render() {
    return this.renderer.render(this.props.mobiledoc);


To run the unit tests use: npm test

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.