How does Draftbit's visual builder work?

Every Draftbit project is a real codebase. Mobile apps are React Native with Expo, web apps use Vite, and websites use Astro. The visual builder has no separate design file. It parses the screen you have open, finds each element along with its exact position in the source, and draws that as the component tree. Turn on Selection Mode and a click on the preview maps back to the line that renders the element.

The left side lists your screens and folders. Their arrangement defines the app’s routes, and you can add a screen or folder there. Below it is the component tree for the selected screen. A plus button opens the Add Component panel, where you choose from Draftbit’s components for your app type or from components exported by your own project files, then click or drag one into the selected parent. You can also reorder items in the tree. Add Component From Template opens the Design Blocks gallery, which hands a block to the agent to adapt to your theme.

The center is the preview canvas. Add as many devices as you want, mix web and native sizes, rotate them, and view one route or every route at once. Double-click text in the preview to edit it in place. Web previews are available on every plan, iOS and Android simulators running in the browser need the Pro plan, and the Draftbit Preview app shows the app on a real phone through a QR code.

The right side is the Utility Panel. The Styles tab turns utility classes, NativeWind on mobile and Tailwind on web, into controls for layout, flex, spacing, sizing, position, borders, background, opacity, and typography, with a breakpoint selector and a field for typing any class. The Content tab edits the text of a Text or Button. The Code tab shows the selected component’s source for hand edits, and the Chat tab is where the agents work on the same files. Nothing is final until you save. The Save button shows pending changes, you can discard them or save them with a message, and the save history lets you roll back to an earlier save point.