
Bolt.new — User Guide
StackBlitz; full-stack from chat.
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.
Build a task management application
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
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.
The description contains specific functional requirements and technology stack, and the generated application is more in line with expectations.
Generate a web application with authentication
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
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.
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.
Modify app functionality through conversations
(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"
After each conversation, Bolt.new will modify the corresponding code,
Preview updates in real time,
You can iterate infinitely until you are satisfied.
Only describe one modification at a time to avoid confusion caused by multiple requirements at once.
Edit generated code directly
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
}
```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.
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.
One-click deployment to Netlify
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
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.
The free version of Netlify has certain restrictions on deployment, and commercial projects are recommended to use the paid version.
Compared with similar tools
| Tool | Strength | Best for | Pricing |
|---|---|---|---|
| Bolt.new This tool | The strongest full-stack application generation capability, integrated front-end and back-end | Requires complete full-stack application and rapid MVP development | Free version (limited)/paid version |
| v0 by Vercel | Higher quality front-end UI, shadcn/ui integration | Focus on front-end interface and React component generation | Free version / Pro $20/month |
| Replit AI | Support more languages and online collaboration | Learn programming and collaborate with multiple people to develop | Free version / Core $20/month |
| Cursor | Local development experience and deep understanding of the code base | Professional developer, complex project development | Free version / Pro $20/month |
Sources & references:
- Bolt.new official website (2025-03)
- StackBlitz official documentation (2025-03)