How to Build a Full-Stack App with Bolt.new

Use Bolt.new to generate a complete app that runs in the browser, edit files inline, and deploy without leaving the tab.

9 minBeginner

Visit Bolt

Bolt.new from StackBlitz runs a full development environment in your browser using WebContainers, so it can install packages, run a dev server, and show you a live preview without any local setup. It is great when you want a real Node project you can also edit by hand. This guide builds a small app and deploys it.

What you need

A browser tab open at bolt.new
A free StackBlitz account to save and deploy projects
An app idea with a clear core feature
About 15 minutes

Step 1: Prompt Bolt to scaffold the project

Type your idea into the Bolt prompt box. Bolt picks a sensible stack, often Vite with React, writes the files, installs dependencies, and boots the dev server, all visible in real time.

bolt.new - prompt

bolt.new

------------------------------------------

> Build an expense splitter where I add people

and a bill amount, and it shows who owes what.

[ Submit ]

Bolt scaffolds a real Node project from one prompt.

Step 2: Watch the install and dev server boot

Bolt shows a terminal as it installs packages and starts the server. When the preview loads on the right, the app is live inside the browser sandbox.

bolt - WebContainer

$npm install

added 214 packages in 6s

$npm run dev

VITE v5.4.0 ready in 412 ms

Local: http://localhost:5173/

Step 3: Edit code by hand or by prompt

Unlike pure chat tools, Bolt gives you the full file tree and an editor. You can fix a value directly in a file, or ask Bolt to make the change in chat. Both update the live preview instantly.

Bolt - editor

Explorer

index.html

src/App.tsx

src/Split.tsx

package.json

src/App.tsx

1function App() {

2 const [people, setPeople] = useState<string[]>([]);

3 const [total, setTotal] = useState(0);

4 const share = people.length ? total / people.length : 0;

5 return <Split people={people} share={share} />;

Full file tree plus an editable code pane.

Lock files you do not want changed

Bolt lets you target specific files in a prompt, for example 'only change Split.tsx'. Naming the file keeps the agent from rewriting parts of the app you are happy with.

Step 4: Deploy from inside Bolt

Click Deploy in the top bar. Bolt connects to Netlify and ships your project, returning a public URL. You can claim the deploy to your own Netlify account to manage it later.

chat prompt

Add a reset button that clears all people and the total, and deploy the app.

Result

You built and shipped a working expense splitter with a real Vite project behind it, editable both by chat and by hand, and deployed to a public URL through Netlify, all without installing anything locally.