Render a UI Builder design in your own page

UI Builder · uibuilder@1 uibuilderrenderweb component

A design is a JSON file (the format), and rendering it is one component. The README of the editor shows it with the web component j-uibuilder:

<ui-component name="uibuilder" config="url:https://uibuilder.totaljs.com/render.json"></ui-component>

config="url:..." is the address of the JSON file of the design. The page needs jComponent 20 and the component uibuilder; the editor itself serves a ready page for this (public/render.txt) that loads jComponent from the CDN:

<link href="https://cdn.componentator.com/spa.min@20.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@20.js"></script>

Then the design appears where you put the tag: a form, a dashboard, a board of a flow. Because the design is data, your application can decide which file to show per user or per customer.

What the page of Forge already gives you

The catalogue of components of Forge has the page uibuilder, generated from the repository of the components, with its readme and example.
In the editor, the component list that a design uses is the one in its components field; a design can only be rendered where those components can be reached.

Good to know

You do not need the editor to render: any page with jComponent 20 can do it.
The runtime that renders a design is cdn/uibuilder.min@1.js in the repository of the editor.
UI Studio, listed among the app templates of Total.js, builds on the same idea (Total.js apps).