Create UI parts visually with the power of Total.js UI Builder
Tags: designer, ui, javascript, uibuilder
Published: 2024-04-04 09:20:37

- [Total.js UI Builder website](https://totaljs.com/uibuilder/)
- [__Try Total.js UI Builder designer__](https://uibuilder.totaljs.com/)
- MIT license

---

In today's fast-paced digital world, the ability to craft intuitive and visually appealing user interfaces (UI) is more crucial than ever. We're delighted to introduce our innovative UI Builder Designer, a tool that prioritizes simplicity and efficiency.


![UI Builder drag & drop UI components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxpsnh92rwj52eiow7a1.gif)

At the heart of our UI Builder Designer lies a user-friendly, drag-and-drop interface that simplifies the design process. Imagine having the power to visually assemble and customize UI elements, all in real-time! From buttons and text fields to images and sliders, our tool offers a wide array of open-source components to bring your creative vision to life.

![UI Builder design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4ugkltcpmu1zv5epqcf.gif)

What sets our UI Builder Designer apart is its extraordinary flexibility and adaptability. It's a playground for creativity, offering a broad spectrum of customization options to ensure your UI looks and feels exactly how you envision it. Recognizing the importance of seamless integration in today's interconnected digital landscape, we've engineered the UI Builder to play nicely with third-party applications. This means you can effortlessly incorporate your UI creations into existing projects or workflows, enhancing your apps with beautiful, intuitive interfaces that engage and delight users.

![Total.js UI builder](https://bufferwall.com/download/B20240404T000001186_1600x1133.jpg)

## Top features

- Open source (MIT license)
- Input/Output from the UI builder is structured JSON data ([example](https://cdn.componentator.com/uibuilder/demo/dashboard.json)).
- UI components can be serialized directly to the design or loaded from any server.
- Easy customization.
- Floating mode (look at the [Flowboard example](https://uibuilder.totaljs.com/?url=https://cdn.componentator.com/uibuilder/demo/flowboard.json)).
- It supports two modes: `editor` and `render`.
- It's simple to integrate with any existing web app with the help of the `<iframe>` element.
- It's only a client-side solution, and it works without a special environment.
- It includes many open-source UI components.
- It's fully open-source.
- You can provide the UI Builder designer directly on your server (it's very small app).
- Localization
- Versioning
- The UI builder source-code is less than 1 MB with pictures!

__Render example__:

![Render](https://bufferwall.com/download/B20240404T000001189_800x753.jpg)

## Did you know about Total.js UI Builder?

- You can create your own set of components.
- You can mix multiple sets of components.
- You can create UI parts as UI components collected from the included UI components.
- You can render the same design as [`MDI`](https://en.wikipedia.org/wiki/Multiple-document_interface).
- Your UI design can communicate with your REST endpoints or through the WebSocket.

## What can I design with the UI Builder?

- [UI forms](https://uibuilder.totaljs.com/?url=https://cdn.componentator.com/uibuilder/demo/controls.json) (like orders forms, contact forms, etc.)
- [Dashboards](https://uibuilder.totaljs.com/?url=https://cdn.componentator.com/uibuilder/demo/dashboard.json)
- [Flowboards](https://uibuilder.totaljs.com/?url=https://cdn.componentator.com/uibuilder/demo/flowboard.json)
- Complete pages like, e.g., product lists, product details, order lists, etc.

If you use the Total.js UI library, the [j-UI Builder component](https://componentator.com/components/j-uibuilder/) can be used to render UI designs. Also, we have prepared advanced UI components like [UI Editor](https://componentator.com/components/j-uieditor/) and [UI Studio](https://componentator.com/components/j-uistudio/).

## Total.js Integration

We prepared various integrations for the UI Builder in the Total.js Platform apps. The below integrations are part of the [Total.js Enterprise service](https://www.totaljs.com/enterprise/), and they aren't free. Next, we have prepared the main components of the [Gov.uk frontend](https://github.com/alphagov/govuk-frontend), and they are also part of the __Total.js Enterprise service__.

### Total.js CMS

We integrated Total.js UI Builder directly into the [Total.js CMS](https://www.totaljs.com/cms/), and the CMS admin can easily make `forms` and join multiple UI designs directly in the CMS Visual Programming Interface. So the admin is able to process incoming data from UI design and return another UI design.

The below example shows a simple form called "Survery", and after submitting the form, the flow returns a new UI design: "Thank you" (message). The data from the "Survey" form is processed and sent as e-mail messages.

![Total.js CMS + Total.js Flow + Total.js UI Builder](https://bufferwall.com/download/B20240404T000001187_1032x742.jpg)

### Total.js Flow

We prepared __Flow components__ for integrating [Total.js UI Studio](https://github.com/totaljs/uistudio) with the [Total.js Flow](https://www.totaljs.com/flow/). It offers the same functionality as I mentioned above.

![Total.js Flow + Total.js UI Builder](https://bufferwall.com/download/B20240404T000001188_1032x709.jpg)

## What next?

- [__Try Total.js UI Builder designer__](https://uibuilder.totaljs.com/)
- [Browse all Total.js apps](https://www.totaljs.com/apps/)
- [Join our community](https://www.totaljs.com/community/)

Are you interested in implementing UI Builder into your products? [Contact us](https://www.totaljs.com/community/).