Skip to main content
In this guide, you’ll learn how to:
  • Open the mobile preview panel.
  • Switch screens, refresh changes, and test on popular devices.
  • Make live visual edits with no code.
Why use preview?See your mobile app running on real device models without building installable files. Test how your app looks on specific iPhone and Android devices, verify touch interactions, and navigate through screens to catch design issues before deployment. The preview shows your app exactly as users will experience it.

​
Before you begin

You’ll need:
  • An existing Rocket project.

​
See your app in action as you build

Rocket's preview panel showing a mobile app screen inside the workspace.Rocket's preview panel showing a mobile app screen inside the workspace.
Click Preview in the top navbar to open the mobile preview panel.
This launches a live, editable view of your app.

​
Preview panel features at a glance

Choose a screen to preview

What is this? Switch between different screens in your mobile app using the dropdown menu. Navigate through your entire app structure without leaving the preview panel.
Use the Currently viewing dropdown to switch between screens.
Currently viewing dropdown for switching between screens in preview mode.Currently viewing dropdown for switching between screens in preview mode.
Use it to:
  • Navigate through your app.
  • Preview specific screens as you work.
Success check: The selected screen loads instantly in the panel.
What is this? Expand the preview to fill your entire screen, giving you more space to test your app. Perfect when the preview feels cramped with the chat panel open.
Next to the screen selector is the button.
Click it to expand the preview to full screen and close the chat window.Use full screen when:
  • The preview feels cramped with chat open.
  • You want a cleaner test view.
What is this? Reload the preview panel to see your latest changes. Use this when updates aren’t appearing automatically or you want to ensure you’re viewing the most recent version.
If you’ve made a change and don’t see it reflected, click the Refresh icon in the top-right of the preview panel.
Success check: The preview reloads and displays your latest updates.
What is this? Make design changes directly in the preview by clicking on elements. Adjust text, styles, spacing, and images without writing code or navigating to different files.
Click the Edit design button in the top-right corner of the preview panel.
You’ll be able to select any on-screen element and adjust its properties visually.Editable properties include:
  • Text
  • Style
  • Spacing
  • Image
  • Delete element
  • Go to code
  • Ask for quick changes
Editing text content of a selected element in mobile app visual edit.Editing text content of a selected element in mobile app visual edit.
Success check: A properties panel opens for the selected element.
Make changes and click Save changes to apply them.
Use Discard changes to discard the edits.

Want to go deeper with visual editing?
Explore more ways to style your app without code.
What is this? Take screenshots of your app directly from the preview panel to use within Rocket. Capture the full screen or select a specific area, then drag and drop the image into chat to show Rocket what you want to change.
Click the Capture screenshot button in the top-right of the preview panel.
Choose your capture mode:
  • Full Screen: Captures the entire preview area
  • Selected Area: Click and drag to select a specific region
Screenshot capture button in the preview panel.Screenshot capture button in the preview panel.
Dialog showing full screen and selected area capture options.Dialog showing full screen and selected area capture options.
After capturing, drag and drop the screenshot directly into the chat input. Use it to show Rocket specific parts of your app you want to modify, or to reference when asking for changes.
Demonstrating how to capture a screenshot and drag it into the chat input.Demonstrating how to capture a screenshot and drag it into the chat input.
Note: Screenshot capture is only available in web browsers, not in the mobile app.
Success check: The screenshot appears in the chat input after dragging.
What is this? Test how your app looks on real device models like iPhone 14 Pro, iPhone SE, and Samsung Galaxy. See exactly how your design works across different phone sizes and operating systems without building APK files.
Click the Device icon in the top-right corner to open device options.Mobile preview supports:
  • iPhone 14 Pro
  • iPhone SE
  • Samsung Galaxy S23
Device model dropdown in preview, showing different phone options like iPhone and Pixel.Device model dropdown in preview, showing different phone options like iPhone and Pixel.
Test how your app looks and behaves across different screen sizes.
Success check: The preview resizes to match the selected device.

You did it!

You’ve unlocked the mobile preview panel. Switch views, edit live, test across devices, and get your app launch-ready.