# What UI Builder is: design interfaces as a JSON file

> UI Builder is the Total.js visual editor for user interfaces: web apps, dashboards, flowboards and parts, described by a JSON file and rendered by a web component, with no server code.

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

UI Builder is a **visual editor for user interfaces**. You drag components onto a canvas, configure them and connect them, and the result is not code but a **JSON file** that describes the interface. A small web component renders that file anywhere, so a UI Builder design needs no server-side implementation. It is open source under the **MIT licence**; the editor is the repository [totaljs/uibuilder](https://github.com/totaljs/uibuilder), and you can use the cloud version at [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

These pages describe UI Builder (revision `620107a` of the repository).

## What it is for

The templates of the editor show the kinds of interfaces it builds:

| Template | Use |
|---|---|
| Web app | a classic web application |
| Dashboard | a dashboard of data widgets |
| Flowboard | a board connected to a flow of data (it works with [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | a reusable piece of interface |

The editor also lists templates for mobile apps and HMI panels, which are switched off in this version. Total.js presents UI Builder for web forms, dashboards, intranets, IoT screens, ERP and CRM interfaces.

## Why it fits Total.js

- **The design is data.** A JSON file is easy to store in a database, to version, to generate and to give to another tool.
- **It needs no special environment.** The renderer is a jComponent web component, so any page can show a design.
- **Your own components.** A component is one HTML file with its style, its code and its settings form ([build a component](/en/uibuilder/build-a-component/)).
- **It integrates** with [Flow](https://www.totaljs.com/flow/) and with [OpenPlatform](/en/openplatform/what-is-openplatform/), and it supports localization.

Continue with [running the editor](/en/uibuilder/run-the-designer/), the [JSON format](/en/uibuilder/the-ui-json-format/) and [rendering a design in your page](/en/uibuilder/render-an-app-in-your-page/). The official documentation is at [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).