# De UI Builder-editor gebruiken of uitvoeren en je eigen componenten meenemen

> Open de cloudeditor of voer hem zelf uit met Node.js, wat het project bevat en hoe je je eigen lijst met componenten laadt met de parameter components.

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

## De cloudeditor

De snelste manier is de cloudversie van de editor, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Zelf uitvoeren

De editor is een kleine Total.js 5-toepassing die statische bestanden serveert. De README geeft drie stappen:

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

Download eerst de broncode van [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). De toepassing heeft één route die haar bestanden serveert (`ROUTE('GET /*')`) en het bestand `config` stelt de naam en de CDN van de interface in (`cdn : //cdn.componentator.com`). De editor heeft geen database nodig.

Wat de repository bevat:

| Map of bestand | Wat het bevat |
|---|---|
| `public/` | de editor: `ui.js` en `func.js`, de formulieren van de editor (`forms/*.html`: instellingen, componenten, schema, importeren, code, paden...) en de afbeeldingen van de sjablonen |
| `public/templates/` | de startontwerpen: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` en `db.json` |
| `public/templates.json` | de lijst met sjablonen die de editor aanbiedt (een mobiele app en een HMI-paneel bestaan maar zijn uitgeschakeld) |
| `public/template.txt` | het skelet van een nieuwe component ([een component bouwen](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | een pagina die een ontwerp rendert met jComponent 20 |
| `cdn/uibuilder.min@1.js` | de runtime die een ontwerp rendert (het object `UIBuilder` van de pagina) |

## Je eigen lijst met componenten gebruiken

De editor leest zijn componenten uit een lijst. Je kunt hem naar je eigen lijst laten wijzen door de parameter `components` aan het adres toe te voegen, met het adres van een JSON-bestand als waarde:

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

Zo levert een bedrijf zijn eigen componentenbibliotheek zonder de editor aan te raken.

## Waar de onderdelen vandaan komen

Het door de editor opgeslagen ontwerp draagt in zijn veld `components` het adres van de bibliotheek die elke component bevat, zodat een ontwerp later kan worden gerenderd door iedereen die dat adres kan bereiken ([het JSON-formaat](/en/uibuilder/the-ui-json-format/)).