Skip to main content
See your app running live as you build.Test pages across screen sizes, click through user flows, capture screenshots, and make visual tweaks - all without deploying. The preview panel is a browser built into Rocket.You need an existing Rocket project. Don’t have one yet? Create one to get started.

​
Getting started

Click Preview in the top navbar to open the preview panel. It launches a live view of your app that updates as you build.
Rocket preview panel showing live web app interface.Rocket preview panel showing live web app interface.

​
Preview features

​
Choose a screen to preview

Use the Currently viewing dropdown to switch between screens in your app.
Screen selection dropdown inside the preview panel.Screen selection dropdown inside the preview panel.
Success check: The selected screen loads instantly in the panel.

​
Full screen preview

Click the icon next to the screen selector to expand the preview to full screen and hide the chat panel.Use full screen when:
  • The preview feels cramped with the chat open.
  • You want to test your app in a larger view.
Fullscreen mode of Rocket web preview.Fullscreen mode of Rocket web preview.

​
Refresh your preview

If your changes are not visible yet, click the Refresh icon in the top-right of the panel.
Success check: The panel reloads and displays your latest updates.

​
Preview responsive views and device models

Click the Device icon in the top-right corner to test how your app looks across different screen sizes and devices.
Available views:
  • Desktop
  • Laptop
  • Tablet
  • Mobile
Device type dropdown showing responsive view options.Device type dropdown showing responsive view options.
Success check: The preview resizes to match the selected device or screen size.

​
Edit visually in the preview

Click the Visual edit icon in the chat input box to enter visual edit mode. Select any element and adjust its text, style, spacing, or image directly in the preview.

Learn more about visual edit tools and what you can change.

​
Capture screenshots

Take screenshots directly from the preview panel and use them in chat.
  1. Click the Capture screenshot button in the top-right of the preview panel.
  2. Choose your capture mode:
    • Full Screen: Captures the entire preview area.
    • Selected Area: Click and drag to select a specific region.
  3. After capturing, drag and drop the screenshot into the chat input.
Use screenshots to show Rocket the specific parts of your app you want to change.
Capturing a screenshot and dragging it into chat.Capturing a screenshot and dragging it into chat.
Success check: The screenshot appears in the chat input after dragging.

​
What’s next?

Visual edit

Click on any element to change styles, spacing, and content visually.

Chat interface

Build and iterate on your app through natural conversation.

Deploy your app

Publish your app to a live URL and share it with the world.