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 while 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.

Mobile preview panel

Click Preview in the top navigation bar 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.

Select a screen

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.
Click the Visual edit button in the top-right corner of the preview panel.
You’ll be able to select any on-screen element and adjust its properties.Editable properties include:
  • Padding
  • Color
  • Font styling
Rocket's visual editing interface for mobile, showing selected UI elements with property controls.Rocket's visual editing interface for mobile, showing selected UI elements with property controls.

Edit visually in context

Success check: A properties panel opens in chat for the selected element.
  • Make changes and click Save to apply them.
  • Use Clear to discard the edits.

Want to go deeper with visual editing?
Explore more ways to style your app without code.
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.

Device preview options

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 support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.