Skip to main content

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

IndicatorMeaning
Green dotSandbox is running and synced
SpinnerSandbox 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.

​
Next steps

Seemodo Cloud

Add a database to your sandbox app

GitHub

Connect your sandbox to GitHub