# Randează un design UI Builder în propria pagină

> Afișează un design salvat oriunde cu web component-ul j-uibuilder și adresa fișierului lui JSON, cu jComponent 20 ca unică cerință.

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

Un design este un fișier JSON ([formatul](/en/uibuilder/the-ui-json-format/)), iar randarea lui înseamnă o singură componentă. README-ul editorului îl arată cu web component-ul [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:..."` este adresa fișierului JSON al designului. Pagina are nevoie de jComponent 20 și de componenta `uibuilder`; editorul însuși servește o pagină gata făcută pentru asta (`public/render.txt`) care încarcă jComponent de pe 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>
```

Apoi designul apare acolo unde pui eticheta: un formular, un tablou de bord, o tablă a unui flux. Deoarece designul este date, aplicația ta poate decide ce fișier să afișeze pentru fiecare utilizator sau client.

## Ce îți oferă deja pagina Forge

- Catalogul de componente al Forge are pagina [uibuilder](/en/components/uibuilder/), generată din depozitul componentelor, cu readme-ul și exemplul ei.
- În editor, lista de componente pe care o folosește un design este cea din câmpul lui `components`; un design poate fi randat doar acolo unde acele componente pot fi accesate.

## Bine de știut

- Nu ai nevoie de editor pentru a randa: orice pagină cu jComponent 20 o poate face.
- Runtime-ul care randează un design este `cdn/uibuilder.min@1.js` din depozitul editorului.
- UI Studio, listat printre șabloanele de aplicații Total.js, se bazează pe aceeași idee ([aplicațiile Total.js](https://www.totaljs.com/apps/)).