AI for Coding

Bolt.new — The Complete Guide

Bolt.new generates complete full-stack web applications from a description — React frontend, Node.js backend, database — and runs them live in the browser instantly. Built on StackBlitz's WebContainers technology. Free tier: 1 million tokens per month. Pro: $20 per month.

AI App BuilderFree tier: 1M tokens/moPro: $20/monthBrowser-basedLast reviewed: April 2026

What is Bolt.new?

Bolt.new is a browser-based AI app builder made by StackBlitz. You describe an application in plain English and Bolt generates the complete frontend and backend code, runs it live in the browser and lets you iterate immediately. No local installation. No configuration. You type a description, click generate, and a working application appears.

Bolt is built on StackBlitz's WebContainers technology — a system that runs a full Node.js development environment inside the browser itself. This means the code Bolt writes actually executes locally in your tab, not on a remote server. You see a real running application, not a static preview.

Bolt is particularly popular for rapid prototyping, landing pages and small web applications. The 1 million tokens per month free tier is the most generous in the category, making it one of the best tools for trying AI app generation at no cost.

What Bolt actually generates

Bolt generates full-stack web applications. A typical Bolt project includes a React or Next.js frontend, a Node.js or Express backend, a database connection (PostgreSQL or SQLite via Prisma), routing and API endpoints. You can export the generated code to GitHub and deploy to Vercel, Netlify or any standard hosting provider.

Bolt supports multiple frontend frameworks including React, Next.js, Vue, Svelte and SvelteKit, Angular and plain HTML. This is broader than some competitors — v0 by Vercel, for example, focuses primarily on React and Next.js.

Who Bolt.new is for

Bolt is well-suited for developers who want to skip the project scaffolding phase — the time spent setting up folder structure, installing packages, configuring routing and wiring together boilerplate that is the same in every project. Describe what you want to build and Bolt handles the scaffold. You focus on the parts that are specific to your idea.

It is also genuinely useful for non-developers who have enough technical understanding to read and modify generated code but do not want to write it from scratch. Bolt's interface is approachable and the generated code is clean enough to hand to a developer if the project grows beyond what you can manage alone.

Why not just use ChatGPT to write code?

When you ask ChatGPT to write an application, it gives you code. You then need to create files, copy the code into them, install dependencies, configure the environment and run it. If something does not work, you describe the error back to ChatGPT and repeat the cycle.

Bolt runs the code as it writes it. You see the result immediately. Errors appear inline. The iteration loop is seconds rather than minutes per change. For building something from scratch, this is a fundamentally faster experience.

Is Bolt.new free?

Yes. The free tier includes 1 million tokens per month with a 300K daily cap, a live preview, deployment to a Bolt URL with Bolt branding, and unlimited databases. This is the most generous free tier in the AI app builder category. Pro is $20 per month and removes daily limits and Bolt branding. Teams is $40 per month per user.

Getting started in 5 minutes

Step 1 — Go to bolt.new

Go to bolt.new in your browser. No account required to try it — you can generate and preview code immediately. Sign up for a free account to save projects and access your full token allowance.

Step 2 — Describe what you want to build

Type a description of your application in the prompt bar. Bolt works best when you describe both the purpose and the main functionality: what it does, what users can do with it, and what data it needs to store. A one-paragraph description is usually enough to generate a functional starting point.

Step 3 — Review the live preview

Bolt generates code and runs it simultaneously. A live preview appears alongside the code. Click through the application to see what was built. Look for anything missing or wrong and describe the next change in the chat.

Step 4 — Export to GitHub or deploy

When you are satisfied, click Export to GitHub to get a repository with the full codebase. From there you can deploy to Vercel, Netlify or any other hosting provider. Or click Deploy to publish directly to a Bolt URL.

15 prompts for Bolt.new

Starting a new project

Landing page
Build a landing page for [product/service name]. It is [describe what it does] for [describe target audience]. Include: a hero section with headline and CTA, a features section with 3-4 key benefits, a pricing section with [describe pricing tiers], a FAQ section, and a footer. Make it look professional and modern.
Dashboard application
Build a dashboard application for [describe purpose]. It should show: [list 3-5 data visualisations or key metrics]. Include a sidebar navigation, a header with the application name and a user menu, and responsive design that works on tablets and phones. Use realistic placeholder data for now.
Full-stack CRUD app
Build a full-stack application for managing [describe what is being managed — tasks, contacts, inventory, etc.]. Users should be able to: create new [items] with fields [list fields], view all [items] in a table or list, edit existing [items], and delete [items]. Store data in a database. Include basic input validation.
SaaS starter
Build the foundation of a SaaS application for [describe the product]. Include: user authentication (sign up, log in, forgot password), a dashboard for logged-in users, a settings page where users can update their profile, and a clean navigation. I will add the main features next — just the auth and shell for now.

Adding to an existing Bolt project

Add search
Add a search feature to this application. Users should be able to search [describe what is searchable] by [describe search fields — name, description, tags etc.]. Show results as they type (live search). Highlight matching text in results. If there are no results, show a helpful empty state.
Add filtering and sorting
Add filtering and sorting to the [list/table name]. Filters: [list filter options — by status, by date, by category etc.]. Sorting: by [list sortable columns]. The URL should update when filters are applied so users can share filtered views. Show how many results match the current filters.
Add dark mode
Add a dark mode toggle to this application. The default should be the system preference. Store the user's choice in localStorage so it persists across page reloads. Apply the dark theme consistently across all pages and components. Use CSS variables so the colours are consistent and easy to maintain.
Add notifications
Add a notification system to this application. Types of notifications: [list the events that should trigger notifications — new message, task completed, etc.]. Show notifications as toast messages in the top right corner. After viewing, store read notifications in a notification centre accessible from the header.

Improving and fixing

Improve the mobile experience
Review this application on a 375px wide screen (iPhone size). Fix every issue: things that overflow horizontally, buttons too small to tap, text too small to read, navigation that breaks on small screens. After fixing mobile, test at 768px (tablet) and fix anything broken there too.
Add loading states
Add loading states throughout this application. Every button that triggers an async action should show a spinner and be disabled while waiting. Every section that loads data should show a skeleton loading state. After data loads, transition smoothly to the real content. If loading fails, show a clear error message with a retry button.
Improve form UX
Improve all the forms in this application. Changes to make: validation should run when a field loses focus (not just on submit), error messages should appear directly below the relevant field, required fields should be marked clearly, the submit button should be disabled until all required fields are valid, and forms should show a success state after submission.
Add CSV export
Add the ability to export data as a CSV file. On the [list/table name], add an Export button. When clicked, it should download a CSV file with all the current data (respecting any active filters). Include a proper header row. Format dates as YYYY-MM-DD. Do not include any internal ID fields in the export.
Make it accessible
Audit this application for accessibility issues. Fix: missing alt text on images, form fields without labels, interactive elements that cannot be reached by keyboard, poor colour contrast, and missing focus indicators. Run through the main user flows using only the keyboard to verify everything is reachable.

Tips for getting the most from Bolt

Describe the end state, not the steps. Instead of "first build the header, then build the sidebar, then build the main content", say "Build a dashboard with a sidebar navigation, a header with user menu and a main content area showing [data]." Bolt figures out the implementation — give it the requirement.

Export to GitHub early. Once your project has a working base, export to GitHub. This creates a real repository with a proper history. Continue developing in Bolt but commit to GitHub regularly. If Bolt ever generates something broken that is hard to recover from, you can revert to a known-good state.

Use the lock icon for files you do not want changed. Bolt has a lock feature for individual files. If you have customised a component and do not want the AI to touch it when making other changes, lock it. This prevents accidental overwrites.

Technical background

Bolt.new is built by StackBlitz, the company behind WebContainers — a technology that runs a full Node.js development environment inside a browser tab using WebAssembly. According to StackBlitz's official documentation, WebContainers allow Bolt to execute npm install, run build tools and serve web applications entirely client-side without a remote server. This architecture is what allows the instant preview experience.

Supported frameworks (verified April 2026)

Per Bolt's official site, supported frameworks include React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Remix, Astro, and vanilla HTML/CSS/JavaScript.

Token system

Bolt uses a token-based pricing model. Each AI generation consumes tokens. The free tier includes 1 million tokens per month with a 300K daily cap. Pro ($20/month) removes the daily cap. Tokens are not rolled over between months. Complex generations (large applications, many files) consume tokens faster than simple ones.

Database support

Bolt integrates with Netlify's built-in database, Supabase, Neon and other PostgreSQL providers. SQLite via Prisma works for simpler projects. The AI can set up and configure any supported database as part of the initial build.

Pricing (verified April 2026)

  • Free: 1M tokens/month, 300K daily cap, Bolt branding on deployed URLs, unlimited databases
  • Pro: $20/month — no daily cap, removes Bolt branding, custom domains
  • Teams: $40/user/month — team collaboration features
Primary sources cited in this guide
  • bolt.new — Official Bolt platform
  • stackblitz.com — StackBlitz (Bolt's parent company) and WebContainers documentation