Skip to content

Builder Overview

Learn about the Draftbit App Builder

The Draftbit Builder is your workspace for turning app concepts into reality. It combines a Home view, visual editor, live preview, AI agent, code editor, integrations, build configuration, and publishing tools in one place.

To learn more about the different Builder views, follow the links below.

The Draftbit App Builder

You can access the main areas of the Builder from the project navigation on the left side of the Builder. The Home icon opens the default app workspace with the preview, agent, and editor panel available without opening the full screens/components layout.

IconActionDescription
Design Menu Item Visual Editor

Visually design screens, components, and styles with AI assistance

Preview Menu Item PreviewTest and preview your application as you build
Code Menu Item Code EditorEdit your code directly using the built-in editor
Api Menu Item API&DataManage third-party APIs & data sources for your app
Publishing Menu Item Publishing

Manage app publishing and deployments to web, iOS, and Android

Agent Config Menu Item Agent Config

Manage agent defaults, provider keys, saved prompts, and instructions

Build Config Menu Item Build Config

Manage environment variables, packages, and build-time configuration

Themes Menu Item ThemesCustomize shared theme colors and typography for your app
History Menu Item Version HistoryView project activity history and rollback changes
Settings Menu Item Settings

Configure app identity, icons, app configuration, and project actions

Tasks Menu Item TasksTrack and manage development tasks at the project level
Assets Menu Item Project Assets

Cloud storage for your images, video, audio and other media files at the project level

Integrations Menu Item Project Integrations

Manage third-party service integrations for your app at the project level

Project Settings Project SettingsConfigure project settings and preferences

The Builder remembers how you arrange each app. Panels you collapse, splits you resize, and whether Logs is open stay the same when you reload or come back later. Each app keeps its own layout, so changes in one app don’t affect another. Where you dock Logs (top, bottom, left, or right) is a single setting for all your apps, and Logs remembers its size in each position.

To return the app you have open to the default layout, open the account menu from your avatar and choose Reset layout. The Builder reloads with the default panels and sizes.

On mobile-width screens, the Builder switches from the left project navigation to bottom tabs. The Home view includes Preview, Agent, Editor, and Account. The full Visual Editor also includes a Screens tab for the screens list and component tree.

Mobile Builder Settings

The bottom More menu groups helpful resources and secondary controls such as What’s New, Roadmap, Docs, Videos, Sandbox Status, and the light/dark theme switcher.

IconActionDescription
Logs Menu Item

Show Preview Logs

View build output and errors while working in preview
Restart Preview Menu Item Restart PreviewRestart the previews
More Menu Item MoreAdditional resources, settings, and sandbox controls
Sandbox Status Menu Item Sandbox Status

View the current sandbox, repository, and preview status for the app

Updates Menu Item

What’s New

View the latest product updates
Roadmap Menu Item

Roadmap

View and contribute to the platform roadmap
Docs Menu Item DocsLearn about building apps using Draftbit
Video Menu Item VideosWatch video tutorials, office hours, and more
Dark/Light Mode Menu Item Dark/Light ModeSwitch between a dark and light Builder UI

The Top Bar runs across the top of the Builder and contains the actions you reach for most often:

IconActionDescription
Project Switcher Menu Item Project / App Switcher

Switch between apps within the current project, create a new app, or access project settings

Billing Menu Item BillingCheck your remaining credit balance and top up
Undo Redo Menu Item Undo / RedoStep backward or forward through your recent changes
Save History Menu Item Save HistoryView and roll back to previous saved versions of your app
Recommended Changes Menu Item Recommended Changes

View flagged issues like preview errors or unconfigured integrations, with quick actions to fix them

Live Preview Menu Item Live Preview

Open the QR-code launcher to preview the running app on a real iOS or Android device using the Draftbit Preview app

Native Builds Menu Item Native BuildsCreate native development builds for iOS and Android
Get Help Menu Item Get HelpOpen the in-app support chat
Export Menu Item ExportDownload a zip of your codebase
Publish Menu Item Publish

Open the publish popover with Progressive Web App, Apple App Store, Google Play Store, and Share options

Save Menu Item Save / Save HistorySave and roll back changes