AI-powered full-stack web development platform by StackBlitz that generates, runs, and deploys applications entirely in the browser.
Getting Started
Access & Setup
| Command | Description |
|---|
Navigate to bolt.new | Open Bolt.new in browser |
| Sign in with GitHub or Google | Create account for project persistence |
| Type a prompt in the chat | Start building an application |
| Click “Deploy” when ready | Deploy to Netlify or other hosts |
| Fork to StackBlitz | Continue editing in StackBlitz IDE |
| Download project | Get source code as zip |
How It Works
Bolt.new Architecture:
1. You describe what you want in natural language
2. AI generates the full project (frontend + backend + config)
3. WebContainer runs the app in-browser (no server needed)
4. Live preview updates as AI makes changes
5. You iterate by chatting — AI modifies code in real-time
6. Deploy directly to Netlify or download source
Technology: Runs on StackBlitz WebContainers
- Node.js runs IN the browser (not a remote server)
- npm install, build, and dev server all run locally
- No Docker, no VMs, no cloud compute
Prompting
Effective Prompts
| Prompt Style | Description |
|---|
| ”Build a todo app with React and Tailwind” | Specify framework and styling |
| ”Create a REST API with Express and MongoDB” | Backend-focused prompt |
| ”Make a landing page for a SaaS product” | Design-focused prompt |
| ”Add authentication with email/password” | Add features to existing project |
| ”Fix the bug where the form doesn’t submit” | Debug existing issues |
| ”Change the color scheme to dark mode” | Style modifications |
| ”Add a dashboard page with charts” | New page/feature request |
| ”Refactor the code to use TypeScript” | Code quality improvements |
Prompt Best Practices
Good prompts:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Bad prompts:
"Make me a website" → Too vague
"Build Facebook" → Too broad
"Fix everything" → No specific target
Tips:
- Specify the tech stack (React, Vue, Svelte, etc.)
- Describe the features you need
- Mention styling preferences (Tailwind, CSS modules)
- Reference specific APIs or data sources
- Break large apps into incremental prompts
Supported Frameworks
Frontend Frameworks
| Framework | Description |
|---|
| React | Component-based UI library |
| Next.js | React framework with SSR/SSG |
| Vue.js | Progressive JavaScript framework |
| Nuxt | Vue framework with SSR/SSG |
| Svelte | Compile-time reactive framework |
| SvelteKit | Svelte full-stack framework |
| Astro | Content-focused static site builder |
| Solid.js | Fine-grained reactive UI library |
| Angular | Full-featured TypeScript framework |
Backend & Full-Stack
| Framework | Description |
|---|
| Express.js | Minimal Node.js web framework |
| Fastify | Fast Node.js web framework |
| Hono | Lightweight edge-first framework |
| NestJS | TypeScript enterprise framework |
| tRPC | End-to-end type-safe APIs |
| Remix | Full-stack React framework |
Styling & UI Libraries
| Library | Description |
|---|
| Tailwind CSS | Utility-first CSS framework |
| shadcn/ui | React component library |
| DaisyUI | Tailwind component library |
| Material UI | Google’s design system for React |
| Chakra UI | Accessible React components |
| Radix UI | Unstyled accessible components |
File Editor
Working with Files
| Command | Description |
|---|
| Click file in sidebar | Open file in editor |
| Edit code directly | Manual code changes |
Ctrl + S | Save file changes |
| Right-click file → New File | Create new file |
| Right-click file → Delete | Remove file |
| Right-click folder → New Folder | Create directory |
| File changes auto-detected | Hot reload updates preview |
Terminal Access
| Command | Description |
|---|
| Click terminal panel at bottom | Access WebContainer terminal |
npm install package | Install npm packages |
npm run dev | Start development server |
npm run build | Build for production |
npx prisma migrate dev | Run Prisma migrations |
node script.js | Run Node.js scripts |
Iterative Development
Chat-Based Editing
| Command | Description |
|---|
| ”Add a navbar with logo and links” | Add new components |
| ”Make the button bigger and blue” | Style modifications |
| ”Add form validation for email” | Add functionality |
| ”The page crashes when I click submit” | Bug reports |
| ”Show loading spinner while data fetches” | UX improvements |
| ”Add error handling for the API call” | Robustness |
| ”Make it responsive for mobile” | Responsive design |
| ”Add dark mode toggle” | Theme switching |
Version Control
| Command | Description |
|---|
| Chat history shows all changes | Track what AI modified |
| ”Undo the last change” | Revert AI modifications |
| ”Go back to the version with the blue header” | Reference previous states |
| Download project at any point | Save snapshots locally |
| Fork to StackBlitz for git | Full git integration |
Deployment
Netlify Deployment
| Command | Description |
|---|
| Click “Deploy” button | Start deployment process |
| Connect Netlify account | Authorize Netlify access |
| Auto-builds and deploys | Gets a live URL in seconds |
| Custom domain support | Configure in Netlify dashboard |
| HTTPS included | Automatic SSL certificates |
Alternative Deployment
| Command | Description |
|---|
| Download project → deploy manually | Any hosting provider |
| Fork to StackBlitz → connect CI/CD | GitHub-based deployment |
| Fork to GitHub → Vercel/Netlify auto-deploy | Git-based workflows |
Download → npm run build → upload dist/ | Manual static hosting |
Deployment Example
Deployment workflow:
1. Click "Deploy" in Bolt.new
2. Select Netlify (or connect account)
3. Bolt.new builds the project
4. Uploads to Netlify automatically
5. Get your live URL: https://your-app.netlify.app
For custom domains:
1. Deploy first to get Netlify URL
2. Go to Netlify dashboard → Domain settings
3. Add your custom domain
4. Update DNS records at your registrar
WebContainers
How WebContainers Work
| Feature | Description |
|---|
| Node.js runs in browser | No remote server needed |
| npm/yarn/pnpm support | Full package management |
| File system in browser | Virtual filesystem |
| Dev server in browser | Hot reload with local URLs |
| No Docker required | Everything runs client-side |
| Works offline (after load) | No continuous internet needed |
WebContainer Capabilities
What runs in WebContainers:
✓ Node.js (most recent LTS)
✓ npm, yarn, pnpm
✓ TypeScript compilation
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (in-memory)
✓ Prisma (with SQLite)
✓ File system operations
What does NOT run:
✗ Docker containers
✗ PostgreSQL / MySQL / MongoDB
✗ Native binary dependencies
✗ Python / Ruby / Go
✗ System-level operations
✗ Long-running background processes
Database Options
Supported Databases
| Database | Description |
|---|
| SQLite (in-memory) | Works directly in WebContainer |
| Prisma + SQLite | ORM with local database |
| Supabase (remote) | PostgreSQL via API |
| Firebase (remote) | NoSQL via Firebase SDK |
| Turso (remote) | Edge SQLite via libSQL |
| PlanetScale (remote) | MySQL via API |
Database Example
For local development in Bolt.new:
SQLite + Prisma is the best combo
- Runs entirely in WebContainer
- No external services needed
- Full ORM with migrations
For production:
Connect to a hosted database
- Supabase (free tier: 500MB)
- Turso (free tier: 9GB)
- PlanetScale (free tier: 5GB)
Set connection strings as environment variables
Project Templates
Common Starting Points
| Template | Description |
|---|
| ”React + Vite + Tailwind starter” | Modern React SPA |
| ”Next.js app with shadcn/ui” | Full-stack React |
| ”Express API with Prisma + SQLite” | REST API backend |
| ”Vue + Nuxt + Tailwind” | Vue full-stack |
| ”Svelte + SvelteKit” | Svelte full-stack |
| ”Astro blog with MDX” | Content site |
| ”Landing page with Tailwind” | Marketing page |
Best Practices
-
Start with a clear, specific prompt — Describe the tech stack, features, and design preferences upfront. “Build a task manager with React, Tailwind, and localStorage persistence” gets better results than “make a todo app.”
-
Build incrementally — Start with the core feature, verify it works, then add features one at a time. Each prompt should focus on one thing rather than requesting everything at once.
-
Reference the code when debugging — Instead of “it doesn’t work,” say “the handleSubmit function in ContactForm.tsx doesn’t send the POST request” for more targeted fixes.
-
Use the terminal for verification — Check the terminal output for build errors, missing dependencies, or runtime issues before asking the AI to debug.
-
Download backups regularly — Download your project periodically as a safety net. Browser-based projects can be lost if you clear browser data.
-
Specify package versions when needed — If you need a specific library version, mention it: “Use react-query v5” or “Use Tailwind CSS v3, not v4.”
-
Fork to StackBlitz for advanced editing — When you need git, multiple terminals, or more complex workflows, fork the project to the full StackBlitz IDE.
-
Use environment variables for secrets — Never hardcode API keys in prompts. Ask the AI to use environment variables and set them in the deployment platform.
-
Choose SQLite for in-browser databases — Since WebContainers can’t run PostgreSQL or MySQL, use SQLite with Prisma for local development and switch to a hosted DB for production.
-
Leverage the command palette — Press Ctrl + K to quickly search files, run commands, and navigate your project without clicking through menus.
