Beginner

Getting Started with Lovable.dev

Create your account, build your first AI-generated application, navigate the workspace, and connect GitHub for version control.

Accessing Lovable

  1. Navigate to lovable.dev
  2. Click "Get Started" or "Sign Up"
  3. Create an account using GitHub, Google, or email
  4. You'll arrive at the project dashboard, ready to create your first app
💡
Good to know: Signing up with GitHub is recommended as it simplifies repository syncing later. Lovable can automatically push your generated code to a GitHub repository.

Your First Project

Let's build a simple app to see Lovable in action:

  1. Click "New Project" on your dashboard
  2. In the prompt area, describe your app:
Build a personal task manager with the following features:
- Add tasks with title, description, and priority (low, medium, high)
- View tasks in a clean card layout
- Mark tasks as complete with a checkbox
- Filter tasks by priority and completion status
- Beautiful, modern design with a gradient header
- Responsive for both desktop and mobile
  1. Click "Generate" and watch Lovable create your application
  2. The app appears in the live preview within seconds
  3. You can immediately interact with the generated app

Understanding the Workspace

The Lovable workspace has three main areas:

Chat Panel

  • Your conversation with the AI
  • Describe new features, request changes, or ask questions
  • Full conversation history is maintained

Code View

  • File explorer showing the project structure
  • Full code editor with syntax highlighting
  • See all generated files: components, pages, styles, and configuration
  • You can manually edit any file

Preview

  • Live preview of your running application
  • Updates in real-time as changes are made
  • Responsive testing with device size options

Editing with AI

Refine your app by continuing the conversation:

"Add a dark mode toggle in the top right corner"
"Change the priority badges to use colored dots instead of text"
"Add a search bar to filter tasks by title"
"Make the cards have a subtle hover animation"

Each instruction modifies the existing code. Lovable understands context from previous messages, so you can reference components by name or describe changes relative to what already exists.

Manual Code Editing

You can also edit code directly in the code view:

  • Click on any file in the file explorer to open it
  • Make your changes directly in the editor
  • The preview updates automatically
  • AI-generated and manual changes coexist — the AI is aware of your manual edits

Version History

Lovable maintains a version history of your project:

  • Each AI generation creates a new version
  • You can view previous versions and their changes
  • Revert to any previous version if needed
  • This acts as a safety net when experimenting with major changes

Connecting GitHub

  1. Go to your project settings
  2. Click "Connect GitHub"
  3. Authorize Lovable to access your GitHub account
  4. Choose to create a new repository or connect to an existing one
  5. Lovable automatically syncs your code on every change
✅
Pro tip: Connect GitHub early in your project. This gives you version control from the start, makes collaboration easier, and provides a backup of your code. You can clone the repo and continue development locally at any time.

💡 Try It: Build and Iterate

Create a project in Lovable and make at least three iterative changes. Try both AI-assisted editing (through chat) and manual code editing. Connect GitHub and verify your code appears in the repository.

Getting comfortable with the iterative workflow is essential for building great apps with Lovable!