# O que é o UI Builder: desenhar interfaces como um ficheiro JSON

> O UI Builder é o editor visual do Total.js para interfaces de utilizador: aplicações web, painéis, flowboards e partes, descritos por um ficheiro JSON e renderizados por um web component, sem código de servidor.

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

O UI Builder é um **editor visual de interfaces de utilizador**. Arrasta componentes para uma tela, configura-os e liga-os, e o resultado não é código mas um **ficheiro JSON** que descreve a interface. Um pequeno web component renderiza esse ficheiro em qualquer lado, pelo que um design do UI Builder não precisa de implementação no servidor. É de código aberto sob a **licença MIT**; o editor é o repositório [totaljs/uibuilder](https://github.com/totaljs/uibuilder), e pode usar a versão na nuvem em [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

Estas páginas descrevem o UI Builder (revisão `620107a` do repositório).

## Para que serve

Os modelos do editor mostram os tipos de interfaces que constrói:

| Modelo | Utilização |
|---|---|
| Web app | uma aplicação web clássica |
| Dashboard | um painel de widgets de dados |
| Flowboard | um quadro ligado a um fluxo de dados (funciona com [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | uma peça de interface reutilizável |

O editor também lista modelos para aplicações móveis e painéis HMI, que estão desativados nesta versão. O Total.js apresenta o UI Builder para formulários web, painéis, intranets, ecrãs IoT e interfaces ERP e CRM.

## Porque se encaixa no Total.js

- **O design são dados.** Um ficheiro JSON é fácil de guardar numa base de dados, de versionar, de gerar e de passar a outra ferramenta.
- **Não precisa de um ambiente especial.** O renderizador é um web component do jComponent, pelo que qualquer página pode mostrar um design.
- **Os seus próprios componentes.** Um componente é um ficheiro HTML com o seu estilo, o seu código e o seu formulário de definições ([criar um componente](/en/uibuilder/build-a-component/)).
- **Integra-se** com [Flow](https://www.totaljs.com/flow/) e com [OpenPlatform](/en/openplatform/what-is-openplatform/), e suporta localização.

Continue com [executar o editor](/en/uibuilder/run-the-designer/), o [formato JSON](/en/uibuilder/the-ui-json-format/) e [renderizar um design na sua página](/en/uibuilder/render-an-app-in-your-page/). A documentação oficial está em [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).