Live preview
The live preview in the builder sidebar is not a mockup. It runs the actual Appolar engine, compiled to web, and reflects every config change you make in real time without a page reload.
What the preview is
The preview is an Expo Web build of the same React Native engine that runs on real devices. It is served from appolar-preview.pages.dev and embedded as an iframe in the builder. When the engine renders a ProductGrid or a HeroBanner in the preview, it is running exactly the same component code that runs on a user's iPhone, not a re-drawn HTML approximation.
This matters for layout confidence. If something looks right in the preview, it will look right in the app. Spacing, typography scale, border radius, and color all come from the same token system.
React Native to web is not pixel-perfect in every case. Touch targets, scroll physics, and native component wrappers behave slightly differently in a browser versus on a device. What you see in the preview is a reliable representation, not a guaranteed replica.
Real-time sync
Every time you change a theme token or modify a block in the builder, the updated config is sent to the preview iframe via postMessage. The engine inside the iframe picks up the new config and re-renders without a full page reload.
The sync is optimistic. Token changes (color, font, radius) are nearly instant because they only require a style recalculation. Block order changes take a fraction of a second longer because the renderer rebuilds the block list. Both feel immediate in normal use.
Device frames
The preview renders inside a device frame to give you an accurate sense of screen size and safe area insets. Two frames are available via the toggle above the preview:
iPhone 15
The default frame. Shows the iOS Dynamic Island notch, correct safe area padding, and a bottom home indicator bar. Navigation uses iOS-style back gesture and tab bar.
Pixel 8
The Android frame. Shows a standard Android status bar, gesture navigation bar at the bottom, and Android-style navigation chrome on the tab bar.
Switching frames does not reset the current screen or scroll position. If you are reviewing the Product screen in the iPhone frame and switch to Android, the Product screen stays open in the Android frame.
Navigating screens
The preview is interactive. You can tap through it the same way a user would tap through the real app:
- Tap a collection tile on the Home screen to navigate to the Collection screen
- Tap a product card to navigate to the Product detail screen
- Tap Add to Cart to add an item and see the cart badge update on the tab bar
- Tap the Cart tab to see the cart state
- Tap the Account tab to see the account screen
Navigation state in the preview is independent of the builder. Changing a block property while the preview is on the Product screen will re-render the Product screen with the updated config. You do not need to navigate back to the screen you are editing before making changes.
You can also use the screen selector in the builder sidebar to jump the preview directly to any screen, which is faster than tapping through navigation when you are focused on one screen.
Limitations
A few things are intentionally absent from the preview because they require native device capabilities or live backend flows that cannot run in a browser iframe:
| Feature | In preview | Reason |
|---|---|---|
| Live checkout | Static confirmation screen | Shopify Checkout is a native sheet; not available in a web context |
| Push notification previews | Not available | Requires APNs / FCM delivery to a real device token |
| Biometric authentication | Not available | Face ID / fingerprint requires device hardware |
| Camera | Not available | Native camera access is not possible in an iframe |
| Real customer data | Placeholder content | The preview uses your catalog data but not real customer accounts |
Product images, titles, prices, and collection data in the preview are pulled live from your Shopify store. What you see is your real catalog, not placeholder Lorem products.