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

> Mostre um design guardado em qualquer lado com o web component j-uibuilder e o endereço do seu ficheiro JSON, com o jComponent 20 como único requisito.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: pt
Content-SHA256: 5982f3eb7625fc5db55b33a5ae72d4b4368bc03e5bce6ca984f1d2faa1c309ce
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Um design é um ficheiro JSON ([o formato](/en/uibuilder/the-ui-json-format/)), e renderizá-lo é um só componente. O README do editor mostra-o com o web component [j-uibuilder](https://componentator.com/components/j-uibuilder/):

```html
<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:

```html
<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](/en/components/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](https://www.totaljs.com/apps/)).