Renderizar um design do UI Builder na sua própria página

UI Builder · uibuilder@1 uibuilderrenderweb component

Um design é um ficheiro JSON (o formato), e renderizá-lo é um só componente. O README do editor mostra-o com o web component j-uibuilder:

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

config="url:..." é o endereço do ficheiro JSON do design. A página precisa do jComponent 20 e do componente uibuilder; o próprio editor serve uma página pronta para isto (public/render.txt) que carrega o jComponent da 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>

Depois o design aparece onde puser a etiqueta: um formulário, um painel, um quadro de um fluxo. Como o design são dados, a sua aplicação pode decidir que ficheiro mostrar por utilizador ou por cliente.

O que a página do Forge já lhe dá

O catálogo de componentes do Forge tem a página uibuilder, gerada a partir do repositório dos componentes, com o seu readme e exemplo.
No editor, a lista de componentes que um design usa é a do seu campo components; um design só pode ser renderizado onde esses componentes possam ser alcançados.

Bom saber

Não precisa do editor para renderizar: qualquer página com o jComponent 20 pode fazê-lo.
O runtime que renderiza um design é cdn/uibuilder.min@1.js no repositório do editor.
O UI Studio, listado entre os modelos de aplicações do Total.js, assenta na mesma ideia (apps do Total.js).