# Use or run the UI Builder editor, and bring your own components

> Open the cloud editor or run it yourself with Node.js, what the project contains and how to load your own list of components with the components parameter.

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

## The cloud editor

The quickest way is the cloud version of the editor, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Run it yourself

The editor is a small Total.js 5 application that serves static files. The README gives three steps:

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

Download the source code first, from [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). The application has one route that serves its files (`ROUTE('GET /*')`) and the `config` file sets the name and the CDN of the interface (`cdn : //cdn.componentator.com`). The editor needs no database.

What the repository contains:

| Folder or file | What it holds |
|---|---|
| `public/` | the editor: `ui.js` and `func.js`, the forms of the editor (`forms/*.html`: settings, components, schema, import, code, paths...) and the images of the templates |
| `public/templates/` | the starting designs: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` and `db.json` |
| `public/templates.json` | the list of templates that the editor offers (a mobile app and an HMI panel exist but are disabled) |
| `public/template.txt` | the skeleton of a new component ([build a component](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | a page that renders a design with jComponent 20 |
| `cdn/uibuilder.min@1.js` | the runtime that renders a design (the `UIBuilder` object of the page) |

## Use your own list of components

The editor reads its components from a list. You can point it to your own list by adding the parameter `components` to the address, with the address of a JSON file as its value:

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

This is how a company ships its own component library without touching the editor.

## Where the pieces come from

The design saved by the editor carries, in its `components` field, the address of the library that holds each component, so a design can be rendered later by anyone who can reach that address ([the JSON format](/en/uibuilder/the-ui-json-format/)).