Skip to main content

How the preview works

The live preview panel in the builder is an Expo Web build running in an iframe. When you change a token or update a block, the builder serializes your current configuration and posts it to the preview frame, which re-renders immediately. You see your changes in roughly 500ms without any network round trips or build triggers.

The preview phone frame is sized to match a typical 390-point-wide iPhone viewport. This is the logical width of the iPhone 14 and 15 base models — the most common screen size among iOS users. The viewport height is fixed at 844 points, matching the same device family.

i

Note. The preview updates on every change you make — there is no save step required to see it. The preview reflects your current unsaved builder state in real time.

Limitations vs a real device

Expo Web renders your React Native components using a browser DOM, not a native runtime. Most of the app looks and behaves identically, but some behaviors differ because the underlying rendering engine is a browser engine rather than UIKit or Android Views.

FeatureIn preview
Scroll physicsBrowser momentum, no native rubber-band overscroll
Font renderingWeb font loading; kerning may differ by a pixel or two
HapticsSilent — vibration and taptic feedback are unavailable in a browser
Push notificationsCannot be triggered or displayed in the preview
Native share sheetShare button is disabled in the preview
Image loadingIdentical in most cases; very large images may load slower in the browser
Layout, colors, and typographyIdentical — token application matches the native app

These differences are cosmetic and behavioral, not functional. The core layout, component structure, and theme token application are identical to what ships in the native binary. Use the preview for layout and color decisions. Use real device testing for scroll feel, animation timing, and overall flow polish.

Testing on a real device

Appolar provides a preview client you can run in Expo Go. From Builder > Preview > Real device, scan the QR code with the Expo Go app on your iOS or Android phone. Expo Go is a free download from the App Store and Google Play.

The preview client loads your current published config from Appolar's servers. It is not a live mirror of your unsaved builder state — save your config first (Builder > Save, or ⌘S) before scanning the QR code. The real device preview shows native scroll physics, platform fonts, haptic feedback, and animations exactly as they appear in the production app.

i

Note. The Expo Go preview client is for design and layout review only. It is not the production binary. Features that require a real app build — push notification registration, app store review prompts, and deep links from marketing emails — are not available in Expo Go.

Was this helpful?
Edit this page on GitHub