📱 Preview
The phone frame beside the chat, and every button on its rail.
The preview is the phone on the right of the builder. It runs your real app, not a picture of it, and it updates as Ada works.
Beside it is a vertical rail of controls. Nothing sits on top of the phone, so the device can use the full height of the column.
The phone frame
Section titled “The phone frame”The frame is drawn at a real phone’s size — 390 points wide — and then scaled down to fit the column. That matters: the app inside lays out at phone width, so lists, grids and edge buttons behave as they will on a device rather than reflowing to whatever space the builder happens to have.
Switching between iOS and Android changes the hardware, not just the picture.
- A Dynamic Island at the top
- A status bar with the clock on the left and signal, wifi and battery on the right, on the glass either side of the island
- A home indicator along the bottom
- Rounded corners, a titanium-style edge, and the side buttons — action, volume up, volume down, and power
Android
Section titled “Android”- A punch-hole camera, centred
- A status bar with the clock and a notification icon on the left, and wifi, signal and battery on the right
- A gesture pill along the bottom
- Tighter corners, a matte edge, and a power and volume rocker on one side
Why the app sits below the status bar
Section titled “Why the app sits below the status bar”The island and status bar are drawn over the app, exactly as they are on a real phone — which is why an app with a coloured header shows that colour behind the clock.
Your app is told how much room they take, and leaves it. So what you see in the preview is what a real device gives you, including on Android, where the status bar is much shorter than an iPhone’s island.
The clock and battery change between dark and light automatically, based on what your app is painting underneath them.
The rail
Section titled “The rail”iOS / Android
Section titled “iOS / Android”The two device icons at the top switch the frame. Your choice is remembered.
This is worth doing on any screen you care about. It is not only cosmetic: the two phones give your app different amounts of room at the top and bottom.
The session dot
Section titled “The session dot”A coloured dot showing the state of the live server behind the preview.
- Green — “Live”, or “Live · 12m” with how long it has been up. Edits update instantly.
- Amber — “Waking…” The live server is starting.
- Grey — “Paused” The live server sleeps when idle, and the preview is showing the published version instead. Press Go Live to wake it.
Refresh
Section titled “Refresh”Reloads the app in the frame.
If the preview is already running, this simply reloads it. If it is not, it starts it.
Select an element
Section titled “Select an element”Turns clicks in the preview into selections instead of taps. Click anything in the app and its editor opens.
A mode is unavoidable here: your app’s buttons respond to a press, so without it, inspecting a signup button would also submit the form. Press Escape to leave the mode — the preview turns it off itself, and the button follows.
Open on phone
Section titled “Open on phone”Shows a QR code to open the app on a real device.
You are asked which phone you have, not which technology to use:
- iPhone — Scan to open in Safari — add to home screen to install.
- Android — Scan to open your app in the Adalo Preview app. If you do not have it, a link to Google Play is offered right there.
If the preview is still connecting, the panel says so and asks you to tap Open on phone again in a few seconds.
Fullscreen
Section titled “Fullscreen”Gives the phone the whole window. Press it again to go back.
Open in browser
Section titled “Open in browser”Opens the app in a new browser tab.
Note
There used to be a Live / Static pair here. That was our infrastructure leaking into your vocabulary — makers reasonably asked what the difference was. The session dot already tells you whether the live server is awake, so there is one button, and it resolves to the right address for you.
Rebuild preview
Section titled “Rebuild preview”Rebuilds the preview from scratch.
Different from Refresh: Refresh reloads the app that is already running, while this starts the whole preview again. Reach for it when the preview is stuck in a way a reload does not clear.
The language switcher
Section titled “The language switcher”If your app has more than one language, a switcher appears above the phone to preview the app in each.
It is only rendered when there is something to say — an extra bar costs phone height, so an app with one language does not get one.