Live Preview
The preview panel shows your actual app, running for real, right next to the chat. This page explains what the preview is, what happens while Roc works, how rebuilds and failures behave, and how to browse and restore earlier versions of your app.
A real app, really built
The preview is not a mockup or a simulation. Every time Roc finishes a change, your app is genuinely rebuilt and served, and the preview refreshes to show the new build. What you see is the same app your visitors will get when you publish.
Because it is a real build, updates are not instant. Rebuilds usually take a few seconds, and occasionally a minute or two when the build environment needs to warm up. While a rebuild is in progress you will see an "Updating preview..." pill, and the current version of your app stays visible until the new one is ready.
While Roc is generating a brand new app or a large change, the preview shows a loading overlay with status messages about what Roc is doing, along with "Did you know?" tips about Instroc.
When a build fails
Sometimes a change does not compile. When that happens, your last working version stays up in the preview, so you are never staring at a broken screen. The preview shows "Build error - AI is fixing..." while Roc repairs the problem automatically, and these build-error fixes are always free of charge. If the preview cannot be rebuilt, you will see "Couldn't rebuild the preview. Showing the last working version." with a Try again option.
Runtime errors (problems that appear while the app runs, rather than while it builds) are detected too. A badge in the preview header shows how many were found, and clicking it starts a fix. See Roc, your AI builder for more on automatic error fixing and the troubleshoot flow.
Getting around the preview
The preview header gives you a few controls for exploring your app the way a visitor would.
- Pages dropdown: jump directly to any page of your app without clicking through its navigation.
- Viewport toggle: switch between desktop and mobile widths to check that layouts hold up on a phone.
- Refresh: reload the preview manually if you want a clean pass through a flow.
You can also switch on the Visual edits toggle to click any element in the preview and adjust text, colors, spacing, and typography directly, without spending a prompt. See Editor overview for the full tour of the editor.
Previewing earlier versions
Every change Roc makes creates a version, and you can look at any of them without losing your latest work. From a chat message, choose Preview live to load that version's prebuilt snapshot into the preview panel. While you are viewing an older version, an amber bar appears with "Back to latest" and a Restore button, so it is always clear that you are looking at the past and one click either returns you to the present or brings the old version back.
Version history timeline
For a broader view, open the version history timeline from the chat panel. It lists your versions (v1, v2, and so on) and lets you work with each one.
| Action | What it does |
|---|---|
| Preview | Loads that version into the preview panel |
| Diff | Shows what changed between versions |
| Restore | Makes that version your current app again |
| Pin | Marks a version so it is easy to find later and protects it from cleanup |
Restoring is not destructive. Recent changes after the restore point stay in the chat and can be reapplied anytime, so you can rewind confidently and pick individual later changes back up if you want them.
Pin a version whenever the app reaches a state you are happy with. Pinned versions are protected from cleanup, so if a later experiment goes sideways, you can restore the pinned version in one click.
Preview and publishing
The preview always reflects your working copy, including changes you have not published yet. When the preview looks right, the Publish button in the top right pushes it live (an amber dot on the button means you have unpublished changes). Publishing costs no credits on any plan. See Publishing for the full flow.