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

# Live Preview & Sandbox

> Your app runs in a real cloud sandbox with hot-reload, terminal access, AI coder, Git, and build logs.

# Live Preview & Sandbox

Every application in Seemodo runs inside a live cloud sandbox. This is a real development environment — your code runs, you can interact with your app, and changes appear instantly.

## How the sandbox works

When you generate a HiFi screen or open a project, Seemodo provisions a cloud sandbox:

1. A fresh development environment starts
2. Your project code is synced
3. A dev server launches with hot-reload
4. The live preview appears in your workspace

Changes made by the AI (or through the terminal) trigger hot-reload — you see updates instantly without refreshing.

## Sandbox in the Visual Designer

In the Visual Designer (`/start`), the sandbox activates automatically when you generate a HiFi screen. The loading sequence shows:

* "Setting up Seemodo..."
* "Preparing sandbox..."
* "Loading environment..."
* "Almost ready..."

Once ready, your generated screen runs live inside the canvas frame.

## Sandbox in the Project Editor

In the Project Editor (`/projects/[id]`), the sandbox starts as soon as you open a project. The Preview Panel on the right shows your running app.

Features:

* **Auto-recovery** — If the sandbox crashes, Seemodo detects it and restarts automatically
* **Keep-alive** — The sandbox stays running while you're working
* **Multiple pages** — Navigate between pages in the preview just like a real app

## The Sandbox Panel

In the Visual Designer, click the **terminal icon** (next to the Generate button) to open the Sandbox Panel with four tabs:

### AI Coder (OpenCode)

A full AI coding assistant with file-system access. Unlike the inline AI Editor (which edits one screen at a time), the Sandbox AI Coder can:

* Create new files and components
* Edit multiple files simultaneously
* Set up routing, state management, and complex features
* Install packages
* Work across your entire project

### Terminal

A full command-line shell connected to your sandbox. Run any command:

```bash theme={null}
npm install axios
ls src/components/
cat package.json
```

### Git

Version control built into the sandbox:

* View current branch
* See changed files with status (added/modified/deleted)
* Write commit messages and commit
* View commit history with diffs

### Vite Logs

Real-time build output from the development server:

* Compilation errors
* HMR (Hot Module Replacement) updates
* Warnings and debug info

## Sandbox status indicators

| Indicator                | Meaning                       |
| ------------------------ | ----------------------------- |
| Green dot                | Sandbox is running and synced |
| Spinner                  | Sandbox is starting           |
| Terminal icon (active)   | Sandbox Panel is open         |
| Terminal icon (disabled) | No sandbox active yet         |

## Seemodo Cloud button

The **cloud icon** next to the terminal button opens Seemodo Cloud — for connecting a database, storage, and authentication to your sandbox app. See [Seemodo Cloud](/en/seemodo/cloud).

## Next steps

<CardGroup cols={2}>
  <Card title="Seemodo Cloud" icon="cloud" href="/en/seemodo/cloud">
    Add a database to your sandbox app
  </Card>

  <Card title="GitHub" icon="code-branch" href="/en/seemodo/github">
    Connect your sandbox to GitHub
  </Card>
</CardGroup>