> For the complete documentation index, see [llms.txt](https://docs.flexmoney.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flexmoney.uk/documentation/draftbit/introduction-to-the-builder.md).

# Introduction to the Builder

![](https://files.readme.io/8fdbe67-Screen_Shot_2021-01-06_at_10.01.49_PM.png)![](https://files.readme.io/8fdbe67-Screen_Shot_2021-01-06_at_10.01.49_PM.png)

The Layer Tree (the left-hand side of the Builder) is where you are able to view all the components you've placed on a screen, rearrange them, and see their relationship with other elements.

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

**Bits** are what we consider to be 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.

**Blocks** are what we consider complex components or a collection of Bits that are capable of being updated or further customized. In the Blocks section you'll find we've provided a range of built-out components that require minimal configuration so you can get back to building.

![](https://files.readme.io/89c93c8-componentpicker_0515.gif)![](https://files.readme.io/89c93c8-componentpicker_0515.gif)

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

To delete a component, duplicate a component or create a [Custom Block](/documentation/draftbit/custom-blocks.md), click the '...' next to the component name to launch a context menu.

![](https://files.readme.io/2ecfbdc-Screen_Shot_2021-01-06_at_10.03.39_PM.png)![](https://files.readme.io/2ecfbdc-Screen_Shot_2021-01-06_at_10.03.39_PM.png)

Click the '+' next to `Screens` to open the menu that will allow you to add a blank screen or a screen from our Example Gallery to your app.

![](https://files.readme.io/674d016-Screen_Shot_2021-01-06_at_10.04.13_PM.png)![](https://files.readme.io/674d016-Screen_Shot_2021-01-06_at_10.04.13_PM.png)

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

**1. Styles Tab**\
 Where you'll configure [Layout](/documentation/draftbit/layout.md) and [Additional Layout and Style Options](/documentation/draftbit/borders-background-and-elevation.md).

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

**3. Data Tab**\
 Where you'll configure [Fetch & List](https://dash.readme.com/project/draftbit/v3.0/docs/data) components to [Fetch Data](/documentation/draftbit/fetching-data.md) in your app.

**4. Interactions Tab**\
 Where you'll configure [Navigation](/documentation/draftbit/intro-to-navigation.md) and [Actions](/documentation/draftbit/actions.md)

The Builder defaults to the **Single Screen View** which will display the Screen you have selected in the Screens list on the left-hand side.

![](https://files.readme.io/f7a66f8-Screen_Shot_2021-01-07_at_8.14.14_AM.png)![](https://files.readme.io/f7a66f8-Screen_Shot_2021-01-07_at_8.14.14_AM.png)

To switch to the **Multiple Screen View** and see all of the screens in your project, click the 4-panel square button above the Web Preview screen.

![](https://files.readme.io/abd2002-Screen_Shot_2021-01-07_at_8.15.11_AM.png)![](https://files.readme.io/abd2002-Screen_Shot_2021-01-07_at_8.15.11_AM.png)

To switch to the **Preview** mode which loads the full Live Preview directly in the browser, click the ▶️button

![](https://files.readme.io/6442121-Screen_Shot_2021-01-07_at_3.35.11_PM.png)![](https://files.readme.io/6442121-Screen_Shot_2021-01-07_at_3.35.11_PM.png)

You can open a variety of different menus and share your app with multiple publishing options from the top bar of the Builder.

![](https://files.readme.io/f1fbcfd-Screen_Shot_2021-01-07_at_8.25.18_AM.png)![](https://files.readme.io/f1fbcfd-Screen_Shot_2021-01-07_at_8.25.18_AM.png)

From left to right:

* **Insert**: Opens the component drawer.
* **Add**: Opens the modal to add a new screen.
* **Custom**: Opens the [Custom Screen Code](/documentation/draftbit/custom-screen-code.md) menu.
* **Preview**: Generates a QR code to be scanned to launch [Live Preview](/documentation/draftbit/using-live-preview.md).
* **Learn**: Opens a modal with links to Documentation and [Community](https://docs.draftbit.com/docs/community.draftbit.com).
* **Code**: Opens the View Code modal where you can also [export](/documentation/draftbit/exporting-and-publishing-your-project.md) your project.
* **Share**: Opens a prompt to generate a [shared link](/documentation/draftbit/sharing-your-project-online.md) for your project.
* **Publish**: Opens a prompt to publish your app as a [PWA](/documentation/draftbit/publishing-your-app-as-a-pwa.md).

![](https://cdn.readme.io/img/book-icon.svg?1613687634098) Updated about a month ago

* [Table of Contents](/documentation/draftbit/introduction-to-the-builder.md)
  *  [Layer Tree](/documentation/draftbit/introduction-to-the-builder.md#layer-tree)
    * [Adding and Rearranging Components](/documentation/draftbit/introduction-to-the-builder.md#adding-and-rearranging-components)
    * [Adding a Screen](/documentation/draftbit/introduction-to-the-builder.md#adding-a-screen)
  *  [Properties Panel](/documentation/draftbit/introduction-to-the-builder.md#properties-panel)
  *  [Builder Views](/documentation/draftbit/introduction-to-the-builder.md#builder-views)
  *  [Top Bar](/documentation/draftbit/introduction-to-the-builder.md#top-bar)