# Renderizzare un design di UI Builder nella tua pagina

> Mostra un design salvato ovunque con il web component j-uibuilder e l’indirizzo del suo file JSON, con jComponent 20 come unico requisito.

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

Un design è un file JSON ([il formato](/en/uibuilder/the-ui-json-format/)), e renderizzarlo è un solo componente. Il README dell’editor lo mostra con il 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:..."` è l’indirizzo del file JSON del design. La pagina ha bisogno di jComponent 20 e del componente `uibuilder`; l’editor stesso serve una pagina pronta per questo (`public/render.txt`) che carica jComponent dalla 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>
```

Poi il design compare dove metti il tag: un modulo, una dashboard, una board di un flusso. Poiché il design è un dato, la tua applicazione può decidere quale file mostrare per utente o per cliente.

## Cosa ti dà già la pagina di Forge

- Il catalogo dei componenti di Forge ha la pagina [uibuilder](/en/components/uibuilder/), generata dal repository dei componenti, con il suo readme e il suo esempio.
- Nell’editor, l’elenco dei componenti che un design usa è quello nel suo campo `components`; un design può essere renderizzato solo dove quei componenti sono raggiungibili.

## Utile sapere

- Non hai bisogno dell’editor per renderizzare: qualsiasi pagina con jComponent 20 può farlo.
- Il runtime che renderizza un design è `cdn/uibuilder.min@1.js` nel repository dell’editor.
- UI Studio, elencato tra i modelli di app di Total.js, si basa sulla stessa idea ([app Total.js](https://www.totaljs.com/apps/)).