Vibecoding with Bolt.new

Bolt.new is the fastest way to go from idea to deployed web app. Open your browser, describe what you want, and watch a full-stack application appear in real-time. No installation, no setup, no terminal commands. Just vibes.

Built by StackBlitz (the team behind browser-based development environments), Bolt.new runs a complete development environment in your browser using WebContainers. That means it installs packages, runs servers, and previews your app — all without touching your local machine.

What you’ll learn:

What Bolt.new is and how it works
Step-by-step workflow for building apps
Tips for getting the best results
When Bolt.new is the perfect choice (and when it isn’t)
How to export and continue development locally

Prerequisites: None. Bolt.new is designed to be accessible to everyone.

What Makes Bolt.new Different?

Most AI coding tools help you write code in an editor. Bolt.new does something different: it builds and runs the entire app in your browser.

Here’s the key difference:

Cursor/Copilot: AI helps you write code → you run it locally
Bolt.new: AI writes code + installs packages + starts the server + shows the running app → all in browser

The entire feedback loop — prompt → code → run → preview → iterate — happens in one browser tab. This makes it incredibly fast for prototyping.

Getting Started

Step 1: Open Bolt.new

Go to bolt.new. No account needed to start (you’ll need one to save/deploy).

Step 2: Describe Your App

Type a clear description in the prompt:

Build a recipe sharing app with:
- Homepage showing a grid of recipe cards with photos
- Recipe detail page with ingredients, steps, cook time
- Add recipe form with image upload
- Search and filter by cuisine type
- Use React, TypeScript, and Tailwind CSS
- Modern, clean design with warm colors

Step 3: Watch It Build

Bolt.new will:

Create the project structure
Write all the files
Install dependencies (npm install)
Start the dev server
Show you the running app in a preview pane

You can see the code on the left and the running app on the right — in real-time.

Step 4: Iterate

Click around the preview. Found something to fix? Just tell Bolt:

"The recipe cards need to be taller — show the full image without cropping"
"Add a dark mode toggle in the header"
"The search should filter as I type, not on submit"

Each prompt triggers code changes and an automatic refresh.

The Bolt.new Workflow

Phase 1: Describe Completely

Front-load your description. The more detail in the first prompt, the better:

Good prompt:
"Build a personal finance dashboard:
- Monthly income vs expenses bar chart
- Category breakdown pie chart  
- Transaction list with date, amount, category, merchant
- Add transaction form with category autocomplete
- Monthly summary cards: total income, total expenses, savings rate
- Use Chart.js for visualizations
- Responsive — works on mobile
- Color scheme: dark background, green for income, red for expenses"

Bad prompt:
"Build a finance app"

Phase 2: Visual Iteration

Bolt.new excels at visual iteration because you see changes instantly:

"Move the pie chart to the right side of the bar chart on desktop"
"Make the transaction list sortable by clicking column headers"
"The 'Add Transaction' button should be a floating action button on mobile"

This is where Bolt shines — rapid visual refinement.

Phase 3: Add Functionality

Once the UI looks right, add deeper functionality:

"Add localStorage persistence — save all transactions locally"
"Add CSV export for transactions"
"Add a monthly budget feature — set budgets per category and show progress bars"

Phase 4: Deploy

Bolt.new can deploy your app directly to Netlify:

Click the Deploy button
Connect your Netlify account (one-time)
Your app is live at a .netlify.app URL

Tips for Better Results

Specify the Tech Stack

"Use React with TypeScript and Tailwind CSS"
"Use Next.js with shadcn/ui components"
"Use vanilla HTML, CSS, and JavaScript (no frameworks)"

Without this, Bolt picks its defaults — usually React + Vite + Tailwind, which is solid but might not be what you want.

Include Design Details

"Modern, minimal design. Use Inter font. Rounded corners on all cards.
Subtle box shadows. Primary color: #6366f1 (indigo). Background: #fafafa."

Reference Known UI Patterns

"The dashboard layout should be like Notion — sidebar on the left with 
navigation, main content area on the right."
"The card layout should look like Pinterest — masonry grid with 
variable-height cards."

Break Complex Apps into Phases

Don’t try to build everything at once:

First prompt: core UI and layout
Second: main functionality
Third: secondary features
Fourth: polish and edge cases

Use the Code View

Don’t just look at the preview. Check the code Bolt generates:

Is it using patterns you understand?
Are there hardcoded values that should be dynamic?
Is the code organized in a way you can maintain?

When to Use Bolt.new

✅ Perfect For:

Quick prototypes — “Can I build this in 20 minutes?” Yes.
Demos and presentations — Get a working app to show stakeholders
Landing pages — Beautiful, responsive landing pages in minutes
Learning — See code generated and running in real-time
Design exploration — Try different layouts and styles quickly
Client mockups — Interactive prototypes beat static Figma screens
Hackathons — Maximum speed from idea to working demo
No local setup — Works on any computer with a browser (Chromebook, tablet, borrowed laptop)

❌ Not Ideal For:

Backend-heavy apps — Database, auth, and server logic are limited in browser
Large projects — Browser environment has memory/performance limits
Production apps — Code quality is prototype-grade, not production-grade
Complex state management — For anything beyond simple state, you’ll need a proper IDE
Team collaboration — No real-time collaboration or version control built in
Existing codebases — Bolt starts fresh; it doesn’t import existing projects well

Bolt.new vs. Other Tools

Feature	Bolt.new	Replit Agent	Cursor
Browser-based	✅ Full	✅ Full	❌ Desktop
Speed to first app	⚡ Fastest	Fast	Medium
Backend support	⚠️ Limited	✅ Full	✅ Full
Database	❌ Client-side only	✅ Built-in	✅ Your choice
Deployment	✅ Netlify	✅ Replit	❌ Manual
Code quality	Prototype	Prototype	Production
Best for	Frontend demos	Full-stack MVPs	Serious development

Think of it as a spectrum of control vs. speed:

Bolt.new → Fastest, least control, frontend-focused
Replit Agent → Fast, moderate control, full-stack
Cursor → Most control, highest quality, requires dev knowledge

Exporting to Local Development

When your Bolt prototype is ready for production, export it:

Method 1: Download the Code

Bolt.new lets you download the project as a zip. Then:

# Unzip and set up locally
unzip bolt-project.zip
cd bolt-project
npm install
npm run dev

Method 2: Push to GitHub

Some Bolt plans allow direct GitHub integration. Push your project, then clone locally.

Method 3: Rebuild in Cursor

Use the Bolt prototype as a spec:

"Here's a prototype I built in Bolt.new. I want to rebuild it properly in 
Next.js 14 with App Router, TypeScript, Supabase for the database, and 
proper authentication. Here's what it does: [describe features]"

This gives you a production-grade codebase based on a validated prototype.

Common Issues

Preview Not Loading

Browser WebContainers can be finicky:

Try Chrome — works best in Chromium browsers
Disable ad blockers — they can interfere with WebContainers
Clear browser cache if things get stuck
Reload the page — sometimes the container needs a restart

AI Generates Broken Code

When the app shows errors in the preview:

Paste the error back to Bolt: “I’m seeing this error: [error]. Fix it.”
Be specific about what broke: “The app was working, then I asked for [X] and now the header is missing”
Ask for a rollback: “Undo the last change and try a different approach”

Running Out of Tokens

Bolt.new uses tokens per interaction. To conserve:

Write detailed first prompts (fewer iterations needed)
Make targeted requests instead of vague ones
Upgrade your plan if you’re building frequently

Your First Bolt.new Project

Try this — it takes about 15 minutes:

Build a personal portfolio website:
- Hero section with name, title, and a short bio
- Projects section showing 4 project cards with image, title, description, and tech stack tags
- Skills section with categorized skill badges (Frontend, Backend, Tools)
- Contact section with a simple form (name, email, message)
- Smooth scroll navigation
- Fully responsive
- Use a modern dark theme with an accent color of #10b981 (emerald)
- Add subtle scroll animations
- Use React, TypeScript, Tailwind, and Framer Motion

Deploy it to Netlify and you have a live portfolio in 15 minutes.

📖 Getting Started with Vibecoding — The fundamentals
📖 Choosing Your AI Tools — Full comparison
📖 Vibecoding with Replit — Full-stack alternative
📖 Vibecoding with Cursor — For when you need more control
📖 Project Scaffolding — Structure projects for growth