Vibe Coding · Lesson

App Builders: v0, Bolt & Lovable

Turn a prompt into a working app in the browser.

App Builders: v0, Bolt & Lovable is a free Vibe Coding lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vibe Coding learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

From Prompt to App in the Browser

What if you could type a sentence and watch a working app appear — no install, no setup? That's what app builders do. They run in your browser, take a prompt, and generate a live app you can see and click immediately.

The big three for vibe coding are v0, Bolt, and Lovable. They're the fastest way to go from idea to something real.

v0: UI from a Sentence

v0 (by Vercel) specializes in beautiful user interfaces. Describe a screen and it generates clean, modern UI components you can preview and tweak.

It's a favorite for landing pages, dashboards, and forms. You get polished design quickly, then refine it with follow-up prompts.

In v0 you might type:

"A pricing page with three plans (Free, Pro, Team), each in a card with a title, price, feature list, and a Sign Up button. Modern, clean, with a purple accent color."

Bolt: Full Apps That Run

Bolt (by StackBlitz) goes further — it builds a whole running app in the browser, including the logic, and shows it live with a built-in preview.

It can install packages, run the dev server, and even let you deploy. Great when you want a functional prototype, not just a pretty screen.

In Bolt you might type:

"Build a tip calculator: enter a bill amount and tip percentage, and show the tip and total. Make it look friendly and mobile-first."

Lovable: Apps with a Backend

Lovable aims at full products. It builds the frontend and can connect a database and login, so you get an app that stores real data.

Describe a small product and Lovable scaffolds the pieces — pages, data, and accounts — that you'd otherwise wire together by hand.

In Lovable you might type:

"A simple recipe-saving app. Users can sign up, add recipes with a title and ingredients, and see their saved recipes. Store the data so it persists."

The Live Preview Loop

The superpower of these tools is the instant preview. You prompt, the app updates on the right, and you react to what you see.

This visual feedback loop is pure vibe coding: you're steering by looking, not by reading code. See something off? Just say what to change.

Follow-up prompts you'd type after seeing the preview:

"Make the header bigger and center it."
"Change the button color to green."
"Add a footer with a copyright line."

Iterate by Conversation

You don't restart — you refine. Each follow-up prompt nudges the app closer to what you want. The tool remembers the project, so small requests build on each other.

Think of it as a conversation with a designer-developer who edits live as you talk.

"Looks great. Now add a second page that lists all submitted entries, and put a link to it in the header."

What They Generate

Under the hood these tools usually output modern web code — often React and Tailwind CSS. You don't need to understand all of it, but here's a tiny piece of plain JavaScript like the logic they'd create for a tip calculator.

function tipCalculator(bill, tipPercent) {
  const tip = bill * (tipPercent / 100);
  const total = bill + tip;
  return { tip: tip.toFixed(2), total: total.toFixed(2) };
}

console.log(tipCalculator(50, 20));

Exporting and Owning Your Code

A common worry: 'Am I locked in?' Mostly no. These tools let you export or sync your project to GitHub, so you own the code and can move it into Cursor or Claude Code later.

A great workflow: prototype fast in Bolt or Lovable, then export to an AI editor for deeper, precise work.

v0 vs Bolt vs Lovable

Quick mental model for when to grab which:

v0 — gorgeous UI and components; best for screens and design.
Bolt — full running frontend apps and prototypes; great for logic + preview.
Lovable — full products with data and login; best when you need a backend.

For a quick landing page, reach for v0. For a working mini-product, reach for Lovable or Bolt.

Don't Forget Replit

Worth knowing: Replit is a browser coding environment with its own AI Agent. It builds, runs, and hosts apps entirely online — no setup on your computer.

It's a strong all-rounder, especially if you want one place to build, run, and deploy without installing anything locally.

Try One Right Now

The best way to learn these is to use one. Open v0, Bolt, or Lovable and paste a single clear prompt. Watch it build, then send three follow-ups to make it yours.

Here's a starter you can drop into any of them.

"Build a simple 'daily quote' web page. Show one inspirational quote in large text, and a 'New Quote' button that shows a different quote from a list of five. Center everything and use a calm color palette."

Quick Check

You want a working mini-product with sign-up and a database that stores user data. Which tool is the most natural fit?

Recap: Prompt-to-App Builders

App builders are the fastest path from idea to live app:

v0 for beautiful UI, Bolt for running apps, Lovable for full products with data.
Replit lets you build, run, and host entirely online.
Use the live preview loop: prompt, look, refine.
Export to GitHub or an AI editor when you outgrow the browser.

Next: how to choose the right tool for any job.

Frequently asked questions

Is the “App Builders: v0, Bolt & Lovable” lesson free?

Yes — the full text of “App Builders: v0, Bolt & Lovable” is free to read here on the web, and the Vibe Coding course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vibe Coding course, upgrade to CoddyKit PRO.

What will I learn in “App Builders: v0, Bolt & Lovable”?

Turn a prompt into a working app in the browser. You practise Vibe Coding with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vibe Coding?

No prior experience is required. Vibe Coding on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “App Builders: v0, Bolt & Lovable” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vibe Coding lesson?

Yes. Every Vibe Coding lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vibe Coding