Use preview panel
Mobile preview
Preview your app on real devices like iPhone and Pixel, test flows, and make visual changes instantly - right inside Rocket.
In this guide, you’ll learn how to:
- Open the preview panel for mobile apps.
- Switch screens, refresh changes, and test on popular device models.
- Make live visual edits without typing a single line of code.
Before you begin
You’ll need:
- An existing Rocket project.
See your app in action as you build
Preview panel overview
It launches a live, editable view of your mobile app.
Preview panel features at a glance
Choose a screen to preview
Choose a screen to preview
Use the Currently viewing dropdown to switch between your screens.
Use it to:
Screen selection dropdown
- Navigate through your app.
- Preview individual screens as you build them.
Success check: The selected screen loads instantly inside the panel.
Full screen preview
Full screen preview
Next to the screen selector is the button.
Clicking it opens your app in full screen and closes the chat window.Use this when:
Clicking it opens your app in full screen and closes the chat window.Use this when:
- The in-app preview feels cramped with chat open.
- You want to test your app in a real-world scenario.
Refresh your preview
Refresh your preview
Changed something and don’t see it reflected?
Click the Refresh icon (top right of the preview panel).
Click the Refresh icon (top right of the preview panel).
Success check: Preview reloads, showing your latest updates.
Edit visually in the preview
Edit visually in the preview
Click the Visual edit button in the top right corner of the panel.
This lets you select an element on screen and modify its properties.You can change properties like:
This lets you select an element on screen and modify its properties.You can change properties like:
- Padding
- Colors
- Font styling
Visual edit interface
Success check: A property window opens in chat for the selected element.
- Make changes, then hit Save to save your changes or click Clear to discard.
Curious what else you can do with visual editing?
Explore more features to customize your app visually, and effortlessly.
Explore more features to customize your app visually, and effortlessly.
Preview device models
Preview device models
Click the Device icon in the top right to open resolution options.For mobile apps:
Test how your app looks and behaves across real-world phones.
- iPhone 14 Pro
- iPhone SE
- Pixel 9
- Samsung Galaxy S23
Responsive view on mobile app
Success check: Your app scales to the selected resolution in the panel.
You did it!
You’ve unlocked the full Preview Panel for mobile—live edits, instant refresh, popular phone models, and visual edit mode. Your app’s not just ready, it’s launch-ready.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.