# Den UI-Builder-Editor nutzen oder ausführen und eigene Komponenten einbringen

> Öffnen Sie den Cloud-Editor oder führen Sie ihn selbst mit Node.js aus, was das Projekt enthält und wie Sie Ihre eigene Komponentenliste mit dem Parameter components laden.

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

## Der Cloud-Editor

Am schnellsten geht es mit der Cloud-Version des Editors, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Selbst ausführen

Der Editor ist eine kleine Total.js-5-Anwendung, die statische Dateien ausliefert. Die README nennt drei Schritte:

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

Laden Sie zuerst den Quellcode von [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder) herunter. Die Anwendung hat eine Route, die ihre Dateien ausliefert (`ROUTE('GET /*')`), und die Datei `config` legt den Namen und das CDN der Oberfläche fest (`cdn : //cdn.componentator.com`). Der Editor braucht keine Datenbank.

Was das Repository enthält:

| Ordner oder Datei | Was sie enthält |
|---|---|
| `public/` | der Editor: `ui.js` und `func.js`, die Formulare des Editors (`forms/*.html`: Einstellungen, Komponenten, Schema, Import, Code, Pfade...) und die Bilder der Vorlagen |
| `public/templates/` | die Start-Designs: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` und `db.json` |
| `public/templates.json` | die Liste der Vorlagen, die der Editor anbietet (eine mobile App und ein HMI-Panel existieren, sind aber abgeschaltet) |
| `public/template.txt` | das Grundgerüst einer neuen Komponente ([Eine Komponente bauen](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | eine Seite, die ein Design mit jComponent 20 rendert |
| `cdn/uibuilder.min@1.js` | die Laufzeit, die ein Design rendert (das Objekt `UIBuilder` der Seite) |

## Eigene Komponentenliste verwenden

Der Editor liest seine Komponenten aus einer Liste. Sie können ihn auf Ihre eigene Liste verweisen, indem Sie der Adresse den Parameter `components` hinzufügen, mit der Adresse einer JSON-Datei als Wert:

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

So liefert ein Unternehmen seine eigene Komponentenbibliothek aus, ohne den Editor anzufassen.

## Woher die Teile kommen

Das vom Editor gespeicherte Design trägt in seinem Feld `components` die Adresse der Bibliothek, die jede Komponente enthält, sodass ein Design später von jedem gerendert werden kann, der diese Adresse erreicht ([das JSON-Format](/en/uibuilder/the-ui-json-format/)).