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.