Preview & Sandbox

Every Vybe app runs in its own sandboxed development environment. The sandbox gives your app an isolated runtime with a live preview that updates in real-time as the AI writes code.

---

​

How the sandbox works

When you create an app or open an existing one, Vybe automatically provisions a sandbox environment. This sandbox is a fully isolated container that runs your Next.js development server with all the same capabilities as a local development setup. The sandbox includes:

• A Next.js 15 dev server with hot module replacement
• A PostgreSQL database dedicated to your app
• Pre-installed npm packages (Shadcn UI, Tailwind CSS, Recharts, Lucide, and more)
• Access to your connected integrations and their credentials

---

​

Live preview

The Preview tab in the editor shows your running app. As the AI creates or edits files, the preview updates automatically — you see changes appear within seconds.

​

Real-time updates

The sandbox uses Next.js hot reload, so changes to your code are reflected in the preview almost instantly. You do not need to manually refresh — the preview updates on its own whenever:

• The AI creates a new file
• The AI modifies an existing file
• The AI installs a new package
• Database schema changes are applied

​

Page navigation

If your app has multiple pages or routes, the page selector dropdown at the top of the preview lets you navigate between them. You can also navigate by clicking links within your app just as a regular user would.

​

Interacting with your app

The preview is fully interactive. You can:

• Click buttons, fill out forms, and submit data
• Navigate between pages using your app’s navigation
• Trigger API calls and see real-time results
• Test search, filtering, and pagination features

This lets you verify that your app works correctly as you build it.

---

​

Handling preview errors

When your app encounters an error, the preview displays the error details instead of your app’s UI.

​

Error display

Runtime errors show:

• The error message
• A stack trace pointing to the file and line where the error occurred
• Context about what went wrong

​

Sending errors to the AI

Click on an error in the preview to send it directly to the AI chat. The AI will:

1. Read the error message and stack trace
2. Examine the relevant source files
3. Diagnose the root cause
4. Fix the issue automatically

This is often the fastest way to resolve bugs — just click the error and let the AI handle it.

---

​

Sandbox lifecycle

Understanding how sandboxes are managed helps you work efficiently with Vybe.

​

Creation

A sandbox is created automatically when you:

• Create a new app
• Open an existing app that does not have an active sandbox

The sandbox starts within seconds and the dev server begins running immediately.

​

Sleep and wake

To conserve resources, sandboxes may go to sleep after a period of inactivity. When this happens:

• Your code and database are fully preserved
• The sandbox restarts automatically when you return to the app
• Startup takes a few seconds as the dev server reinitializes

​

Persistence

Everything in your sandbox persists between sessions:

• All source files and code changes
• Database tables and data
• Installed packages
• Environment variables and integration connections

You can close your browser and return later — your app will be exactly where you left it.

---

​

Preview vs. deployment

The preview in your sandbox is a development build of your app. It differs from your deployed production app in a few ways:

---

​

What’s next

• Learn about the code your app is built with: Working with Code
• Understand version history and rollback: Version History
• Deploy your app: Deploying