# Cos’è UI Builder: progettare interfacce come un file JSON

> UI Builder è l’editor visuale di Total.js per le interfacce utente: web app, dashboard, flowboard e part, descritti da un file JSON e renderizzati da un web component, senza codice lato server.

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

UI Builder è un **editor visuale di interfacce utente**. Trascini componenti su una tela, li configuri e li colleghi, e il risultato non è codice ma un **file JSON** che descrive l’interfaccia. Un piccolo web component renderizza quel file ovunque, così un design di UI Builder non richiede implementazione lato server. È open source con **licenza MIT**; l’editor è il repository [totaljs/uibuilder](https://github.com/totaljs/uibuilder), e puoi usare la versione cloud su [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

Queste pagine descrivono UI Builder (revisione `620107a` del repository).

## A cosa serve

I modelli dell’editor mostrano i tipi di interfacce che costruisce:

| Modello | Uso |
|---|---|
| Web app | un’applicazione web classica |
| Dashboard | una dashboard di widget di dati |
| Flowboard | una board collegata a un flusso di dati (funziona con [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | un pezzo di interfaccia riutilizzabile |

L’editor elenca anche modelli per app mobili e pannelli HMI, che in questa versione sono disattivati. Total.js presenta UI Builder per moduli web, dashboard, intranet, schermate IoT e interfacce ERP e CRM.

## Perché si adatta a Total.js

- **Il design sono dati.** Un file JSON è facile da salvare in un database, versionare, generare e passare a un altro strumento.
- **Non richiede un ambiente speciale.** Il renderer è un web component jComponent, così qualsiasi pagina può mostrare un design.
- **I tuoi componenti.** Un componente è un file HTML con il suo stile, il suo codice e il suo modulo di impostazioni ([creare un componente](/en/uibuilder/build-a-component/)).
- **Si integra** con [Flow](https://www.totaljs.com/flow/) e con [OpenPlatform](/en/openplatform/what-is-openplatform/), e supporta la localizzazione.

Continua con [eseguire l’editor](/en/uibuilder/run-the-designer/), il [formato JSON](/en/uibuilder/the-ui-json-format/) e [renderizzare un design nella tua pagina](/en/uibuilder/render-an-app-in-your-page/). La documentazione ufficiale è su [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).