# Een UI Builder-ontwerp in je eigen pagina renderen

> Toon een opgeslagen ontwerp overal met het web component j-uibuilder en het adres van zijn JSON-bestand, met jComponent 20 als enige vereiste.

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

Een ontwerp is een JSON-bestand ([het formaat](/en/uibuilder/the-ui-json-format/)), en het renderen is één component. De README van de editor toont het met het 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:..."` is het adres van het JSON-bestand van het ontwerp. De pagina heeft jComponent 20 en de component `uibuilder` nodig; de editor zelf serveert daarvoor een kant-en-klare pagina (`public/render.txt`) die jComponent van de CDN laadt:

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

Dan verschijnt het ontwerp waar je de tag plaatst: een formulier, een dashboard, een board van een flow. Omdat het ontwerp data is, kan je toepassing beslissen welk bestand ze per gebruiker of per klant toont.

## Wat de pagina van Forge je al geeft

- De componentencatalogus van Forge heeft de pagina [uibuilder](/en/components/uibuilder/), gegenereerd uit de repository van de componenten, met haar readme en voorbeeld.
- In de editor is de lijst met componenten die een ontwerp gebruikt die in zijn veld `components`; een ontwerp kan alleen worden gerenderd waar die componenten bereikbaar zijn.

## Goed om te weten

- Je hebt de editor niet nodig om te renderen: elke pagina met jComponent 20 kan het.
- De runtime die een ontwerp rendert is `cdn/uibuilder.min@1.js` in de repository van de editor.
- UI Studio, genoemd onder de app-sjablonen van Total.js, bouwt voort op hetzelfde idee ([Total.js-apps](https://www.totaljs.com/apps/)).