# Usar o ejecutar el editor de UI Builder y traer tus propios componentes

> Abre el editor en la nube o ejecútalo tú mismo con Node.js, qué contiene el proyecto y cómo cargar tu propia lista de componentes con el parámetro components.

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

## El editor en la nube

La forma más rápida es la versión en la nube del editor, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Ejecutarlo tú mismo

El editor es una pequeña aplicación Total.js 5 que sirve archivos estáticos. El README da tres pasos:

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

Descarga primero el código fuente, desde [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). La aplicación tiene una ruta que sirve sus archivos (`ROUTE('GET /*')`) y el archivo `config` define el nombre y la CDN de la interfaz (`cdn : //cdn.componentator.com`). El editor no necesita base de datos.

Lo que contiene el repositorio:

| Carpeta o archivo | Qué contiene |
|---|---|
| `public/` | el editor: `ui.js` y `func.js`, los formularios del editor (`forms/*.html`: ajustes, componentes, esquema, importar, código, rutas...) y las imágenes de las plantillas |
| `public/templates/` | los diseños iniciales: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` y `db.json` |
| `public/templates.json` | la lista de plantillas que ofrece el editor (existen una aplicación móvil y un panel HMI pero están desactivados) |
| `public/template.txt` | el esqueleto de un componente nuevo ([crear un componente](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | una página que renderiza un diseño con jComponent 20 |
| `cdn/uibuilder.min@1.js` | el runtime que renderiza un diseño (el objeto `UIBuilder` de la página) |

## Usar tu propia lista de componentes

El editor lee sus componentes de una lista. Puedes apuntarlo a tu propia lista añadiendo a la dirección el parámetro `components`, con la dirección de un archivo JSON como valor:

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

Así es como una empresa distribuye su propia biblioteca de componentes sin tocar el editor.

## De dónde vienen las piezas

El diseño que guarda el editor lleva, en su campo `components`, la dirección de la biblioteca que contiene cada componente, de modo que un diseño puede renderizarse más tarde por cualquiera que alcance esa dirección ([el formato JSON](/en/uibuilder/the-ui-json-format/)).