Component Tree

A component tree is a tree of components. Just like the DOM is a tree of DOM nodes.

Schematic example of a componentTree:

// - ComponentContainer (root)
// - Component 'Hero'
// - Component '2 Columns'
// - ComponentContainer 'main'
// - Component 'Title'
// - ComponentContainer 'sidebar'
// - Component 'Info-Box'


Create components:

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

Insert components:

// Insert a component at the beginning.
// Insert component at the end.

Traverse and find components:

// Traverse through each component
componentTree.each((component) => {
// your code
// Traverse through each container
componentTree.eachContainer((container) => {
// your code
// Traverse through each component and container
componentTree.all((componentOrContainer) => {
// your code
// Find all components of a type
const subtitles = componentTree.find('subtitle')
if (subtitles.length) {
const subtitleComponent = subtitles[0]
// Get the first component in a document
const firstComponent = componentTree.first()



This method is called by Livingdoc.toJson() internally.

Development Helpers:

// Get a readable string of the whole componentTree

Change Events:

A componentTree issues events whenever a change happens. You can subscribe to those events to get notified of changes. Internally views listen to the componentTree for changes to update the DOM.

  • componentAdded

    Get notified when a component was added

  • componentRemoved

    Get notified when a component was deleted

  • componentMoved

    Get notified when a component has changed its position

  • componentContentChanged

    Get notified when the content of a component changed. (E.g. the user has edited a text)

  • componentHtmlChanged

    Get notified when component settings changed. For example a css class.

  • changed

    Get notified of all changes in a document. Fires when any of the above events for any component fires.