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.
Why use preview?See your web app running live as you build it, without deploying or waiting for builds. Test how pages look across different screen sizes, click through user flows, and verify responsive designs. The preview panel acts like a browser built into Rocket, so you can make quick visual tweaks or capture screenshots to use within Rocket.

​
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

What is this? Switch between different screens in your web app using the dropdown menu. Navigate through your entire app structure without leaving the preview panel.
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.
What is this? Expand the preview to fill your entire screen, giving you more space to test your app. Perfect when the preview feels cramped with the chat panel open.
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.
What is this? Reload the preview panel to see your latest changes. Use this when updates aren’t appearing automatically or you want to ensure you’re viewing the most recent version.
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.
What is this? Test how your app looks on different device sizes without leaving Rocket. Switch between mobile, tablet, desktop, and responsive views to ensure your design works across all screen sizes.
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.