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    

Using Live Preview

The builder allows you to view and modify the layout of your screen live in the browser.
However, when designing and building mobile apps, it's much better to separate layout from aesthetics and look directly at your phone for a sense of how it will actually look. That's exactly what live preview allows you to do: view the screens live, on your phone, and they are instantly updated when you make changes.

How do I get Live Preview set up?

  1. Download the Expo Go app to your phone. You can download it for iOS or Android.
  2. Locate Your Device ID. Open the Expo Go app, and navigate to the Projects tab at the bottom. In small lettering, you should see "Device ID: XXXX-XXXX".
  3. In Draftbit, open the Live Preview modal. Along the top of the builder, click Live Preview. In the modal window, you should see a field labeled Device Id. Enter your Device ID, including the dash, and hit Save.
  4. That's it! Now when you are editing app projects, you'll see them automatically in your list of projects in the Expo Client app, and you can open them from there.

Alternatively, you can use the QR Code:

  1. Download the Expo Go app to your phone. You can download it for iOS or Android.
  2. Scan the QR code. Along the top of the builder, click Live Preview. In the modal window, you should see a QR code. Open your phone or QR code reader app, and scan the QR code.
  3. That's It! When detected, this QR code will open the project in Expo, and will let you (or anyone you know) live preview the project you're working on. This is a great way to collaborate with friends or coworkers.

Updated 12 days ago


Using Live Preview


Suggested Edits are limited on API Reference Pages

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