ChanTan Studio DocsThe Live Preview in ChanTan Studio Explained
The right-hand panel is your real app running, private to you: the toolbar, the phone and tablet sizes, and why it sleeps after 20 minutes.
The right-hand side of your project is the live preview, labelled "App Preview".
It is your app, actually running. Not a picture, not a mock-up. You can click links inside it, fill in its forms and move between its pages exactly as a visitor would.
Two things to know first
1. The preview is private. It is not your published site. Nobody but you can open it. Everything you and the AI change appears here first. Visitors see nothing until you press "Publish".
2. The preview goes to sleep on purpose. After about 20 minutes with nothing happening, your app's workspace is paused to save resources. With the project open and connected it stays awake longer, but never past about 60 minutes.
When it says "Your app is sleeping"
You'll see a moon card over a blurred picture of your app:
🌙 "Your app is sleeping" — "We paused it to save resources. Tap to wake it up."
This is not an error, and nothing is lost. Your code, your data and your published site are untouched. Press "Wake up" and it starts again.
Waking is free — it never costs credits.
The toolbar above your app
Everything on this strip is free.
| Control | Label | What it does |
|---|---|---|
| Expand icon | "Enter full screen" | Hides the chat so the preview fills the window. Press ESC to leave. Not shown on phones |
| Page box | shows / or /about |
Opening it lists your app's pages — pick one to jump there |
| Three size buttons | "Desktop" · "iPad" · "Mobile" | Shows your app at full width, 820 × 1180 and 390 × 844 |
| Circular arrow | "Refresh preview" | Reloads the page currently shown |
| Arrow out of a box | "Open in new tab" | Opens the same page in its own browser tab — still the private preview |
| Pencil | "Edit text, colors & photos directly" | Turns on click-to-edit. A green bar appears; press "Cancel" on that bar to turn it back off |
The device sizes are real, not a visual trick. Your app genuinely believes it is on an 820-wide tablet or a 390-wide phone, so your responsive design reacts truthfully. The frame is only shrunk visually so it fits your screen. Switching sizes never reloads anything, so you don't lose your place.
There are exactly three sizes — there is no custom width box.
Some pages are deliberately left out of the page list: pages that need a value in the address (a single product, a single order) and catch-all "not found" pages. They can't be opened blindly, so they aren't offered.
Messages that float over the preview
| Message | What it means |
|---|---|
| "Updating..." or "Steps 3/7" | The AI is changing your app right now. It usually updates with no reload at all |
| "Preview hit a snag." with "Fix it" and "Dismiss" | Your app threw an error. ⚠️ "Fix it" starts a real AI build, so it costs credits. "Dismiss" only hides the message |
| "Previewing old version — this is NOT the current state" | You're looking at a saved version from history. Press "Back to current" |
| "Rolling back one version..." | You pressed Undo. Wait for it to land |
The "Fix it" offer is deliberately hidden while a build is running, while the preview is starting and during a reconnect — so you're never offered a paid fix for a problem that's about to solve itself.
Other things you may see instead of your app
| What you see | What to do |
|---|---|
| A blurred picture with a "Loading…" pill | Nothing — it fades by itself |
| A branded screen with the ChanTan logo and a progress bar | Wait. Your workspace is starting or your first build is running. Each line is a real stage |
| "Reconnecting to your preview…" | Wait about 8 seconds. If it hasn't healed, a "Wake up" button appears — press it |
| A single "Try again" button | Press it. If it keeps failing, restart the preview (below) |
ChanTan quietly checks the preview's health every 3 minutes while you're looking at the project, and again when you come back to the tab. You normally see nothing at all — a slow start is never mistaken for a dead app.
Restarting the preview by hand
This is the right move when the preview is stuck, blank or behaving oddly after several refreshes.
- Open the "Version History" panel on the left of your project.
- Choose "Restart preview".
- Confirm with "Yes, restart".
The confirmation tells you exactly what happens: "This rebuilds your app's preview from scratch. It usually takes 30–60 seconds (up to 3 minutes in rare cases). Your code and data aren't affected — only the preview container restarts."
This is free and safe.
Is the preview my published site?
No. Two different things:
| Preview | Published site | |
|---|---|---|
| Who can see it | Only you | Anyone with the link |
| What it shows | Your very latest work | Only what you last published |
| Sleeps? | Yes, after ~20 minutes | Never |
"Open in new tab" opens the preview, not your published site — and that tab stops working when the preview goes to sleep. To share your app, publish it.
Honest limits
- Waking, restarting, refreshing, resizing, full screen and open-in-new-tab are all free. Only work the AI does for you costs credits.
- The preview reflects your latest work within a few seconds of each change; photo replacements reload it once, and that one reload is expected.
- If the preview is white or blank and refreshing doesn't help, use "Restart preview" first — it fixes far more cases than a refresh does.