Builder basics

Framework Builder works as an overlay of the running app; you edit your app while it’s running. It gives you an accurate representation of what the app will look like and how it’ll behave, without the need to constantly preview it. Changes to the user interface are automatically saved to ui.json.

​

Modes

You can switch modes between User Interface, Code and Preview using the buttons on the top bar.

​

User Interface

The default mode. Allows you to focus on building the interface.

​

Code

This mode displays the code editor and the application log, while still allowing you to access the Component Tree and Settings.

​

Preview

The Preview mode shows the application exactly like the user will see it. It allocates the whole width of the viewport to the app.

​

Adding and moving components

You can create new components in your app by dragging and dropping items from the Toolkit. Some components, like Sections, can act as parents, while others, such as Text, cannot. Additionally, certain components have placement restrictions—for instance, a Column must be added to a Column Container, and a Sidebar can only be added to a Page.

By default, components are positioned at the end, but if you need to place them specifically, simply drag them over the desired parent until you see the insertion lines. You can also reorganize existing components by moving them between parents or within the same parent. For more flexibility, the Component Tree can serve both as a source or a destination for your drag and drop actions.

​

Selecting a component

Select a component by clicking on it. If you click on a component that’s already selected, the click will be treated as an interaction with the app. Two things will happen when a component is selected:

​

Component settings

Settings are divided into the following sections. Changes to settings can be undone and redone using the buttons on the top bar.

​

Component shortcuts

Perform a variety of operations on existing components. Options will be grayed out when they’re not applicable to the relevant component. Most shortcuts can be triggered using the keyboard; hover on them to show the appropriate combination.

Just like with changes to settings, these operations can be undone and redone.

​

Discovering components

The Builder is designed to allow easy discoverability of components. Rather than scouring specifications every time you need to use a component, you can rely on the visual editor to guide you.

1. Short description: You can hover on the component type to get a tooltip with a short description.
2. Available properties and events: Looking at Settings will allow you to see which of its properties are configurable.
3. Built-in docs: Components have short docs built into them. You can expand it by clicking the help icon in Settings.
4. Event handler stub code: Different events need to be handled differently. The built-in stub handlers, which can be found next to each event, can help you get started when writing event handlers.