This tool helps you create a web application following a WYSIWYG ("what you see is what you get") approach. Add spaces, delete, modify UI components and widgets, change their properties (their size, status, text inside, etc.).

The Builder consists of:

  • Page management panel.
  • Working area.
  • Configuration panel.
  • Toolbar.
Page management panel

Here, you can manage your web app pages. The page management panel includes 2 tabs –Pages and Layout. Use the Pages tab to search for, add, delete, edit your app page. Use the Layout page to change the top navigation and the sidebar, or manage navigation elements of the pages. You can change the navigation for all the pages at once in the General tab, or for the current page using the Current page tab.

Work area

Here, you can actually build your application. Create a layout for the whole page firstly. Open the page management panel to choose a proper layout (see above), and then add the needed spaces by clicking on an orange “+”. Once done, put any elements you need inside the spaces by clicking on a grey “+” at the centre of the space.

Configuration panel    

Here, you can change the properties (size, status, height, text inside, etc.) of the selected widget or component. You can find most properties and configurations of the elements within your project here.


This is an action bar placed on the top of the page. Here, you can undo/redo the previous actions, preview your project, share the project via an accessible URL, and more. You can also open the page management panel by clicking on the Structure in the top left corner of your screen, or go to the UI Bakery main dashboard by clicking on the UI Bakery icon there.

Need some help?

Didn't find something here? Drop us a line at