Beginner

Getting Started with Bolt.new

Bolt.new gets you from idea to running code in about 60 seconds. This guide walks through an effective workflow for building with Bolt, including tips specific to its in-browser development environment.

Step 1: Write a Good First Prompt

Bolt.new works best when the first prompt specifies the tech stack explicitly. Unlike Lovable, you have full control over which framework and tools are used.

"Build a Next.js 14 app with TypeScript and Tailwind CSS. It should be a personal finance tracker where users can log expenses by category (food, transport, entertainment, other), see a monthly summary, and view a chart of spending by category. Use local storage to persist data - no backend needed."

Specifying the framework avoids Bolt choosing React by default when you want Next.js, Vue, or Svelte.

Step 2: Review the Build

Bolt installs npm packages and starts the dev server. Watch the terminal pane for errors - if the build fails, Bolt will usually detect it and offer to fix it automatically.

The preview pane shows the running app. Reload it if it does not update after the build completes.

Step 3: Edit Code Directly (Optional)

Unlike Lovable, Bolt shows the full file tree. You can click any file to open it in the built-in editor and make changes manually. This is particularly useful for:

Small tweaks that do not need AI (changing a colour, adjusting spacing)
Reviewing what code was generated before building on top of it
Fixing a specific line the AI got wrong without regenerating the whole file

Step 4: Iterate

Add features or fix issues via the AI chat. Bolt applies changes incrementally to the existing files - it does not regenerate everything from scratch. This means large projects stay coherent over many iterations.

Token budget

Each AI edit consumes tokens. Large codebases consume more tokens per edit because Bolt includes more context. Monitor your monthly token usage in the dashboard - on the free tier, 1M tokens runs out faster than you expect on a moderately complex project.

Using the Terminal

Bolt's terminal is a real Unix shell running inside WebContainers. You can:

# Install additional packages
npm install date-fns recharts

# Run a script
npm run generate-types

# Check for type errors
npx tsc --noEmit

Not all npm packages work in WebContainers - packages that require native binaries or OS-level access will fail. Most pure JavaScript and TypeScript packages work fine.

Step 5: Deploy

Bolt.new offers several deployment options:

Netlify deploy button - one-click deployment directly from Bolt UI to Netlify
Download as zip - download the project and deploy anywhere
GitHub push - push to GitHub, then deploy from there via Vercel, Netlify, or any CI/CD
StackBlitz Projects - stay within StackBlitz ecosystem for a shareable live URL

Practical Tips

Specify your framework in the first prompt to avoid getting React when you want Next.js
For backend needs, ask Bolt to use Supabase or Firebase - both have JS SDKs that work in WebContainers
Use the terminal to verify package installations if the build has dependency errors
Export to GitHub early - local edits and AI edits can conflict; GitHub is the source of truth
For larger projects, use the "Explain this file" feature to understand the generated code before extending it