The Draftbit Developer Hub

Welcome to the Draftbit developer hub. You'll find comprehensive guides and documentation 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 Data

With the Fetch component, you're able to easily pull live data from a RESTful API directly into your apps in Draftbit.

In this current iteration, you are only able to make GET requests and data can only be passed down to Text and Image components. In the meantime, learn how to make POST requests with an Airtable backend in this post.

JSON

If you don't have your own data but would like to try the feature, feel free to grab some sample data from JSON Placeholder. For this example, we'll use the /users endpoint.

To get started, open the component drawer and add a Fetch component to your screen. In the Config Panel, open up the Data panel at the top and click + Build Query. Add your endpoint in the Request URL field then click Test to view the results. Make sure to keep the data structure in mind so you can properly configure the components you want to pass data to. Once you're finished viewing the results, click Save to return to the builder.

Add a List component inside the Fetch component and a View inside of the List. The Layer Tree should look like this:

Next, add a Text component inside of the View. In the preview, you’ll see a list of 10 lines of text automatically generated for each of the endpoint’s entries.

To pass the data to the Text component, open the Data panel in the Config Panel and select what data you’d like to display in the Field dropdown. The Text component will automatically update with the data from the field you've selected.

When configuring an Image component, there’s no validation built-in to ensure you’re passing an image URL to the component. If you find it not working, double check your data in the Results section of the + Build Query modal.

Airtable

If you've never used Airtable before and are interested in using it as a database, check out their documentation that will tell you everything you need to get started.

Once you’ve created a Base and entered your data, click the question mark in the top right corner and select API Documentation in the dropdown.

On the API Page for your Base, scroll down to the Authentication section. In the top right, click the show API Key checkbox so that your API Key populates the placeholder in the example URLs.

Once you’ve generated the API Key, go back to the builder, add the Fetch component to your screen and enter your Base’s URL and the API Key under the HTTP Headers. Preview the request to make sure everything is set up correctly.

Take note that all the entries in the Base are contained within an overarching Records array.

Add a List component inside the Fetch component like before. While the List is selected in the Layer Tree, go over to the Data section in the Config Panel and set its field to records. Without doing this, the screen will error out.

As a general note, make sure to set the top level of data as the Field for List components.

Next, add a View inside the List and then add the Text and/or Images you would like to display inside the View and configure them to your liking.

Introduction to Data


Suggested Edits are limited on API Reference Pages

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