What is the UI Builder?

In this article, you'll learn what the UI Builder is and how it contributes to the Betty Block platform

Written by Robert van Boesschoten Updated over a week ago

Learning to code just to make a webpage is a thing of the past. With the UI Builder (and right guidance), everybody can make a web app. After reading this article you will know:

What the UI Builder is

What the UI Builder exists of

UI Builder

What is it?

The UI Builder is a 'drag and drop' editor. The name says it all. You can create a user interface by dragging and dropping elements on the page. Instead of writing HTML and CSS to make up your page, you can choose our predefined building blocks, ready to use. These building blocks are grouped into 5 categories you can choose elements from when using the editor. Below are the descriptions for these categories:

Content: This contains content elements for the page. Elements like images, buttons and labels.Form: This contains form elements for the page. Elements like checkboxes, dropdowns and input fields.Layout: This contains layout elements for the page. Elements like grids and tables.Lists: This contains list elements for the page. These elements use collections to display tables on your page.Navbar: This contains navbar elements for the page. The elements range from a single button to a fullsize navbar.

Prefabs and partials

Besides using separate components to build your page, you can also use prefabs and partials. These are configurations of existing components, often serving an entire interface or service.

Object tree

The Object tree, which is available within the Object tree tab, shows an easy to read list of all building blocks used on the page. Sometimes a page gets so crowded, you'll lose track of every component added to your page. By taking a look at the Object tree, you'll see a hierarchical order of your page. You'll find the component you're looking for in no-time.

More information about the Page Builder and what is has to offer can be found here:UI Builder menu Reference. It offers a more technical, in-depth overview of each setting to look out for.