# Använd eller kör UI Builder-editorn och ta med dina egna komponenter

> Öppna molneditorn eller kör den själv med Node.js, vad projektet innehåller och hur du laddar din egen lista över komponenter med parametern components.

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

## Molneditorn

Det snabbaste är molnversionen av editorn, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Köra den själv

Editorn är en liten Total.js 5-applikation som serverar statiska filer. README ger tre steg:

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

Ladda först ner källkoden från [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). Applikationen har en rutt som serverar dess filer (`ROUTE('GET /*')`) och filen `config` anger gränssnittets namn och CDN (`cdn : //cdn.componentator.com`). Editorn behöver ingen databas.

Vad förrådet innehåller:

| Mapp eller fil | Vad den innehåller |
|---|---|
| `public/` | editorn: `ui.js` och `func.js`, editorns formulär (`forms/*.html`: inställningar, komponenter, schema, import, kod, sökvägar...) och mallarnas bilder |
| `public/templates/` | startdesignerna: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` och `db.json` |
| `public/templates.json` | listan över mallar som editorn erbjuder (en mobilapp och en HMI-panel finns men är avstängda) |
| `public/template.txt` | skelettet för en ny komponent ([bygga en komponent](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | en sida som renderar en design med jComponent 20 |
| `cdn/uibuilder.min@1.js` | körtiden som renderar en design (sidans objekt `UIBuilder`) |

## Använd din egen lista över komponenter

Editorn läser sina komponenter från en lista. Du kan peka den mot din egen lista genom att lägga till parametern `components` i adressen, med adressen till en JSON-fil som värde:

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

Så levererar ett företag sitt eget komponentbibliotek utan att röra editorn.

## Var delarna kommer ifrån

Designen som editorn sparar bär i sitt fält `components` adressen till biblioteket som innehåller varje komponent, så att en design senare kan renderas av vem som helst som når den adressen ([JSON-formatet](/en/uibuilder/the-ui-json-format/)).