# Използване или стартиране на редактора на UI Builder и собствени компоненти

> Отворете облачния редактор или го стартирайте сами с Node.js, какво съдържа проектът и как да заредите собствен списък с компоненти с параметъра components.

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

## Облачният редактор

Най-бързият начин е облачната версия на редактора, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Стартиране сами

Редакторът е малко приложение на Total.js 5, което сервира статични файлове. README дава три стъпки:

```bash
npm install
node index.js
```

Първо изтеглете изходния код от [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). Приложението има един маршрут, който сервира файловете му (`ROUTE('GET /*')`), а файлът `config` задава името и CDN на интерфейса (`cdn : //cdn.componentator.com`). Редакторът не се нуждае от база данни.

Какво съдържа хранилището:

| Папка или файл | Какво съдържа |
|---|---|
| `public/` | редакторът: `ui.js` и `func.js`, формите на редактора (`forms/*.html`: настройки, компоненти, схема, импортиране, код, пътища...) и изображенията на шаблоните |
| `public/templates/` | началните дизайни: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` и `db.json` |
| `public/templates.json` | списъкът с шаблони, които редакторът предлага (съществуват мобилно приложение и HMI панел, но са изключени) |
| `public/template.txt` | скелетът на нов компонент ([създаване на компонент](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | страница, която визуализира дизайн с jComponent 20 |
| `cdn/uibuilder.min@1.js` | средата за изпълнение, която визуализира дизайн (обектът `UIBuilder` на страницата) |

## Използване на собствен списък с компоненти

Редакторът чете компонентите си от списък. Можете да го насочите към собствен списък, като добавите към адреса параметъра `components` с адреса на JSON файл като стойност:

```text
https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DB
```

Така една компания доставя собствена библиотека с компоненти, без да докосва редактора.

## Откъде идват частите

Дизайнът, записан от редактора, носи в полето си `components` адреса на библиотеката, която съдържа всеки компонент, така че дизайнът може да бъде визуализиран по-късно от всеки, който достига до този адрес ([JSON форматът](/en/uibuilder/the-ui-json-format/)).