# Utiliser ou exécuter l’éditeur UI Builder, et apporter vos propres composants

> Ouvrez l’éditeur cloud ou exécutez-le vous-même avec Node.js, ce que contient le projet et comment charger votre propre liste de composants avec le paramètre components.

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

## L’éditeur cloud

Le plus rapide est la version cloud de l’éditeur, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## L’exécuter vous-même

L’éditeur est une petite application Total.js 5 qui sert des fichiers statiques. Le README donne trois étapes :

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

Téléchargez d’abord le code source, depuis [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). L’application a une route qui sert ses fichiers (`ROUTE('GET /*')`) et le fichier `config` définit le nom et le CDN de l’interface (`cdn : //cdn.componentator.com`). L’éditeur n’a besoin d’aucune base de données.

Ce que contient le dépôt :

| Dossier ou fichier | Ce qu’il contient |
|---|---|
| `public/` | l’éditeur : `ui.js` et `func.js`, les formulaires de l’éditeur (`forms/*.html` : réglages, composants, schéma, import, code, chemins...) et les images des modèles |
| `public/templates/` | les designs de départ : `app.json`, `dashboard.json`, `flowboard.json`, `part.json` et `db.json` |
| `public/templates.json` | la liste des modèles que propose l’éditeur (une application mobile et un panneau HMI existent mais sont désactivés) |
| `public/template.txt` | le squelette d’un nouveau composant ([créer un composant](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | une page qui rend un design avec jComponent 20 |
| `cdn/uibuilder.min@1.js` | le runtime qui rend un design (l’objet `UIBuilder` de la page) |

## Utiliser votre propre liste de composants

L’éditeur lit ses composants depuis une liste. Vous pouvez le pointer vers votre propre liste en ajoutant à l’adresse le paramètre `components`, avec l’adresse d’un fichier JSON comme valeur :

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

C’est ainsi qu’une entreprise livre sa propre bibliothèque de composants sans toucher à l’éditeur.

## D’où viennent les pièces

Le design enregistré par l’éditeur porte, dans son champ `components`, l’adresse de la bibliothèque qui contient chaque composant, de sorte qu’un design peut être rendu plus tard par quiconque peut atteindre cette adresse ([le format JSON](/en/uibuilder/the-ui-json-format/)).