Module 1: Welcome to Lovable
Lovable is a full-stack AI development platform for building, iterating on, and deploying web applications with natural-language instructions. It creates real, editable code and can manage the frontend, backend, database, authentication, integrations, testing, security checks, and publishing workflow.
This course was reviewed against the official Lovable documentation on July 18, 2026.
Build alongside this lesson: Open Lovable and create your first project.
Learning goals
By the end of this module, you will be able to:
- Explain what Lovable does and what it does not do
- Distinguish an account, workspace, project, preview, and published app
- Navigate the dashboard and project editor
- Create a small first project
- Use version history and understand that publishing is a separate step
1. How Lovable works
You describe an outcome. Lovable plans or implements it, generates code, and shows the result in a live preview. You can then refine the app with more prompts, direct preview edits, code edits, or changes from a synced Git repository.
Lovable is focused on web applications. It can build responsive web experiences that work well on phones, but it does not generate native iOS or Android apps.
Current Lovable projects can use different frontend stacks:
- New projects created from May 13, 2026 use TanStack Start with server-side rendering by default, except on Enterprise plans.
- Older projects use React and Vite and continue to work normally.
- Tailwind CSS is commonly used for styling.
Do not assume every Lovable project has the same structure. When working with code or deploying elsewhere, inspect the project's package.json and existing configuration.
2. Core terms
| Term | Meaning |
|---|---|
| Account | Your personal Lovable identity and sign-in |
| Workspace | The home for projects, members, billing, settings, and shared connections |
| Project | One app and its code, chat history, settings, preview, and deployment state |
| Prompt | An instruction or question sent to Lovable |
| Build mode | The mode that changes code and verifies work; some docs also call this Agent mode |
| Plan mode | A read-only reasoning mode for questions, investigation, and implementation plans |
| Preview | The current working version inside the editor |
| Published app | A deployed snapshot available at a live URL |
| Lovable Cloud | Managed hosting and backend services including database, auth, storage, functions, jobs, secrets, logs, and AI |
| Knowledge | Persistent workspace or project instructions that Lovable reads when working |
3. The dashboard
The dashboard is the starting point for new projects and the home for existing ones. Its prompt input can accept typed text, voice, images, files, screenshots, references, and supported connectors.
From the dashboard you can:
- Start a project from a prompt
- Open recent projects
- Search and organize projects
- Switch workspaces
- Manage connectors, members, settings, plans, and usage
- Review notifications and product updates
Inside a project, the main working areas are chat, preview, Cloud, code, project settings, Share, and Publish. Some controls move into menus on narrow screens.
4. Your first project
Open Lovable and create a new project with this prompt:
Build a responsive one-page personal reading list.
Include:
- A header with the title "My Reading List"
- Three book cards with real example titles and authors
- A status filter for Want to Read, Reading, and Finished
- A calm editorial style with strong contrast and readable typography
- Useful empty, hover, and mobile states
Use local sample data only. Do not add authentication or a database yet.When the first build finishes:
- Check the desktop and mobile previews.
- Click each control and note what is functional versus decorative.
- Ask Build mode to fix one specific issue.
- Open version history and identify the two edits.
- Do not publish yet.
5. A reliable beginner workflow
Use this loop throughout the course:
- Define the user and the main action.
- Use Plan mode when the problem is unclear or risky.
- Make one meaningful change in Build mode.
- Review the diff and preview.
- Test the behavior that changed.
- Revert or refine if needed.
- Publish only after testing and security review.
Important boundaries
- Preview changes are not automatically pushed to the published app. Use Publish, then Update for later releases.
- Project access and published website access are separate settings.
- AI-generated code can contain bugs or insecure assumptions. You still need to test and review it.
- Never paste secret API keys into frontend code or ordinary prompts. Use managed secrets and server-side functions.
- Features and plan limits change. Check the live documentation before making a purchase or launch decision.
Practice checkpoint
You are ready for Module 2 when you can:
- Find your workspace and project settings
- Switch between desktop and mobile preview
- Explain the difference between preview and published app
- Locate version history
- Describe the difference between Plan mode and Build mode