# Ce qu’est UI Builder : concevoir des interfaces comme un fichier JSON

> UI Builder est l’éditeur visuel de Total.js pour les interfaces utilisateur : applications web, tableaux de bord, flowboards et parts, décrits par un fichier JSON et rendus par un web component, sans code serveur.

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

UI Builder est un **éditeur visuel d’interfaces utilisateur**. Vous glissez des composants sur un canevas, vous les configurez et vous les reliez, et le résultat n’est pas du code mais un **fichier JSON** qui décrit l’interface. Un petit web component rend ce fichier n’importe où, de sorte qu’un design UI Builder n’a besoin d’aucune implémentation côté serveur. Il est open source sous **licence MIT** ; l’éditeur est le dépôt [totaljs/uibuilder](https://github.com/totaljs/uibuilder), et vous pouvez utiliser la version cloud sur [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

Ces pages décrivent UI Builder (révision `620107a` du dépôt).

## À quoi il sert

Les modèles de l’éditeur montrent les types d’interfaces qu’il construit :

| Modèle | Usage |
|---|---|
| Web app | une application web classique |
| Dashboard | un tableau de bord de widgets de données |
| Flowboard | un tableau relié à un flux de données (il fonctionne avec [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | un morceau d’interface réutilisable |

L’éditeur liste aussi des modèles pour les applications mobiles et les panneaux HMI, qui sont désactivés dans cette version. Total.js présente UI Builder pour les formulaires web, les tableaux de bord, les intranets, les écrans IoT et les interfaces ERP et CRM.

## Pourquoi il s’intègre à Total.js

- **Le design est une donnée.** Un fichier JSON se stocke facilement dans une base de données, se versionne, se génère et se donne à un autre outil.
- **Il ne demande aucun environnement spécial.** Le moteur de rendu est un web component jComponent, de sorte que n’importe quelle page peut afficher un design.
- **Vos propres composants.** Un composant est un fichier HTML avec son style, son code et son formulaire de réglages ([créer un composant](/en/uibuilder/build-a-component/)).
- **Il s’intègre** à [Flow](https://www.totaljs.com/flow/) et à [OpenPlatform](/en/openplatform/what-is-openplatform/), et prend en charge la localisation.

Poursuivez avec [exécuter l’éditeur](/en/uibuilder/run-the-designer/), le [format JSON](/en/uibuilder/the-ui-json-format/) et [rendre un design dans votre page](/en/uibuilder/render-an-app-in-your-page/). La documentation officielle se trouve sur [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).