Sandbox Preview
Use the live preview of your cloud sandbox in the browser: preview modes, restarts, testing as a person and the SEO Inspector
The sandbox preview is the live view of your app's cloud sandbox, shown next to the
chat in an app's Build tab. It updates as Starcat Developer changes the code. If you build with a
coding agent on your computer, you preview the app locally with npm run dev instead. See
Run Your App Locally.
The sandbox is not walled off from live data. On a new app it reads and writes the same database as production until you give it its own branch. See Which data each environment uses.
If your organization uses feature branches, each tracked branch has its own sandbox preview. You can also create a shareable preview deployment from a feature branch, but production publishing remains default-branch only.
Preview Modes
With Fast Preview turned on, the preview toolbar has two tabs:
- Live runs the app on the dev server. While the server starts, the tab shows Starting…. If the start fails, the tab shows Retry. Click it to try again.
- Fast serves an optimized build of the app instead of the dev server. Rebuilds run automatically after each change. Use Rebuild in the toolbar to rebuild and reload the preview yourself. If a build fails, the toolbar shows a Build error indicator. Hover it to read the output.
Fast Preview is experimental. Turn it on in Settings → General → Hosting & behavior. Without it, the preview runs on the dev server and these tabs do not appear.
The build cache makes Fast rebuilds incremental. Enabling it commits a small config change to your app. The option is unavailable while the agent is working.
Restarting the Dev Server
The Dev Server tab in the logs panel has two icon buttons:
- Restart Dev Server restarts the dev server.
- Force Restart is for a sandbox that stops responding.
Both are disabled while the agent is working.
Test as a Person
The Test as button in the preview toolbar shows the app as a specific user, as a role, or as a signed-out guest. A user and a role are separate choices, so you can combine them to see what someone with different permissions sees. The button's tooltip names who you are testing as.
Preview Navigation
The preview toolbar provides several navigation controls:
Browser History
- Back/Forward buttons - Navigate through your browsing history within the preview, just like a regular browser
Route Picker
The route picker dropdown lets you quickly jump to any page in your application:
- Click the route picker icon (tree list) in the toolbar
- Select from the list of available routes
- The preview navigates directly to that page
URL Bar
- Type any path directly in the URL bar
- Press Enter to navigate to the specified route
- The current path is shown in the input field
Refresh
Click the refresh button to reload the current page in the preview.
Responsive Testing
Test how your application looks on different devices using the viewport toggle:
- Desktop - Full-width desktop viewport
- Mobile - Narrow mobile viewport
Click the monitor or smartphone icons to switch between viewports.
SEO Inspector
The SEO Inspector allows you to view and edit the SEO metadata for any page in your application.
Opening the Inspector
Click the SEO Inspector button (brackets icon) in the preview toolbar to open the inspector panel.
Basic Metadata
View and edit core SEO fields:
- Title - Page title (recommended max 60 characters)
- Description - Meta description (recommended max 160 characters)
- Canonical URL - The canonical URL for the page
- Robots - Robots meta directive (e.g.,
index, follow)
Open Graph Tags
Configure how your page appears when shared on social platforms like Facebook and LinkedIn:
- Title - The title shown in social shares
- Description - The description shown in social shares
- Type - Content type (e.g.,
website,article) - URL - The canonical URL for Open Graph
- Image - The preview image for social shares
Twitter Card Tags
Configure how your page appears when shared on Twitter/X:
- Card Type - The card format (e.g.,
summary,summary_large_image) - Title - The title shown on Twitter
- Description - The description shown on Twitter
- Image - The preview image for Twitter shares
Editing Metadata
- Make changes to any field in the inspector
- Click Save Changes to submit your updates
- Starcat Developer will automatically update your code with the new metadata
Uploading Images
For Open Graph and Twitter images, you can:
- Click the upload area to select an image file
- Enter an image URL directly
- After upload, the image URL is automatically populated
Changes made in the SEO Inspector are sent to Starcat Developer, which updates your source code accordingly. The changes will be reflected in your preview after the agent completes the update.
Publishing
The preview toolbar does not publish your app. To make your changes live, deploy from Settings → Deployments → Production. See Publishing & Deployment.