In this guide, you’ll learn how to:
- Open the preview panel for web apps.
- Switch screens, refresh changes, and test different resolutions.
- 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 web app.
Preview panel features at a glance
Choose a screen to preview
Choose a screen to preview
In web apps, use the Currently viewing dropdown to switch between your screens.
Screen selection dropdown
- Navigate through your web 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 web app in full screen.
Clicking it opens your web app in full screen.
Fullscreen preview
- The in-app preview feels cramped with chat open.
- You want to test your web 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 responsive views
Preview responsive views
Click the Device icon in the top right to open resolution options.You can choose:
- Mobile
- Tablet
- Desktop
-
Responsive
Responsive view on web app
Success check: Your web app scales to the selected resolution in the panel.
You did it!
You’ve unlocked the full Preview Panel for web - live edits, instant refresh, responsive layouts, and visual edit mode. Your web app’s polished and ready to impress.
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.