Mobiledoc Kit Demo

Mobiledoc is a publishing solution for authoring, saving and rendering rich WYSIWYG content.

Publishers use the Mobiledoc Kit library to build rich-content editors customized for their content. Posts are serialized to the JSON-based Mobiledoc format, a structure designed to unambiguously represent the content and be simple to render in a variety of display contexts such as server-side HTML, in-browser DOM, and SEO-friendly text.

Mobiledoc supports rich, interactive content via cards and atoms.

Development of Mobiledoc and the supporting libraries is generously funded by BDG's Engineering team.

Enter text into the editor below...

And see its representation in Mobiledoc format here:

Libraries

Libraries have been created by BDG Engineering and the community to support Mobiledoc usage in a variety of contexts.

Create Mobiledoc Editor

Environment	Library
JavaScript	mobiledoc-kit
Ember.js	ember-mobiledoc-editor
React	react-mobiledoc-editor

Render Mobiledoc

Output Format/Environment	Library
JavaScript in-browser (DOM)	mobiledoc-dom-renderer
HTML	See mobiledoc-dom-renderer's Rendering HTML section
Text	mobiledoc-text-renderer
In-browser (DOM) with Ember.js	ember-mobiledoc-dom-renderer
In-browser (DOM) with React	react-mobiledoc-editor
Virtual DOM	mobiledoc-vdom-renderer

Examples

Basic Editor

To create an editor, make a new instance of Mobiledoc.Editor and render it to an element.


      let el = document.getElementById('editor-basic');
      let editor = new Mobiledoc.Editor({
        placeholder: 'Welcome to Mobiledoc'
      });
      editor.render(el);

Toolbar Buttons


      $('button.header').click(() => {
        editor.toggleSection('h1');
      });
      $('button.strong').click(() => {
        editor.toggleMarkup('strong');
      });
      $('button.center').click(() => {
        editor.setAttribute('text-align', 'center');
      });

Cards and Atoms

Cards and atoms are used by Mobiledoc for editing and rendering rich content. Cards are rich sections and atoms are their inline equivalent. Both can be implemented with a small amount of JavaScript (or Ember.js or React components) and can be created in an afternoon, not days.


      let card = {
        name: 'kitten',
        type: 'dom',
        render() {
          let el$ = $(`
            <figure>
              <img src="http://placekitten.com/200/100">
              <figcaption>Image of a kitten</figcaption>
            </figure>
          `);
          return el[0]; // return DOM node
        }
      };
      $('button.insert-card').click(() => {
        editor.insertCard('kitten');
      });