Rendering Davinci Components in HTML

Overview

Often times in an HTML document, you may want to copy and paste a set of components created with the page editor into your HTML page. This page demonstrates how this can be done.

Davinci Library

The davinci library enables the rendering of a copied davinci page or set of components. The viewport method takes an id and a object or array representing the components to be rendered and will render them in the HTML element with the given id. (typically a div) 


import('/lib/davinci/v1.0.0/davinci.mjs').then(dv=>{
	//config is the configuration that is copied from the desktop or page editor
	let config = {"type":"clipboard","children":[{"body":...
	dv.viewport('id', config);
});

The config can be obtained by copying the components from the page editor. (Create the components in the editor, leave all components unselected, and then click the copy button. This will place a textual representation of the components in your clipboard, which can ba pasted into code like that above).


As an alternative, the render method can also be used. This will render the components immediately, regardless of their relationship to the browsers viewport. 


import('/lib/davinci/v1.0.0/davinci.mjs').then(dv=>{
	//config is the configuration that is copied from the desktop or page editor
	let config = {"type":"clipboard","children":[{"body":...
	dv.render(config,{
        target:'#chart'
    });
});

Demos

Rendering Davinci Components
a quick demonstration of creating a chart using the page editor and rendering it within HTML