Skip to main content
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 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.
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.
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.
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.
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
Rocket visual editor open in preview mode with editable properties.Rocket visual editor open in preview mode with editable properties.
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.

Curious what else you can do with visual editing?
Explore more features to customize your app visually, and effortlessly.
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.
Screenshot capture button in the preview panel.Screenshot capture button in the preview panel.
Choose your capture mode:
  • Full Screen: Captures the entire preview area
  • Selected Area: Click and drag to select a specific region
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 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 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 apps. Test layouts and make real-time changes all from one place.
Need help?
Email us at [email protected] or join our Discord community to get help, share ideas, and connect with other creators.