Quick Start
Last updated:
Go from zero to a running application in WebSandbox in under 60 seconds. No installations required.
Prerequisites
WebSandbox has minimal requirements:
- A modern browser — Chrome 90+, Edge 90+, or Firefox 90+ (Chrome is recommended for best WebContainer performance)
- Cross-Origin Isolation headers must be enabled on the origin — WebSandbox handles this automatically via its Service Worker
- A WebSandbox account (free tier available, no credit card required)
No Node.js, no Docker, no IDE installation needed on your local machine.
Step 1 — Create an Account
Navigate to websandbox.dev/auth/signup and sign up with your GitHub account or email. GitHub sign-in is recommended as it automatically links your repositories for seamless git integration later.
After authentication you will be redirected through the onboarding flow which sets up your profile and default workspace preferences.
Step 2 — Create a Workspace
From the Dashboard, click New Workspace. You will be presented with a template picker:
- Blank — empty filesystem, you start from scratch
- React + Vite — pre-wired React 18 project with HMR
- Next.js — full-stack Next.js starter
- Node.js API — Express server template
- From Git URL — clone any public repository directly into a workspace
Select a template and click Create. The workspace boots in approximately 1–2 seconds.
Step 3 — Explore the Editor
The WebSandbox editor is a three-panel layout:
- File Explorer (left panel) — browse and manage your project files with full create, rename, delete support
- Code Editor (center panel) — powered by CodeMirror for Instant Projects and VSCode Server for Cloud Servers, offering TypeScript IntelliSense, multi-tab support, and real-time diagnostics
- Preview + Terminal (right/bottom panel) — a live preview iframe showing your running application and an integrated xterm.js terminal
Step 4 — Run Your App
If you selected a pre-built template, WebSandbox automatically runs npm install and starts the dev server. You will see the preview pane update as soon as the server is ready.
To run a custom command, open the Terminal tab and type:
npm install npm run dev
The preview pane detects the dev server port automatically and renders your application. Every file save triggers a hot-module replacement update — no manual refresh required.
What's Next
You're up and running. Here are the recommended next steps:
- Read How WebSandbox Works to understand the underlying architecture
- Learn about Git Integration to push your workspace to GitHub
- Explore Workspaces & Projects to manage multiple projects from the dashboard