Live Preview — How to See Your Changes in Real Time
MobiDrag gives you two ways to preview your app: the always-on live canvas in the builder, and the dedicated Preview mode that shows your app in a full device mockup. Here's how both work.
1 The center canvas — always-on live preview
The phone frame in the center of the App Builder is a live preview. Every change you make — dragging a block, editing text, adjusting colors, toggling an element — appears in the canvas the instant you make it. You never need to save or refresh to see the result.
The canvas shows your app at phone-frame scale, giving you a realistic sense of how content fits on a mobile screen. You can scroll down inside the canvas to see below the fold.
2 Preview mode — full device view
For a larger, distraction-free view of your app, open Preview mode by clicking the 👁 eye icon in the top-right of the toolbar (between the Save icon and the Publish button).
In Preview mode you can:
- See your app at full canvas scale without the left/right panels in view
- Scroll through the complete page layout
- Evaluate how sections flow together at realistic mobile proportions
- Check spacing, typography, and color contrast in context
Preview mode is a visual check only. It does not let you tap through to other pages or interact with live product data. To test full navigation flow, you'll need to publish a test build.
3 Preview vs. Publish
| Live Canvas | Preview Mode | Published App | |
|---|---|---|---|
| Always visible | ✓ | On demand | After publishing |
| Real product data | ✓ (synced) | ✓ (synced) | ✓ (live) |
| Tap navigation | Limited | Limited | Full |
| Shared with others | — | — | ✓ |
| Requires save first | No | No | Yes |
4 Tips for accurate previewing
- Scroll the canvas: Most mobile pages are longer than the phone frame. Scroll down inside the canvas to see below-the-fold content.
- Check multiple pages: Use the page dropdown to switch between pages and preview each one before publishing.
- Use Preview mode for final checks: Before hitting Publish, open Preview mode for a clean full-screen review of your layout.
- Real data, real preview: The canvas and Preview mode both show your actual Shopify product data, collection images, and prices — so what you see is a very close representation of what shoppers will experience.
- Brand Kit changes are instant: When you change a color or font in Brand Kit, the entire canvas updates immediately. Use this to quickly compare different color schemes.