Comparing Builds
Pick a build from the build selector at the right end of the preview toolbar. The selector appears once your app has unsaved changes.
Every edit you or the AI agent make goes into your working build first. Your saved build is the version from your last save. While you have unsaved changes, you can switch the preview between the two builds or show them side by side, so you can check exactly what changed before you save or discard it.
Comparing builds works for apps with a preview: mobile apps, web apps, and websites. API backends don’t have a visual preview.
Choosing a build
Section titled “Choosing a build”The build selector has three options:
| Option | Shows |
|---|---|
| Saved | The last saved version of your app. |
| Unsaved | Your working build, including every change you haven’t saved yet. This is the default. |
| Both | The saved and working builds side by side. |
Your choice applies to every device on the preview canvas. When the preview toolbar is narrow, the selector moves into the More preview controls (…) menu, in the Build row.
The saved build starts the first time you switch to Saved or Both, so it can take a moment to appear.
After you save or discard your changes, there’s nothing left to compare. The selector disappears and the preview goes back to your working build.
Side-by-side comparison
Section titled “Side-by-side comparison”In Both mode, each device on the canvas shows two previews. The one labeled Saved is on the left, and the one labeled Working is on the right. Both use the same device, orientation, and theme.
- Navigation is independent. Tapping links or buttons in one preview doesn’t move the other, so you can check each build on its own terms.
- The browser bar follows the preview you last clicked. Back, forward, reload, the address bar, and Open preview in new window act on the active preview, which has a highlighted label.
- Choosing a screen opens it in both. When you pick a screen to preview, both builds go to that screen, which makes it quick to line up the same page.
- Selections are mirrored. Selecting or hovering an element highlights the matching element in both previews.
Editing while you compare
Section titled “Editing while you compare”You can only edit the working build. In Both mode, style changes and moving elements work in the Working preview only. If you try them in the Saved preview, Draftbit tells you to switch to the working preview.
Screenshots and other preview tools
Section titled “Screenshots and other preview tools”- Screenshots: in Both mode, the
screenshot button captures both previews and adds both images to the AI chat. Asking the agent about a difference is easier when it can see both versions. See Preview Screenshots. - Restart preview: restarts whichever build you’re viewing. In Both mode, it restarts both.
- Logs: the Logs panel shows the same output whichever build you’re viewing.
Simulators
Section titled “Simulators”The iOS and Android simulators let you switch between the Saved and Unsaved builds, but they don’t offer a side-by-side view. Simulators are available on paid plans. See native previews.
Saving or discarding your changes
Section titled “Saving or discarding your changes”When the working build looks right, click Save in the top bar. The Save Changes dialog lists each changed file with a diff, and changed images appear as Previous and Current versions side by side. Add a title and save, or use Draft with AI to write the title for you.
If you’d rather keep the saved build, discard your changes from the same dialog. Discarding can’t be undone, but you can always roll back to any earlier save.