# Renderowanie projektu UI Builder na własnej stronie

> Pokaż zapisany projekt gdziekolwiek za pomocą web componentu j-uibuilder i adresu jego pliku JSON, z jComponent 20 jako jedynym wymaganiem.

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

Projekt to plik JSON ([format](/en/uibuilder/the-ui-json-format/)), a jego renderowanie to jeden komponent. README edytora pokazuje to z web componentem [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:..."` to adres pliku JSON projektu. Strona potrzebuje jComponent 20 i komponentu `uibuilder`; sam edytor serwuje do tego gotową stronę (`public/render.txt`), która ładuje 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>
```

Wtedy projekt pojawia się tam, gdzie umieścisz znacznik: formularz, dashboard, tablica przepływu. Ponieważ projekt to dane, Twoja aplikacja może zdecydować, który plik pokazać dla użytkownika lub klienta.

## Co Forge już Ci daje na swojej stronie

- Katalog komponentów Forge ma stronę [uibuilder](/en/components/uibuilder/), wygenerowaną z repozytorium komponentów, z jej readme i przykładem.
- W edytorze lista komponentów używana przez projekt to ta z jego pola `components`; projekt można wyrenderować tylko tam, gdzie te komponenty są osiągalne.

## Warto wiedzieć

- Do renderowania nie potrzebujesz edytora: może to zrobić każda strona z jComponent 20.
- Runtime renderujący projekt to `cdn/uibuilder.min@1.js` w repozytorium edytora.
- UI Studio, wymienione wśród szablonów aplikacji Total.js, opiera się na tym samym pomyśle ([aplikacje Total.js](https://www.totaljs.com/apps/)).