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.

​
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

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.
Next to the screen selector is the button.
Click it to expand the preview to full screen and close the chat window.Use this when:
  • The preview feels cramped with chat open.
  • You want a cleaner test view.
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.
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.
Click the Device icon in the top-right corner to open device options.Mobile preview supports:
  • Mobile
  • Tablet(iPad)
  • Desktop
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.
Need help?
Email us at [email protected] or join our Discord community to get help, share ideas, and connect with other creators.