Intro to the Builder

For an in-depth walkthrough of using many parts of the Builder, as well as a demonstration on how to compose a Screen's user interface, take a look at the video below.

Top Bar

The builder menu bar is the main menu that provides access to different settings and options inside the Draftbit builder.

From left to right:

Left Section

Screens & Blocks Lists

In the top panel on the left side is the list of Screens or Blocks, depending on which one you are previewing.

Component Tree

Below the list of Screens and Blocks is the Component Tree where you see all the components placed on the currently selected Screen. Here you can add components, rearrange components, hide components, duplicate components, convert components to Saved Blocks and more.

Adding and Rearranging Components

To add components to the Component, click the '+' next to Layout to launch the component picker. In this menu, you can click to add components to the Layout Tree.

Bits are what we consider primitives that include real React Native components and Draftbit components. These are essentially base-level components in our system that cannot be edited or changed. However, they can be re-used to create custom blocks of components.

Saved are what we consider custom blocks composed of using different Bits. You can create these custom blocks of components, save them, and re-use them later on any screen. To duplicate a component or create a Custom Block, click the '...' menu next to the component name to launch a context menu.

To rearrange components, simply click the component in the Components tree, drag it and drop it where you would like it to go instead.

To delete a component, duplicate a component click the '...' menu next to the component name to launch a context menu.

Middle Section

The center panel in the Builder is where you can preview your app as you build using the different Live Preview modes.

Right Section

Preview Panel

Here you can switch Breakpoints and Preview modes in addition to selecting the current preview Environment

Properties Panel

The Properties Panel (the right side of the Builder, boxed in red) contains four different tabs. From left-to-right, these tabs are:

1. Styles Tab
Where you'll configure Layout, Size & Position, Margins & Padding, Borders, Backgrounds and Effects, and Typography.

2. Configs Tab
Where you'll configure the properties specific to each component. You can reference the component's documentation for specifics on the configurable properties of each component.

3. Data Tab
Where you'll configure Fetch & List components to Fetch Data and provide dynamic values on components like Text in your app.

4. Interactions Tab
Where you'll configure Actions related Navigation, API Requests, etc.

👉

🟡 Change Indicator

The yellow dots that sometimes appear next to the name of properties indicate that the value has been changed from its default.

Clicking the yellow dot will reset the value to its default.

Bottom Drawer

The Bottom Panel is available inside Draftbit's builder interface. This panel contains the following tabs:

Console Logs

The Console Logs tab displays the result of console statements that are either triggered by Log to Console action or by console.log() statements in Custom Code. Learn more in the Console Logs docs.

⚠️

Not available in Draft Preview

Console Logs are only viewable when your Draftbit app is being previewed using Web, iOS, and Android previews.

Command Palette

The Command Palette lets you quickly navigate and perform various actions within the Draftbit Builder. Just hit CMD+K or CTRL+K to bring up the Command Palette and start typing. We’ll be adding to the available actions over time, plus include the ability to search our docs.