Builder Overview

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.

Main Menu

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.

Icon	Action	Description
	Visual Editor	Visually design screens, components, and styles with AI assistance
	Preview	Test and preview your application as you build
	Code Editor	Edit your code directly using the built-in editor
	API&Data	Manage third-party APIs & data sources for your app
	Publishing	Manage app publishing and deployments to web, iOS, and Android
	Agent Config	Manage agent defaults, provider keys, saved prompts, and instructions
	Build Config	Manage environment variables, packages, and build-time configuration
	Themes	Customize shared theme colors and typography for your app
	Version History	View project activity history and rollback changes
	Settings	Configure app identity, icons, app configuration, and project actions
	Tasks	Track and manage development tasks at the project level
	Project Assets	Cloud storage for your images, video, audio and other media files at the project level
	Project Integrations	Manage third-party service integrations for your app at the project level
	Project Settings	Configure project settings and preferences

Mobile Builder

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.

Support Menu

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.

Icon	Action	Description
	Show Preview Logs	View build output and errors while working in preview
	Restart Preview	Restart the previews
	More	Additional resources, settings, and sandbox controls
	Sandbox Status	View the current sandbox, repository, and preview status for the app
	Open in VSCode	Open your project’s files directly in VSCode
	What’s New	View the latest product updates
	Roadmap	View and contribute to the platform roadmap
	Docs	Learn about building apps using Draftbit
	Videos	Watch video tutorials, office hours, and more
	Dark/Light Mode	Switch between a dark and light Builder UI

Top Bar

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

Icon	Action	Description
	Project / App Switcher	Switch between apps within the current project, create a new app, or access project settings
	Billing	Check your remaining credit balance and top up
	Undo / Redo	Step backward or forward through your recent changes
	Save History	View and roll back to previous saved versions of your app
	Recommended Changes	View flagged issues like preview errors or unconfigured integrations, with quick actions to fix them
	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	Create native development builds for iOS and Android
	Get Help	Open the in-app support chat
	Export	Download a zip of your codebase
	Publish	Open the publish popover with Progressive Web App, Apple App Store, Google Play Store, and Share options
	Save / Save History	Save and roll back changes