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.

Lovable offers intuitive editing tools and undo functionality, giving you the freedom to experiment without worry. You can make direct edits, use prompts for adjustments, or leverage the Select tool for precise changes. If a change doesn’t work out, use the Undo button to reverse your actions, or explore the Version History to restore earlier versions of your project.

To test edits, use the Preview mode to see real-time changes and easily revert them if needed. For effective editing, make incremental changes, save major updates using versioning, and document key changes for team alignment. Lovable ensures a seamless editing experience, empowering you to refine your projects with confidence.

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.

Want to add images directly to your application? Simply upload them in the chat and explain to Lovable’s AI where and how you’d like them to appear in your project.

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.