Livingdoc Model

A Livingdoc represents a Livingdocs document. It consists of a componentTree and can have one or more views.


Create a new livingdoc

const doc = require('@livingdocs/framework')

const livingdoc = doc.create({
  design: {
    name: 'bootstrap',
    version: '1.0.0'

Create views

Simply render a livingdoc into your current page:

livingdoc.appendTo('.article-container', { interactive: false })

Create multiple views in iframes:

const interactiveView = livingdoc.createView('.editor-section', {interactive: true})
const preview = livingdoc.createView('.editor-preview')

With the iframe technique you can isolate CSS or Javascript that is needed in your documents and also generate views that will work properly with responsive designs. There can only be one interactive view where the user can edit, but you can have as many readOnly views as you want to preview the content at different screen sizes at the same time.



A componentTree instance. Here you can manipulate your document.


The Design used in this livingdoc.


An array of all views associated with this livingdoc.


The interactiveView associated with this livingdoc if you created one.



// Create a component
const titleComponent = livingdoc.createComponent('title')
const componentTree = livingdoc.componentTree


With toJson() you can serialize a Livingdoc to a JSON string. To get a JSON object instead of a string, you can call serialize() instead of toJson().

Here you see a serialized version of a livingdoc in JSON. This is an example document that uses the ‘ghibli’ design and consists of three components: A cover, a title and a lead.

  "content": [
      "id": "doc-18fsfqsiq0",
      "component": "cover",
      "content": {}
      "id": "doc-18fsfr5f50",
      "component": "title",
      "content": {
        "title": "Storytellers have more fun"
      "id": "doc-18fsfra8r0",
      "component": "lead",
      "content": {
        "text": "Yet, if we look at the interesting people in our lives, I think we’ll find few of them have climbed Mount Everest or broken a wild mustang. Most have never wrestled an alligator or gotten embroiled in a covert operation. Most haven’t seen a whole lot of real excitement."

Manage Dependencies

// add js
livingdoc.addJsDependency({src: 'url'})
livingdoc.addJsDependency({code: 'inline js'})

// add css
livingdoc.addCssDependency({src: 'url'})
livingdoc.addCssDependency({code: 'inline css'})

// use namespaces
livingdoc.addJsDependency({src: 'url', namespace: 'embeds.twitter'})

// Access the dependencies collection directly:
const dependencies = livingdoc.dependencies

// Transform to JSON object

// Get namespaces (Array of String)

// Get all dependencies of a namespace

// Get an HTML string to include in a published document or to
// Add to a document on the server side.

Exposed Modules

For reuse in the editor these modules are exposed on doc: doc.JsLoader and doc.CssLoader


const jsLoader = new doc.JsLoader({window: iframe.contentWindow})
jsLoader.loadSingleUrl(url, callback)
jsLoader.loadInlineScript(url, callback)