# Визуализиране на дизайн на UI Builder във вашата страница

> Покажете записан дизайн навсякъде с уеб компонента j-uibuilder и адреса на неговия JSON файл, с jComponent 20 като единствено изискване.

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

Дизайнът е JSON файл ([форматът](/en/uibuilder/the-ui-json-format/)), а визуализирането му е един компонент. README на редактора го показва с уеб компонента [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:..."` е адресът на JSON файла на дизайна. Страницата се нуждае от jComponent 20 и от компонента `uibuilder`; самият редактор сервира готова страница за това (`public/render.txt`), която зарежда jComponent от 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>
```

Тогава дизайнът се появява там, където поставите тага: форма, табло, дъска на поток. Тъй като дизайнът са данни, приложението ви може да реши кой файл да покаже за потребител или за клиент.

## Какво вече ви дава страницата на Forge

- Каталогът с компоненти на Forge има страницата [uibuilder](/en/components/uibuilder/), генерирана от хранилището на компонентите, с нейния readme и пример.
- В редактора списъкът с компоненти, който ползва дизайнът, е този в полето му `components`; дизайн може да се визуализира само там, където тези компоненти са достъпни.

## Добре е да знаете

- Не ви трябва редакторът, за да визуализирате: всяка страница с jComponent 20 може да го направи.
- Средата за изпълнение, която визуализира дизайн, е `cdn/uibuilder.min@1.js` в хранилището на редактора.
- UI Studio, изброен сред шаблоните за приложения на Total.js, се основава на същата идея ([приложенията на Total.js](https://www.totaljs.com/apps/)).