Renderizar un diseño de UI Builder en tu propia página

UI Builder · uibuilder@1 uibuilderrenderweb component

Un diseño es un archivo JSON (el formato), y renderizarlo es un solo componente. El README del editor lo muestra con el web component j-uibuilder:

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

config="url:..." es la dirección del archivo JSON del diseño. La página necesita jComponent 20 y el componente uibuilder; el propio editor sirve una página lista para esto (public/render.txt) que carga jComponent desde la 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>

Entonces el diseño aparece donde pongas la etiqueta: un formulario, un panel, un tablero de un flujo. Como el diseño son datos, tu aplicación puede decidir qué archivo mostrar por usuario o por cliente.

Lo que ya te da la página de Forge

El catálogo de componentes de Forge tiene la página uibuilder, generada a partir del repositorio de los componentes, con su readme y ejemplo.
En el editor, la lista de componentes que usa un diseño es la de su campo components; un diseño solo puede renderizarse donde se pueda llegar a esos componentes.

Conviene saber

No necesitas el editor para renderizar: cualquier página con jComponent 20 puede hacerlo.
El runtime que renderiza un diseño es cdn/uibuilder.min@1.js en el repositorio del editor.
UI Studio, que aparece entre las plantillas de aplicaciones de Total.js, se apoya en la misma idea (aplicaciones de Total.js).