Beginner

Getting Started with Bolt.new

Create your account, build your first project from a text description, and learn to navigate the Bolt.new workspace.

Accessing Bolt.new

  1. Navigate to bolt.new in your browser
  2. Click "Sign up" or "Get started"
  3. Create an account using GitHub, Google, or email
  4. You'll land on the main prompt screen, ready to describe your first app
💡
Good to know: You can start using Bolt.new without an account for quick experiments. However, creating an account lets you save projects, access your history, and deploy applications.

Your First Project

Let's build a simple app to understand the workflow:

  1. In the main prompt area, type a description of your app:
Build a personal expense tracker with the following features:
- Add expenses with amount, category, and date
- View a list of all expenses
- Filter by category
- Show total spending
- Clean, modern design with a blue color scheme
  1. Press Enter or click "Send"
  2. Watch as Bolt generates the code — you'll see file creation, dependency installation, and build steps in real-time
  3. The live preview appears on the right side of the screen
  4. Interact with your app directly in the preview pane

Understanding the Workspace

The Bolt.new workspace is split into three main areas:

Chat Panel (Left)

  • Your conversation with the AI
  • Type descriptions, request changes, and ask questions
  • View the history of all changes and iterations

Code Editor (Center)

  • Full file explorer showing your project structure
  • Syntax-highlighted code editor for viewing and manually editing files
  • Terminal output showing build steps and errors

Preview Pane (Right)

  • Live preview of your running application
  • Refreshes automatically when code changes
  • Includes browser-like controls (URL bar, refresh, open in new tab)

Iterating with AI

The real power of Bolt.new is iterative development. After your initial generation, you can refine your app through conversation:

# Example iteration prompts:
"Add a pie chart showing spending by category"
"Change the color scheme to dark mode with green accents"
"Add the ability to edit and delete existing expenses"
"Make it responsive for mobile devices"
"Add local storage so expenses persist between sessions"

Each prompt causes Bolt to modify the existing code. You can see the changes reflected in both the code editor and the live preview.

Saving Projects

  • Projects are automatically saved to your account as you work
  • Access saved projects from your dashboard
  • Each project maintains its full conversation and code history
  • You can return to any project and continue iterating

Forking and Sharing

  • Fork: Create a copy of any project to experiment without affecting the original
  • Share: Generate a shareable link so others can view or fork your project
  • Export: Download the project files or push to GitHub for further development
✅
Pro tip: When iterating, be specific about what you want to change. Instead of "make it better," try "increase the font size of the header to 24px and add a subtle shadow to the card components." Specific instructions produce more predictable results.

💡 Try It: Build and Iterate

Create a project in Bolt.new (try a simple portfolio page or a calculator app). After the initial generation, make at least three iterative changes using the chat. Notice how each change builds on the previous state.

Iterative prompting is the key skill for getting great results from Bolt.new!