Skip to main content
What you’ll learn:
  • Open the preview panel for web apps.
  • Switch screens, refresh changes, and test different resolutions.
  • Make live visual edits without writing code.

​
Before you begin

You’ll need:
  • An existing Rocket project.

​
See your app in action as you build

Rocket preview panel showing live web app interface.Rocket preview panel showing live web app interface.

Preview panel overview

Click Preview in the top navbar to open the preview panel.
It launches a live, editable view of your web app.

​
Preview panel features at a glance

Choose a screen to preview

Use the Currently viewing dropdown to switch between screens in your web app.
Screen selection dropdown inside the preview panel.Screen selection dropdown inside the preview panel.

Select a screen to preview

Use it to:
  • Navigate between screens.
  • Preview individual pages as you build.
Success check: The selected screen loads instantly in the panel.
Next to the screen selector, click the icon.
This opens your web app in full screen.
Fullscreen mode of Rocket web preview.Fullscreen mode of Rocket web preview.

View in full screen

Use full screen when:
  • The preview feels cramped with the chat open.
  • You want to test your app in a real browser view.
If your changes aren’t visible yet, click the Refresh icon in the top right of the panel.
Success check: The panel reloads and displays your latest updates.
Click the Visual edit button in the top right corner of the preview panel.
You can then select any element and adjust its properties visually.Edit things like:
  • Padding
  • Color
  • Font styling
Rocket visual editor open in preview mode with editable properties.Rocket visual editor open in preview mode with editable properties.

Edit visually from the preview

Success check: A property panel opens in chat for the selected element.
Make your changes, then click Save to confirm or Clear to discard.

Curious what else you can do with visual editing?
Explore more features to customize your app visually, and effortlessly.
Click the Device icon in the top right to change screen size.Available options:
  • Mobile
  • Tablet
  • Desktop
  • Responsive
Device type dropdown showing responsive view options in preview.Device type dropdown showing responsive view options in preview.

Test responsive layouts

Test how your app looks and behaves across devices and resolutions.
Success check: The preview updates to match the selected device size.

You did it!

You’ve unlocked the full Preview Panel for web. Edit visually, test layouts, and make real-time changes all from one place.
Need help?
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.