How to Use Bolt.new to Build Web Apps 2026

How to Use Bolt.new to Build Web Apps 2026

You have an idea for a web app but don't want to spend weeks writing code. Bolt.new by StackBlitz lets you describe what you want in plain English and generates a working web app in minutes — complete with a live preview, editable code, and one-click deployment.

In this tutorial, you'll learn how to use Bolt.new for web apps from scratch. By the end, you'll have built and deployed a functional web application in under 30 minutes, even if you've never written a line of code.

What you'll build: A task manager web app with add, complete, and delete functionality. Time to complete: ~30 minutes. Cost: Free (no credit card required).

What You'll Need

Before you start, make sure you have the following:

• A modern browser — Chrome, Firefox, Safari, or Edge (any recent version works)
• A Bolt.new account — Sign up free at bolt.new with your Google or GitHub account
• No coding experience required — Bolt.new generates all the code from your text prompts
• An internet connection — Everything runs in your browser; no local installs needed

The free plan gives you 300,000 tokens per day (about 1 million per month), which is plenty for this tutorial. If you hit limits, check out Bolt.new pricing for plan details.

Step-by-Step Instructions

Step 1: Create Your Bolt.new Account

Head to bolt.new and click Sign Up. You can authenticate with Google or GitHub — both take seconds.

Once logged in, you'll land on the Bolt.new dashboard. This is your workspace where all projects live. The interface is clean: a prompt bar sits at the bottom, your app preview fills the right side, and the code editor sits on the left.

Why start here? Bolt.new runs entirely in the browser using WebContainers — StackBlitz's technology that simulates a full Node.js environment without installing anything. That means zero setup time.

Step 2: Write Your First Prompt

Click the prompt bar at the bottom of the screen. Type a clear, specific description of what you want to build. For this tutorial, enter:

Build a task manager web app. It should have an input field to add tasks, a list showing all tasks with checkboxes to mark them complete, and a delete button for each task. Use a clean, modern design with a blue and white color scheme.

Press Enter or click the send button. Bolt.new will process your prompt and start generating the app.

The AI interprets your description, selects an appropriate framework (typically React with Vite), and writes all the necessary files — components, styles, and configuration. You'll see the code appear on the left and a live preview render on the right within 30–60 seconds.

Step 3: Review the Generated App

Once Bolt.new finishes generating, take a moment to review what it built:

• Left panel: The code editor shows all project files. Look at the file tree to see the structure — you'll typically find App.tsx, component files, and a package.json.
• Right panel: The live preview shows your running app. Test it — add a task, check it off, delete it.
• Bottom panel: A terminal shows build output and any errors.

Don't worry if the design isn't perfect yet. You'll refine it in the next steps. The goal right now is to verify the core functionality works.

Caption: The Bolt.new workflow — from prompt to deployed web app.

Step 4: Customize the Design

Now let's make it look better. Click the prompt bar again and type:

Make the design more polished. Add a gradient header that says "My Tasks", use rounded cards for each task item, add a subtle shadow, and include an empty state message that says "No tasks yet — add one above!" when the list is empty.

Bolt.new will update the existing code with your design changes. The AI understands context, so it modifies the right files without starting over.

Tips for effective prompts:

• Be specific about visual changes — mention colors, spacing, shadows, and fonts by name
• Describe behavior clearly — "show a confirmation before deleting" works better than "make delete safer"
• Request one change at a time — complex multi-part prompts can confuse the AI

Step 5: Add Advanced Features

Your task manager works, but let's make it production-ready. Try these follow-up prompts one at a time:

1. Local storage persistence: "Save tasks to localStorage so they persist when the user refreshes the page."
2. Filter tabs: "Add filter tabs at the top: All, Active, and Completed. Clicking a tab filters the task list."
3. Task count: "Show a count of remaining incomplete tasks at the bottom of the list."

Each prompt builds on the existing code. After each change, test the app in the preview panel to make sure everything still works.

Caption: Iterative feature-building workflow in Bolt.new.

Step 6: Edit the Code Directly (Optional)

If you know some code, you can edit files directly in the built-in editor. Click any file in the tree on the left to open it. Changes save automatically and the live preview updates in real time.

This is useful for:

• Fixing small styling tweaks the AI missed
• Adding custom JavaScript logic
• Adjusting the HTML structure

You can also switch between the Code and Preview tabs at the top of the right panel to see a full-screen version of either.

Step 7: Deploy Your Web App

When you're happy with your app, deploying is straightforward:

1. Click the Deploy button in the top-right corner of the preview panel
2. Bolt.new builds your project and deploys it to a .bolt.new subdomain
3. You'll get a shareable URL like your-app-name.bolt.new

On the free plan, deployed sites include a "Built with Bolt" badge. On the Pro plan ($20/month), you can remove branding and connect custom domains. Check our Bolt.new review for a full feature breakdown.

Step 8: Export Your Code

Want full control? Export the entire project to your local machine:

1. Click the menu icon (three dots) in the top-right corner
2. Select Download Project
3. You'll get a ZIP file with all source code, package.json, and configuration files

You can then run the project locally with npm install && npm run dev. This is useful if you want to continue development in VS Code, deploy to Vercel or Netlify, or integrate with an existing codebase.

Pro Tips

1. Start with a detailed prompt, then iterate. The more context you give in your first prompt, the closer the initial output will be to what you want. Mention frameworks (React, Vue), styling preferences (Tailwind, CSS modules), and specific features upfront.

2. Use the chat history to your advantage. Bolt.new remembers your conversation. Instead of repeating context, reference previous changes: "Now add dark mode to the design we just created."

3. Break complex apps into pages. If you're building a multi-page app, describe each page separately. Start with the main page, then ask Bolt.new to add routing and additional views one at a time.

4. Watch your token usage. Each prompt consumes tokens. The free plan caps at 300,000 daily — enough for several iterations but not unlimited. Plan your prompts before typing to avoid wasting tokens on vague requests.

Troubleshooting

The app doesn't render or shows a blank screen

This usually means a build error. Check the terminal panel at the bottom for error messages. Common fixes:

• Ask Bolt.new: "Fix the build error in the terminal"
• Refresh the preview panel using the reload icon
• If the error persists, start a new project with a simpler prompt and build up gradually

Bolt.new stops responding or generates incomplete code

You may have hit your token limit. Check your usage in the account settings. On the free plan, you'll need to wait until the next day for your tokens to reset. Consider upgrading to Pro for higher limits — see our Bolt.new alternatives page if you want to compare options.

The generated design looks generic or "AI-generated"

Be more specific in your prompts. Instead of "make it look nice," describe exactly what you want: "Use a dark navy background (#1a1a2e), white text, and coral accent buttons (#ff6b6b). Add a hero section with a large heading and a CTA button." Reference real websites for style inspiration.

Features don't work after an update

Sometimes Bolt.new introduces bugs when making changes. If something breaks:

• Tell Bolt.new: "The [feature] stopped working after the last change. Fix it."
• Use the version history to revert to a working state
• Keep your prompts focused — one feature change at a time reduces errors

Next Steps

Now that you can build and deploy a web app with Bolt.new, here's where to go from here:

• Build something bigger. Try a portfolio site, a blog, or a simple e-commerce storefront. Each project teaches you how to write better prompts.
• Explore other AI app builders. If you want to compare options, read our Lovable vs Bolt.new comparison to see how they stack up.
• Learn to customize the code. Understanding the generated code lets you make precise edits that AI prompts can't always achieve. Start with basic HTML/CSS and work up to React components.
• Deploy to a custom domain. Upgrade to the Pro plan to remove Bolt branding and use your own domain name for a professional finish.

Frequently Asked Questions

Do I need to know how to code to use Bolt.new?

No. Bolt.new generates all the code from your text descriptions. You describe what you want in plain English, and the AI builds it. That said, basic HTML and CSS knowledge helps you make faster, more precise edits to the generated code.

What frameworks does Bolt.new support?

Bolt.new primarily generates apps using React with Vite, but it also supports Vue, Svelte, SvelteKit, Next.js, and vanilla JavaScript. The AI selects the best framework based on your prompt, though you can specify your preference in the initial description.

Can I use Bolt.new for production apps?

Yes, but with caveats. Bolt.new is excellent for prototypes, MVPs, and small-to-medium projects. For large-scale production apps, you'll likely need to export the code and add proper backend infrastructure, database management, and security hardening. Start with Bolt.new to validate your idea, then scale with traditional development.

Is Bolt.new free?

Bolt.new offers a free plan with 300,000 tokens per day and 1 million tokens per month. The Pro plan costs $20/month and includes 10 million monthly tokens, no daily cap, custom domains, and no branding. For team collaboration, the Team plan runs $30 per member per month.

Conclusion

Bolt.new removes the biggest barrier to building web apps: writing code from scratch. You describe your idea, the AI generates a working application, and you iterate until it's exactly what you want. In this tutorial, you went from zero to a deployed task manager in about 30 minutes.

The best way to learn is by building. Start with the task manager above, then challenge yourself with something more complex — a personal portfolio, a landing page, or a small SaaS tool. If you want to see how Bolt.new compares to similar tools, check out our full Bolt.new review and our guide to the best AI app builders in 2026.