# Ein UI-Builder-Design in Ihrer eigenen Seite rendern

> Zeigen Sie ein gespeichertes Design überall mit der Web Component j-uibuilder und der Adresse seiner JSON-Datei, mit jComponent 20 als einziger Voraussetzung.

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

Ein Design ist eine JSON-Datei ([das Format](/en/uibuilder/the-ui-json-format/)), und es zu rendern ist eine einzige Komponente. Die README des Editors zeigt es mit der Web Component [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:..."` ist die Adresse der JSON-Datei des Designs. Die Seite braucht jComponent 20 und die Komponente `uibuilder`; der Editor selbst liefert dafür eine fertige Seite (`public/render.txt`), die jComponent vom CDN lädt:

```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>
```

Dann erscheint das Design dort, wo Sie das Tag setzen: ein Formular, ein Dashboard, ein Board eines Flows. Da das Design Daten sind, kann Ihre Anwendung entscheiden, welche Datei sie pro Benutzer oder pro Kunde zeigt.

## Was die Seite von Forge Ihnen schon bietet

- Der Komponentenkatalog von Forge hat die Seite [uibuilder](/en/components/uibuilder/), erzeugt aus dem Repository der Komponenten, mit ihrem Readme und Beispiel.
- Im Editor ist die Komponentenliste, die ein Design verwendet, die in seinem Feld `components`; ein Design lässt sich nur dort rendern, wo diese Komponenten erreichbar sind.

## Gut zu wissen

- Zum Rendern brauchen Sie den Editor nicht: Jede Seite mit jComponent 20 kann das.
- Die Laufzeit, die ein Design rendert, ist `cdn/uibuilder.min@1.js` im Repository des Editors.
- UI Studio, aufgeführt unter den App-Vorlagen von Total.js, baut auf derselben Idee auf ([Total.js-Apps](https://www.totaljs.com/apps/)).