Broctic

Preview and test on a phone

How the live phone in your browser works, when to use Run in browser, and how to put the app on a real phone with Expo Go or TestFlight.

How the preview works

The phone is an Expo Snack web player: Expo's own runtime, running your code in an iframe. Nothing is installed and nothing is compiled on your machine — the first render is a few seconds, and every change after that is faster.

  • The Studio targets Expo SDK 54. That is the version the Snack runtime and the build pipeline agree on, so what you see in the browser is what gets built.
  • Code is pushed to the player when a generation finishes, not while it is typing. A half-written file is not a state of your app, so it is never rendered as one.
  • Edits from anywhere appear live. The phone follows the project, not the tab: a change from the chat, the Code tab, your own coding agent over the Broctic MCP server, or node ~/.broctic/broctic.mjs dev syncing a folder on your laptop reaches the phone — and Expo Go — within about two seconds. The dot beside the tabs names the version that just arrived.
  • Test → On your phone shows a QR code. Install Expo Go from the App Store or Play Store and scan it, and the app runs on real hardware, updating as you chat. The link lives only while the Studio tab is open; Save permanent link writes a copy to Expo that outlives the tab.
  • Reload, in the ⋯ menu beside the tabs, restarts the player. Use it after a change that the running app cannot absorb — a new route, a new dependency.

If Expo Go says the SDK does not match

Expo Go ships one runtime at a time, and the store version can sit ahead of or behind SDK 54. When it refuses, the preview in the browser is unaffected — and a TestFlight build, which carries its own runtime, always works.

Run in browser, when Snack cannot

Snack only has runtimes for the SDKs Expo has shipped to it, and it cannot load native modules at all — so a newer or more ambitious project has nowhere to play. Run in browser is the answer for those: a free GitHub job runs expo export --platform web, Broctic keeps the result and serves it back into the same phone frame under a link that expires in two hours. It takes about two to four minutes rather than seconds, so it is always something you ask for — and every run is listed under Test → In your browser with the log behind it.

A browser run is the app, not a simulator

It is your real code, bundled for the web by Expo. Anything that needs the device itself — in-app purchase, push notifications, the camera, any native module — does nothing in the browser. Test → On your phone is what runs those.

What the preview cannot do

  • Generated apps use https image URLs — the assistant does not draw icons or bundle fonts. An imported project keeps the assets it arrived with, and they render in the preview like any other file.
  • Only the packages on the Studio's allowed list. Expo's bundled modules, expo-router, AsyncStorage, zustand and the rest of the SDK 54 set are available; arbitrary native modules are not, because nothing in the preview could run them.
  • The first use of a package the runtime does not bundle takes a minute or so while Expo builds it. That one-off wait is normal and shows as “Bundling”.

Test on your phone

A phone frame in a browser is not a phone. The Test tab has one section for each way of getting the app onto the real thing, and which one it offers depends on the project.

The fast way: Expo Go and a QR code

  1. 1. Install Expo Go on your phone

    Free, from the App Store on iPhone or Google Play on Android. It is the app that opens yours.

  2. 2. Tap Open on phone and scan the code

    Point the camera at the QR code and open the link. Your app launches on the device, running the same code the browser is running.

  3. 3. Keep building

    Changes appear on the phone within seconds while the Studio tab stays open. Close the tab and the live link ends — Save permanent link keeps a copy on Expo's servers that outlives it.

Expo Go cannot run everything

It ships one Expo runtime at a time and cannot load native modules at all. When the project is newer than that runtime, or uses something native, the Test tab offers a real build instead — and says so rather than showing a code that will not work.

The real way: a build, then TestFlight

  1. 1. Build for phone

    Ten to twenty-five minutes on Expo's build service, and it produces the signed app itself. The step shows where the build has got to — waiting, making it, ready — without leaving the tab.

  2. 2. Send to TestFlight

    Available the moment a build finishes. It uploads to Apple, who process it and email the invite about ten minutes later.

  3. 3. Install TestFlight and open the invite

    TestFlight is Apple's free tester app. Open the invite on your iPhone and your app installs like any other — with payments, notifications and everything else that needs a real device working.

When something is missing — an Apple account that is not connected yet, an app identifier that has not been set — the tab says which one, in a sentence, with a link to where it is fixed. The full list lives in Settings.