# Usare o eseguire l’editor di UI Builder e portare i tuoi componenti

> Apri l’editor cloud o eseguilo tu stesso con Node.js, cosa contiene il progetto e come caricare il tuo elenco di componenti con il parametro components.

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

## L’editor cloud

Il modo più rapido è la versione cloud dell’editor, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Eseguirlo tu stesso

L’editor è una piccola applicazione Total.js 5 che serve file statici. Il README indica tre passi:

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

Scarica prima il codice sorgente da [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). L’applicazione ha una rotta che serve i suoi file (`ROUTE('GET /*')`) e il file `config` imposta il nome e la CDN dell’interfaccia (`cdn : //cdn.componentator.com`). L’editor non richiede un database.

Cosa contiene il repository:

| Cartella o file | Cosa contiene |
|---|---|
| `public/` | l’editor: `ui.js` e `func.js`, i moduli dell’editor (`forms/*.html`: impostazioni, componenti, schema, importazione, codice, percorsi...) e le immagini dei modelli |
| `public/templates/` | i design iniziali: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` e `db.json` |
| `public/templates.json` | l’elenco dei modelli che l’editor offre (esistono un’app mobile e un pannello HMI ma sono disattivati) |
| `public/template.txt` | lo scheletro di un nuovo componente ([creare un componente](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | una pagina che renderizza un design con jComponent 20 |
| `cdn/uibuilder.min@1.js` | il runtime che renderizza un design (l’oggetto `UIBuilder` della pagina) |

## Usare il tuo elenco di componenti

L’editor legge i suoi componenti da un elenco. Puoi puntarlo al tuo elenco aggiungendo all’indirizzo il parametro `components`, con l’indirizzo di un file JSON come valore:

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

Così un’azienda distribuisce la propria libreria di componenti senza toccare l’editor.

## Da dove vengono i pezzi

Il design salvato dall’editor porta, nel suo campo `components`, l’indirizzo della libreria che contiene ogni componente, così un design può essere renderizzato in seguito da chiunque raggiunga quell’indirizzo ([il formato JSON](/en/uibuilder/the-ui-json-format/)).