Overview

To get started, head over to lovable.dev and create an account.

Once registered, you’ll be able to create your first project. Simply enter an initial prompt to kick things off, and Lovable will do the rest!

There are several ways to get started with Lovable, depending on your preferences and resources:

1. Prompting Lovable’s prompt-based system makes app creation simple. Just describe what you want to build in the prompt box. The more specific you are, the better the results. Start with clear and detailed prompts. You can refine and adjust your project as you go. Example: “Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart.”

2. Templates Lovable offers templates to help you get started quickly on popular project types, such as dashboards, e-commerce sites, or social apps, for a quick setup. Once the template loads, use prompts to adjust features, add new elements, or fine-tune the design to match your vision.

3. Remix You can remix an existing public project or one of your own. Remixing allows you to reuse the current state of a project as a starting point and build upon it. It’s a great way to explore new ideas, make adjustments, or iterate with different changes while preserving the original version. Note that it is not possible to remix projects when Supabase is connected.

4. Using Figma If you have a design in Figma, take a screenshot of any part of it. You can paste the screenshot directly into Lovable or drag-and-drop the image file. Once you press Enter, Lovable will convert your design into functional code.

5. Sketching with Excalidraw Use Excalidraw or any similar tool to sketch your UI. Take a screenshot of your drawing, then paste or drag-and-drop it into Lovable. The platform will transform your sketch into working code.

6. Cloning a Website or Application If you want to replicate an existing webpage, take a screenshot using shortcuts like Cmd+Shift+4 on Mac or tools like the GoFullPage Chrome Extension. Paste or drag the screenshot into Lovable, and it will recreate the structure of the webpage in your project.

Each of these methods helps you kickstart your project with ease and flexibility.

The Knowledge Base in Lovable acts as your project’s blueprint, where you define details like functionality, design elements, and goals. To set it up, create new entries in the Knowledge Base section of your dashboard, organizing them into categories such as Project Overview, Key Features, or Design Guidelines.

You can link these entries directly to your prompts, ensuring clarity, consistency, and alignment with your project requirements. The Knowledge Base also serves as a collaborative tool for teams, streamlining communication and keeping everyone aligned.

Regularly update your entries as your project evolves to maintain relevance and ensure your app development stays on track.

At Lovable, we know that speed is essential when building AI-driven applications. But we also understand that stability and control are just as critical when iterating on your ideas. That’s why we’re excited to introduce Versioning V02—a major update that gives you greater flexibility, better tracking, and an improved workflow when managing changes in your projects.

With this release, we’ve reimagined versioning to make it seamless, intuitive, and reliable—so you can focus on building without losing track of your progress.

1. Auto-Scroll for a Smoother Flow: Messages will now automatically scroll to keep your workspace clean and uncluttered. This allows you to stay focused on the task at hand instead of manually managing previous responses.

2. Bookmarks for Your Key Edits: You can now save and favorite specific edits, making it effortless to revisit and restore critical iterations. No more digging through history—your best versions are always at your fingertips.

3. A More Intuitive Version History: We’ve redesigned the history panel to feel more familiar, much like the version history in Google Docs. This makes it easier to track changes and understand how your project has evolved over time.

4. Smarter Restores: Restoring a previous version is now handled as a new edit, similar to Git revert commits. This ensures that every change is transparent and trackable while keeping your workflow organized.

Visuals often speak louder than words. You can attach images directly to the chat to provide additional context for your prompts. This is particularly useful for illustrating ideas or concepts that are easier to show than describe.

Integrate your project with GitHub to iterate on your application seamlessly. You can make code changes in GitHub or your preferred IDE while keeping everything in sync with Lovable.

Supabase is a backend-as-a-service platform that integrates smoothly with Lovable to add powerful backend capabilities to your application.

In this video, you’ll get familiar with the Supabase dashboard and learn how to create your first project:

• Set Up Supabase Create an account on Supabase and create a new project.

• Link to Lovable In Lovable, go to Settings -> Connect Supabase and follow the steps.

• Manage Data Set up tables, manage user data, and configure email notifications.

After setting up your Supabase project, you’ll need to connect it to your Lovable project. This connection enables Lovable to leverage Supabase’s backend services seamlessly.

Supabase makes implementing user authentication simple and efficient. With just a few steps, you can add secure login and signup functionalities to your application.

Getting authentication right is a critical part of any developer’s workflow. When you’re juggling landing pages, database connections, and user login flows, the process can quickly become overwhelming. Luckily, Supabase provides a powerful yet simple approach to handle authentication—especially when paired with Lovable.

In this guide, we’ll walk you through building a landing page, connecting to Supabase, configuring authentication, and avoiding common pitfalls along the way.

To add Google authentication:

If your application requires data storage, Lovable can integrate with Supabase to store and manage your data effortlessly. Just define your requirements, and Lovable handles the rest.

Supabase Edge Functions allow you to add advanced capabilities to your application. Whether you need AI features, payment processing, or email integration, Edge Functions provide the flexibility to power up your app.

Get started with your first full-stack app on Lovable using this guide. For additional resources and inspiration, visit the Lovable YouTube channel, which features regular office hours recordings and other helpful content.

There are many ways to connect Stripe to Lovable, but the most straight-forward way is to utilize Stripe’s built in payment links. Use this resource to make sure you get this right!

You can add multiple different AI capabilities to your application like:

• OpenAI

• Gemini

When your project is ready, publish it to generate a shareable URL. This makes it easy to showcase your application or share it with collaborators and stakeholders.