# Vykreslenie dizajnu UI Builder na vlastnej stránke

> Zobrazte uložený dizajn kdekoľvek pomocou webového komponentu j-uibuilder a adresy jeho súboru JSON, s jComponent 20 ako jedinou požiadavkou.

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

Dizajn je súbor JSON ([formát](/en/uibuilder/the-ui-json-format/)) a jeho vykreslenie je jeden komponent. README editora ho ukazuje s webovým komponentom [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 súboru JSON dizajnu. Stránka potrebuje jComponent 20 a komponent `uibuilder`; samotný editor poskytuje na to hotovú stránku (`public/render.txt`), ktorá načíta 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>
```

Potom sa dizajn objaví tam, kde dáte značku: formulár, dashboard, tabuľa toku. Keďže dizajn sú dáta, vaša aplikácia môže rozhodnúť, ktorý súbor zobraziť podľa používateľa alebo zákazníka.

## Čo vám už dáva stránka Forge

- Katalóg komponentov Forge má stránku [uibuilder](/en/components/uibuilder/), vygenerovanú z repozitára komponentov, s jej readme a príkladom.
- V editore je zoznam komponentov, ktorý dizajn používa, ten v jeho poli `components`; dizajn možno vykresliť iba tam, kde sa k týmto komponentom dá dostať.

## Dobré vedieť

- Na vykreslenie editor nepotrebujete: dokáže to ktorákoľvek stránka s jComponent 20.
- Runtime, ktorý vykresľuje dizajn, je `cdn/uibuilder.min@1.js` v repozitári editora.
- UI Studio, uvedené medzi šablónami aplikácií Total.js, stavia na rovnakej myšlienke ([aplikácie Total.js](https://www.totaljs.com/apps/)).