Bolt.new

Bolt.new — User Guide

StackBlitz; full-stack from chat.

Visit website VPN may be required Freemium Sign-up required
Strengths
  • Generate a complete full-stack application (front-end + back-end + database)
  • Run directly in the browser, no local environment required
  • Supports mainstream technology stacks such as React, Vue, Svelte, and Node.js
  • Generated code can be modified and previewed in real time
  • One-click deployment to platforms such as Netlify
Best for
  • Quickly generate an MVP (minimum viable product)
  • Full stack web application prototyping development
  • Learn practical projects for full-stack development
  • Quickly build tool applications (such as calculators, converters)
  • Build a complete application with backend API

Build full-stack applications

Bolt.new can generate a complete application including front-end, back-end and data storage in one go.

Scenario

Build a task management application

Prompt example
Create a full-stack todo app with:


- React frontend with a clean UI


- Node.js/Express backend


- SQLite database for persistence


- Features: Add, edit, delete, mark complete


- Filter by status (All/Active/Completed)


- Due date support


- Priority levels (Low/Medium/High)


- Local storage fallback


Output / what to expect

Bolt.new generates a complete full-stack application:

  • React frontend (with state management)

  • Express REST API (CRUD interface)

  • SQLite database (automatically creates table structure)

  • Complete UI interaction

Runs directly in the browser and is ready to use.

Tips

The description contains specific functional requirements and technology stack, and the generated application is more in line with expectations.

Scenario

Generate a web application with authentication

Prompt example
Build a simple blog platform with:


- User authentication (register/login/logout)


- Create, read, update, delete blog posts


- Markdown support for post content


- Tags and categories


- Public posts visible to all, private posts for author only


- React + Vite frontend


- Express backend with JWT auth


Output / what to expect

Generate a blog platform containing a complete authentication system:

  • JWT login/registration process

  • Article CRUD operations

  • Markdown rendering

  • Permission control (public/private)

The code structure is clear and can be used as a reference for learning projects.

Tips

Bolt.new generates a relatively complete authentication process and is suitable for learning how to implement JWT authentication.

Modify and iterate

After the application is generated, you can continue to modify it through the dialogue, or you can edit the code directly.

Scenario

Modify app functionality through conversations

Prompt example
(Conversation continues after Bolt.new generates app)




"Add a dark mode toggle to the navigation bar"




Then:


"Add a search functionality to filter posts by title"




Then:


"Make the design more modern with card-based layout"
Output / what to expect

After each conversation, Bolt.new will modify the corresponding code,

Preview updates in real time,

You can iterate infinitely until you are satisfied.

Tips

Only describe one modification at a time to avoid confusion caused by multiple requirements at once.

Scenario

Edit generated code directly

Prompt example
In Bolt.new's code editor:
1. Find the file that needs to be modified (file tree on the left)
2. Edit the code directly
3. The preview on the right is updated in real time

For example, modify the color theme:
Modify the primary color in tailwind.config.js:
```js
colors: {
  primary: '#6366f1', // change to purple
}
```
Output / what to expect

After the code is modified, the preview on the right will be updated immediately.

You can see the real-time effect of color changes,

Similar to local development experience.

Tips

Bolt.new supports direct editing of code without relying entirely on AI generation. The two methods can be used in combination.

Deploy to production environment

Applications generated by Bolt.new can be deployed to platforms such as Netlify with one click.

Scenario

One-click deployment to Netlify

Prompt example
Deployment steps:


1. Click the "Deploy" button in Bolt.new


2. Select "Deploy to Netlify"


3. Authorize Netlify account


4. Wait for the deployment to complete (about 1-2 minutes)


5. Obtain a URL accessible from the public network




After deployment you can:


- Bind custom domain name


- Set environment variables


- View deployment logs
Output / what to expect

After deployment completes you get something like

The URL of https://your-app.netlify.app,

You can share it directly with others for access.

No need to manage servers.

Tips

The free version of Netlify has certain restrictions on deployment, and commercial projects are recommended to use the paid version.

Compared with similar tools

ToolStrengthBest forPricing
Bolt.new This toolThe strongest full-stack application generation capability, integrated front-end and back-endRequires complete full-stack application and rapid MVP developmentFree version (limited)/paid version
v0 by VercelHigher quality front-end UI, shadcn/ui integrationFocus on front-end interface and React component generationFree version / Pro $20/month
Replit AISupport more languages ​​and online collaborationLearn programming and collaborate with multiple people to developFree version / Core $20/month
CursorLocal development experience and deep understanding of the code baseProfessional developer, complex project developmentFree version / Pro $20/month

Sources & references: