Run & terminal
The live preview — devices, inspector and more
See your running app beside the code, at any device size, with its console, network, storage, Web Vitals, an accessibility check and an element picker that jumps to the code.
When your app opens a port, the Preview shows it — live, reloading as you type. Since Part 9 it's a small browser of its own.
The toolbar
- Back, forward and reload move through your app's own history. Shift-click reload to load it fresh.
- The address bar shows the page you're on; type a path (like
/settings) and press Enter to go there. - The port chip (top left) picks which port to show — or a teammate's running app (see Share your running app).
Devices
The device menu shows your app in an iPhone, Pixel, Galaxy, iPad, laptop or desktop frame at its real CSS size, scaled to fit. Rotate turns it sideways; the zoom chips at the bottom right go from Fit to 100%. Type a custom size like 390x844.
Device wall (desktop) shows the same page on a phone, a tablet and a laptop at once — navigate in one and the others follow.
Beside the code
On a laptop, More → Open beside the code puts the preview to the right of the editor, with a divider you can drag. On a phone, More → Full screen swaps the code for your app; × brings the code back.
The inspector
The bug button opens the inspector. Everything in it comes from the page itself, shown as plain text:
| Tab | What it shows |
|---|---|
| Console | console.log, warnings and errors, with objects you can expand. Filter by text or level. |
| Network | Every fetch, XHR, script, style, image and WebSocket — status, size and a timing bar. |
| Element | Pick an element, click anything in your app: you see its tag, size, the React component that made it, and Open jumps to the line in your code. |
| Storage | The page's local storage, session storage and readable cookies — delete one entry or clear them. |
| Vitals | Largest Contentful Paint, Interaction to Next Paint, layout shift, first paint and server time — measured in the preview. |
| A11y | Check this page runs an accessibility audit (axe-core): contrast, labels, landmarks and keyboard access, with the elements to fix. |
| Requests | For a preview you're sharing: every request that came in from people opening your link (see Webhook links and the request log). |
Errors your page throws still go to the Problems list, underlined in the code.
Good to know
- The preview runs on a separate site from KODEO, so your app can never read your KODEO account.
- A hidden preview is unloaded and costs nothing; it reloads when you come back to it.
- On iPhone and iPad the runtime can't run, but you can open a teammate's running app.
Still have a question about this?
Assist answers from this article — in any language.
Was this helpful?