What UI Builder is: design interfaces as a JSON file

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, and you can use the cloud version at 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)
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).
• It integrates with Flow and with OpenPlatform, and it supports localization.

Continue with running the editor, the JSON format and rendering a design in your page. The official documentation is at docs.totaljs.com/uibuilder.