# Was UI Builder ist: Oberflächen als JSON-Datei entwerfen

> UI Builder ist der visuelle Editor von Total.js für Benutzeroberflächen: Web-Apps, Dashboards, Flowboards und Parts, beschrieben durch eine JSON-Datei und gerendert von einer Web Component, ohne Servercode.

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

UI Builder ist ein **visueller Editor für Benutzeroberflächen**. Sie ziehen Komponenten auf eine Arbeitsfläche, konfigurieren und verbinden sie, und das Ergebnis ist kein Code, sondern eine **JSON-Datei**, die die Oberfläche beschreibt. Eine kleine Web Component rendert diese Datei überall, sodass ein UI-Builder-Design keine serverseitige Implementierung braucht. Es ist Open Source unter der **MIT-Lizenz**; der Editor ist das Repository [totaljs/uibuilder](https://github.com/totaljs/uibuilder), und Sie können die Cloud-Version unter [uibuilder.totaljs.com](https://uibuilder.totaljs.com) nutzen.

Diese Seiten beschreiben UI Builder (Revision `620107a` des Repositorys).

## Wofür es gedacht ist

Die Vorlagen des Editors zeigen, welche Arten von Oberflächen er baut:

| Vorlage | Verwendung |
|---|---|
| Web app | eine klassische Webanwendung |
| Dashboard | ein Dashboard mit Daten-Widgets |
| Flowboard | ein Board, das mit einem Datenfluss verbunden ist (es funktioniert mit [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | ein wiederverwendbares Stück Oberfläche |

Der Editor listet außerdem Vorlagen für mobile Apps und HMI-Panels, die in dieser Version abgeschaltet sind. Total.js stellt UI Builder für Webformulare, Dashboards, Intranets, IoT-Bildschirme sowie ERP- und CRM-Oberflächen vor.

## Warum es zu Total.js passt

- **Das Design sind Daten.** Eine JSON-Datei lässt sich leicht in einer Datenbank speichern, versionieren, erzeugen und an ein anderes Werkzeug weitergeben.
- **Es braucht keine besondere Umgebung.** Der Renderer ist eine jComponent-Web-Component, sodass jede Seite ein Design anzeigen kann.
- **Eigene Komponenten.** Eine Komponente ist eine HTML-Datei mit Stil, Code und Einstellungsformular ([Eine Komponente bauen](/en/uibuilder/build-a-component/)).
- **Es integriert sich** mit [Flow](https://www.totaljs.com/flow/) und mit [OpenPlatform](/en/openplatform/what-is-openplatform/) und unterstützt Lokalisierung.

Machen Sie weiter mit [Den Editor ausführen](/en/uibuilder/run-the-designer/), dem [JSON-Format](/en/uibuilder/the-ui-json-format/) und [Ein Design in Ihrer Seite rendern](/en/uibuilder/render-an-app-in-your-page/). Die offizielle Dokumentation finden Sie unter [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).