> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stardeck.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Sandbox Preview

> Preview and test your app in real-time with the sandbox environment

## Overview

The sandbox preview provides a live, interactive preview of your application as you develop. It runs your app in an isolated environment, allowing you to test changes in real-time before publishing.

## Sandbox Status

The sandbox status indicator in the preview toolbar shows the current state of your development environment:

* **Running** - Your sandbox is active and serving the preview
* **Starting** - The sandbox is initializing
* **Stopped** - The sandbox has been stopped

If your sandbox encounters issues, you can restart it using the restart option in the status menu. A force restart option is also available if the sandbox becomes unresponsive.

## 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:

1. Click the route picker icon (tree list) in the toolbar
2. Select from the list of available routes
3. 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

1. Make changes to any field in the inspector
2. Click **Save Changes** to submit your updates
3. The Developer Agent 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

<Note>
  Changes made in the SEO Inspector are sent to the Developer Agent, which updates your source code
  accordingly. The changes will be reflected in your preview after the agent completes the update.
</Note>

## Publishing

When you're ready to make your changes live, use the publish button in the toolbar:

1. Click the **Publish** button in the top-right of the preview toolbar
2. Your app will be built and deployed
3. Once complete, access your live site at your app URL

For more details on publishing and deployment, see [Publishing & Deployment](/publishing-deployment).

## Related

<CardGroup cols={2}>
  <Card title="Environments" icon="layer-group" href="/environments">
    Understand how Stardeck's three environments work and why your data stays separate
  </Card>

  <Card title="Publishing & Deployment" icon="rocket" href="/publishing-deployment">
    Learn how to publish your app to production
  </Card>
</CardGroup>

***

*The sandbox preview gives you a complete development environment right in your browser. Test your changes, inspect SEO metadata, and publish when ready.*