The preview — your app, running live
In shortThe Preview tab runs your app for real while you build it. Use the address bar to open any page, the device buttons to see it at tablet (820 px) or phone (390 px) width, ↻ to reload and ⟲ to restart it, and the arrow to open it in its own tab. After 20 minutes without use it goes to sleep and shows a saved copy until you come back.
The Preview tab is your app, running for real on a secure cloud computer of its own. It is not a picture: you can click, sign up, book a class or place an order, and what you enter is saved in your app’s database. Every change MonstarX makes shows up here within seconds.
What is in the preview toolbar?
Section titled “What is in the preview toolbar?”From left to right:
| Control | What it does |
|---|---|
| Status | Live when the app is running, Starting while it starts, Stopped when it is asleep, Error if it failed. |
| Address bar | The page you are on, and a list of every page in your app. |
| Desktop / tablet / phone | Shows the app at full width, 820 px or 390 px wide. |
| Edit | Point at the page and say what to change. See Edit mode. |
| Clip | Put a picture of part of the page into your message. See Clip. |
| Comments | Comments people left on the preview, and your own. See Share and comment. |
| ↻ Reload preview | Loads the current page again. |
| ⟲ Restart dev server | Restarts your app’s preview. Use it when the preview is stuck or out of date. |
| Copy the preview link | Copies the preview’s address. Anyone with the link can open the preview. |
| ↗ Open preview in a new tab | Opens the preview in its own browser tab. |
When the preview panel is narrow — for example on a laptop with the chat wide open — the tools after the address bar move into a ••• menu (Preview options) at the end of the row.
How do I open another page?
Section titled “How do I open another page?”Click the address bar. A list of every page in your app opens, with the file each comes from.
- Click a page, or type to narrow the list and press Enter. Typing the start of a page and pressing Enter opens it (
/propens/pricing). - Use ↑ and ↓ to move through the list, Esc to close it.
- Pages with a changing part, like
/classes/$id, put the pattern in the box with that part selected so you can type a real value. - Pasting a full address keeps only the part after the domain (
/pricing).
The list fills in as MonstarX builds new pages. You can also click the links inside your app.
How do I check my app on a phone or tablet?
Section titled “How do I check my app on a phone or tablet?”Click the tablet or phone button in the toolbar. The preview narrows to 820 px (tablet) or 390 px (phone) so you can see how your layout adapts — menus collapsing into a button, columns stacking.
For the real thing, open the preview on your phone — see Build on your phone.
Reload or restart?
Section titled “Reload or restart?”- ↻ Reload is like pressing refresh in a browser: it loads the page again. Try it first when something looks out of date.
- ⟲ Restart dev server restarts the program that serves your app. Use it when reloading does not help, when the preview seems stuck, or when MonstarX asks you to. The address stays the same in most cases.
The preview also looks after itself: if a page breaks after a change, it reloads quietly until the page renders again, and a preview that fails to start is retried automatically.
Why is my preview asleep?
Section titled “Why is my preview asleep?”To save resources, a preview goes to sleep after 20 minutes without use. Instead of a blank panel you then see a saved copy of the page as it last looked, with a banner: Saved copy · 25m ago · The preview is asleep — it wakes when you move or click.
The live preview starts again by itself as soon as you move over the workspace, scroll, type or click — or click Wake now. If you click a link or button on the saved copy, the live preview opens that page for you (Starting the live preview to open “About”…).
A saved copy is kept only in your own browser, never on MonstarX’s servers, because it can show what you were signed in to inside your app. When there is no saved copy, the panel says The preview is asleep with a Wake it now button.
Can I sign in to my app inside the preview?
Section titled “Can I sign in to my app inside the preview?”Yes — sign up and sign in as your users would. A preview opened in its own tab (↗) has its own sign-in, so you sign in there again. If your app has accounts, MonstarX gives you a ready-made test user in the chat (Demo account ready).
Who can open the preview?
Section titled “Who can open the preview?”Inside MonstarX, the project’s owner and the people it is shared with. Everyone can use the app and leave comments, but only the owner and people with Can edit access see Edit, Clip and Restart dev server.
The preview also has its own address, which Copy the preview link copies: anyone who has that link can open the preview, so share it with care. It is temporary — it can change when the preview restarts, and the preview sleeps when nobody uses it — so to show your app to the world, publish it.
Frequently asked questions
Section titled “Frequently asked questions”Is the data I enter in the preview real?
It is saved in your app's real database, the same one your published app uses. Test orders, bookings and sign-ups show up in the Admin tab and the Backend.
The preview says "The preview server failed". What do I do?
Click Restart. If it keeps failing, open the Logs tab to see why, or ask about it in Chat mode.
Why does the preview show a card instead of my app?
While MonstarX builds, or while the app is starting, a status card covers the preview so you never see a half-written page. See Follow a build.
Does the preview keep running when I close MonstarX?
It goes to sleep after 20 minutes without use and wakes when you come back. Your published app is separate and always on.
Can I share the preview link with a customer?
You can — anyone with the link can open it — but it is meant for building: the address can change and the preview sleeps. Publish your app for anything you share widely. To let someone follow along and comment, share the project.