The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Introduction to the Builder

Layer Tree

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.

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, click the '...' next to the component name to launch a context menu.

Properties Panel

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 and Additional Layout and Style Options.

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 components to Fetch Data in your app.

4. Interactions Tab
Where you'll configure Navigation and Actions

Updated 4 months ago


Introduction to the Builder


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.