# Vykreslení návrhu UI Builder na vlastní stránce

> Zobrazte uložený návrh kdekoli pomocí webové komponenty j-uibuilder a adresy jeho souboru JSON, s jComponent 20 jako jediným požadavkem.

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

Návrh je soubor JSON ([formát](/en/uibuilder/the-ui-json-format/)) a jeho vykreslení je jedna komponenta. README editoru ho ukazuje s webovou komponentou [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:..."` je adresa souboru JSON návrhu. Stránka potřebuje jComponent 20 a komponentu `uibuilder`; samotný editor poskytuje pro to hotovou stránku (`public/render.txt`), která načte jComponent z 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>
```

Pak se návrh objeví tam, kam dáte značku: formulář, dashboard, tabule toku. Protože návrh jsou data, vaše aplikace může rozhodnout, který soubor zobrazit podle uživatele nebo zákazníka.

## Co vám už dává stránka Forge

- Katalog komponent Forge má stránku [uibuilder](/en/components/uibuilder/), vygenerovanou z repozitáře komponent, s jejím readme a příkladem.
- V editoru je seznam komponent, který návrh používá, ten v jeho poli `components`; návrh lze vykreslit jen tam, kde jsou tyto komponenty dosažitelné.

## Dobré vědět

- K vykreslení editor nepotřebujete: dokáže to jakákoli stránka s jComponent 20.
- Runtime, který vykresluje návrh, je `cdn/uibuilder.min@1.js` v repozitáři editoru.
- UI Studio, uvedené mezi šablonami aplikací Total.js, staví na stejné myšlence ([aplikace Total.js](https://www.totaljs.com/apps/)).