├── .gitignore
├── README.md
├── Screenshot2025-04-04at12.11.55PM.png
├── Screenshot2025-04-24at9.11.46AM.png
├── assets
├── connect-to-github.mp4
├── css
│ └── styles.css
├── favicon-32x32.png
├── gpt-engineer-welcome-screen.png
├── improve.mp4
├── lovable-2x-logo.png
├── npm-example-using-pangea-dnd.png
├── opengraph-image.png
├── revert.mp4
├── share-icon.png
├── share-preview.png
├── supabase-logo-icon.png
├── supabase.png
├── sync-commits.mp4
├── tech-stacks-updates.mp4
├── using-custom-fonts-example.png
├── using-images-github-commiting.png
├── using-images-github-selecting.png
├── using-images-github-upload.png
├── using-videos-github-commiting.png
├── using-videos-github-selecting.png
└── videos
│ └── video-publish-republish.mp4
├── changelog.mdx
├── chat-mode-edit.png
├── chat-mode-switch.png
├── docs.json
├── faq.mdx
├── favicon-new.svg
├── features
├── deploy.mdx
├── dev-mode.mdx
├── figma-to-lovable.mdx
├── introduction.mdx
├── knowledge.mdx
├── labs.mdx
├── launched.mdx
├── modes.mdx
├── npm-packages.mdx
├── precision-edit.mdx
├── security.mdx
└── visual-edit.mdx
├── glossary.mdx
├── images
├── 21stdev.png
├── CleanShot2025-05-02at15.04.42@2x.png
├── ConnectLovabletoStripe(1).png
├── Filtering-of-projects.png
├── LovableLaunchedfromFigma.png
├── Screenshot2025-04-23at8.16.42PM.png
├── Screenshot2025-05-30at09.21.22.png
├── Screenshot2025-05-30at09.29.08.png
├── Screenshot2025-05-30at09.30.34.png
├── Screenshot2025-05-30at09.49.21.png
├── Supabase-api-key-clerk.png
├── Twitterpost-1.png
├── ai-assistant-make.png
├── animation.png
├── apollo-make-lovable.png
├── asana-clone-lovable.png
├── audience-resend.png
├── call-customer-make.png
├── categorization-community-projects.png
├── change-workspace.png
├── chat-mode-switch.png
├── chat-mode.jpg
├── cleanshot_2025-05-01_at_11.png
├── cleanshot_2025-05-01_at_12.png
├── clerk-api-key.png
├── clerk-email-templates.png
├── clerk-organization-create.png
├── clerk-organization-members.png
├── clerk-waitlist-pending.png
├── clerk-waitlist.png
├── component.png
├── confirmation-email-submission-resend.png
├── connect-entri.png
├── contact-form-crm-make.png
├── course-creation-ai-2.png
├── course-creation-ai.png
├── course-dashboard.png
├── course-voice-ai.png
├── create-clerk-application.png
├── create-workspace-lovable.png
├── crm-kanban-make.png
├── crm-make.png
├── crm-resend-email.png
├── custom-domain-lovable.png
├── customize-email-resend.png
├── dev-mode.png
├── dns-provider.png
├── dns-record.png
├── email-resend-form.png
├── github-lovable.png
├── github-lovable.webp
├── hero-section.png
├── history.png
├── impersonate-user-clerk.png
├── implement-plan.png
├── invite-collaborator.png
├── invite-lovable-2.png
├── invite-lovable.png
├── jwt-template-clerk-configuration.png
├── jwt-template-clerk.png
├── landing-page-lovable-project.png
├── launched.png
├── lovable-app-overview.png
├── lovable-dashboard.png
├── lovable-labs.png
├── lovable-prompting.png
├── lovable-stripe.webp
├── lovable-support.png
├── lovable-two-point-zero.png
├── make-enrich.png
├── make-hero.png
├── make-supabase-automation.png
├── menu-project.png
├── mobile-responsive.png
├── organization-management-clerk.png
├── pricing-plan-lovable.png
├── project-change-workspace.png
├── project-setting.png
├── publish-lovable.png
├── redesign-history.jpeg
├── replicate-image.png
├── replicate-playground.png
├── replicate-real-time.png
├── restore.png
├── select-plan-workspace.png
├── send-batch-emails-gdpr-resend.png
├── setting.png
├── sms-code-verification.png
├── sql-editor-supabase.png
├── stripe-lovable-plan.png
├── subscription-newsletter-resend.png
├── supabase-clerk-integration-doc.png
├── supabase-clerk.png
├── supabase-resend-email.png
├── supabase-tasks-table.png
├── update-publish-button.png
├── upgrade-plan.png
├── vapi-make-automation.png
├── vapi-make.png
├── versioning.png
├── versioningcopy2.png
├── visual-edit-image.png
├── visual-edit-replace.png
├── waitlist-component-clerk.png
├── webhook-apollo-webhook-make.png
├── webhook-lovable-make.png
├── what-is-clerk.png
└── workspace-setting.png
├── integrations
├── 21stdev-integration.mdx
├── ai-integration.mdx
├── chrome-extensions.mdx
├── clerk.mdx
├── git-integration.mdx
├── introduction.mdx
├── make.mdx
├── prompt-integrations.mdx
├── replicate.mdx
├── resend.mdx
└── supabase.mdx
├── introduction.mdx
├── invite-lovable-2.png
├── knowledge-project-lovable.png
├── logo-new-dark.svg
├── logo-new-light.svg
├── logo
├── dark.svg
└── light.svg
├── logos.mdx
├── lovable-editor-v2.png
├── lovable-helper.png
├── lovable-prompts.png
├── navigation-menu.png
├── prompt2mvp.jpg
├── publish-button.png
├── publish.png
├── published-link-lovable.png
├── security-scan-lovable.png
├── snippets
└── discord.mdx
├── tips-tricks
├── community.mdx
├── custom-domain.mdx
├── custom-fonts.mdx
├── inspiration.mdx
├── mobile-store.mdx
├── multiple-users.mdx
├── prompting-debugging.mdx
├── prompting-library.mdx
├── prompting-one.mdx
├── seo.mdx
├── setting-up-payments.mdx
├── troubleshooting.mdx
├── using-images.mdx
└── using-videos.mdx
├── use-case
├── landing-page.mdx
├── prototype.mdx
└── saas.mdx
└── user-guides
├── best-practice.mdx
├── from-idea-to-app.mdx
├── messaging-limits.mdx
├── quickstart.mdx
├── support-policy.mdx
├── teams.mdx
└── video-tutorials.mdx
/.gitignore:
--------------------------------------------------------------------------------
1 | site
2 | .aider*
3 |
4 | # Local Netlify folder
5 | .netlify
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # These docs are built with Mintlify
2 |
3 | To install Mintlify locally
4 |
5 | ```
6 | npm i -g mintlify
7 | ```
8 |
9 | To test your changes
10 |
11 | ```
12 | mintlify dev
13 | ```
14 |
15 | ## Legacy Netlify
16 |
17 | docs.gptengineer.app redirects to docs.lovable.dev - toml file with this configuration for the old netlify site is in the branch `netlify-legacy-for-redirect`
18 |
--------------------------------------------------------------------------------
/Screenshot2025-04-04at12.11.55PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/Screenshot2025-04-04at12.11.55PM.png
--------------------------------------------------------------------------------
/Screenshot2025-04-24at9.11.46AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/Screenshot2025-04-24at9.11.46AM.png
--------------------------------------------------------------------------------
/assets/connect-to-github.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/connect-to-github.mp4
--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | .supabase {
2 | color: #59cf8c;
3 | }
--------------------------------------------------------------------------------
/assets/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/favicon-32x32.png
--------------------------------------------------------------------------------
/assets/gpt-engineer-welcome-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/gpt-engineer-welcome-screen.png
--------------------------------------------------------------------------------
/assets/improve.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/improve.mp4
--------------------------------------------------------------------------------
/assets/lovable-2x-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/lovable-2x-logo.png
--------------------------------------------------------------------------------
/assets/npm-example-using-pangea-dnd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/npm-example-using-pangea-dnd.png
--------------------------------------------------------------------------------
/assets/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/opengraph-image.png
--------------------------------------------------------------------------------
/assets/revert.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/revert.mp4
--------------------------------------------------------------------------------
/assets/share-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/share-icon.png
--------------------------------------------------------------------------------
/assets/share-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/share-preview.png
--------------------------------------------------------------------------------
/assets/supabase-logo-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/supabase-logo-icon.png
--------------------------------------------------------------------------------
/assets/supabase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/supabase.png
--------------------------------------------------------------------------------
/assets/sync-commits.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/sync-commits.mp4
--------------------------------------------------------------------------------
/assets/tech-stacks-updates.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/tech-stacks-updates.mp4
--------------------------------------------------------------------------------
/assets/using-custom-fonts-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/using-custom-fonts-example.png
--------------------------------------------------------------------------------
/assets/using-images-github-commiting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/using-images-github-commiting.png
--------------------------------------------------------------------------------
/assets/using-images-github-selecting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/using-images-github-selecting.png
--------------------------------------------------------------------------------
/assets/using-images-github-upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/using-images-github-upload.png
--------------------------------------------------------------------------------
/assets/using-videos-github-commiting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/using-videos-github-commiting.png
--------------------------------------------------------------------------------
/assets/using-videos-github-selecting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/using-videos-github-selecting.png
--------------------------------------------------------------------------------
/assets/videos/video-publish-republish.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/assets/videos/video-publish-republish.mp4
--------------------------------------------------------------------------------
/chat-mode-edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/chat-mode-edit.png
--------------------------------------------------------------------------------
/chat-mode-switch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/chat-mode-switch.png
--------------------------------------------------------------------------------
/docs.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://mintlify.com/schema.json",
3 | "name": "Lovable Documentation",
4 | "theme": "mint",
5 | "logo": {
6 | "dark": "/logo-new-dark.svg",
7 | "light": "/logo-new-light.svg"
8 | },
9 | "favicon": "/favicon-new.svg",
10 | "colors": {
11 | "primary": "#0095FF",
12 | "light": "#1AA3FF",
13 | "dark": "#0084E6"
14 | },
15 | "topbarLinks": [
16 | {
17 | "name": "Support",
18 | "url": "mailto:support@lovable.dev"
19 | }
20 | ],
21 | "topbarCtaButton": {
22 | "name": "App",
23 | "url": "https://lovable.dev"
24 | },
25 | "anchors": [
26 | {
27 | "name": "Community",
28 | "icon": "discord",
29 | "url": "https://discord.gg/lovable-dev"
30 | },
31 | {
32 | "name": "Status",
33 | "icon": "signal",
34 | "url": "https://status.lovable.dev/"
35 | },
36 | {
37 | "name": "Product Announcement",
38 | "icon": "newspaper",
39 | "url": "https://lovable.dev/blog?category=announcements"
40 | },
41 | {
42 | "name": "Request Feature",
43 | "icon": "rocket",
44 | "url": "https://feedback.lovable.dev/"
45 | },
46 | {
47 | "name": "Youtube",
48 | "icon": "film",
49 | "url": "https://www.youtube.com/@lovable-labs/"
50 | }
51 | ],
52 | "navigation": {
53 | "dropdowns": [
54 | {
55 | "dropdown": "Documentation",
56 | "icon": "book-open",
57 | "groups": [
58 | {
59 | "group": "Introduction",
60 | "pages": [
61 | "introduction",
62 | "faq",
63 | "user-guides/messaging-limits",
64 | "user-guides/teams"
65 | ]
66 | },
67 | {
68 | "group": "Features",
69 | "pages": [
70 | "user-guides/quickstart",
71 | "features/modes",
72 | "features/figma-to-lovable",
73 | "features/visual-edit",
74 | "features/knowledge",
75 | "features/dev-mode",
76 | "features/labs",
77 | "features/deploy",
78 | "tips-tricks/custom-domain",
79 | "features/launched",
80 | "features/security"
81 | ]
82 | },
83 | {
84 | "group": "Integrations",
85 | "pages": [
86 | "integrations/introduction",
87 | "integrations/git-integration",
88 | "integrations/supabase",
89 | "tips-tricks/setting-up-payments",
90 | "integrations/resend",
91 | "integrations/clerk",
92 | "integrations/make",
93 | "integrations/replicate",
94 | "integrations/ai-integration",
95 | "integrations/21stdev-integration"
96 | ]
97 | },
98 | {
99 | "group": "Tips & tricks",
100 | "pages": [
101 | "user-guides/from-idea-to-app",
102 | "user-guides/best-practice",
103 | "tips-tricks/troubleshooting",
104 | "tips-tricks/mobile-store",
105 | "tips-tricks/seo",
106 | "tips-tricks/using-images",
107 | "tips-tricks/using-videos",
108 | "integrations/chrome-extensions",
109 | "tips-tricks/custom-fonts",
110 | "tips-tricks/community",
111 | "user-guides/support-policy",
112 | "features/npm-packages",
113 | "glossary"
114 | ]
115 | },
116 | {
117 | "group": "Prompt Engineering",
118 | "pages": [
119 | "tips-tricks/prompting-one",
120 | "tips-tricks/prompting-library",
121 | "tips-tricks/prompting-debugging",
122 | "integrations/prompt-integrations"
123 | ]
124 | },
125 | {
126 | "group": "Use Cases",
127 | "pages": [
128 | "tips-tricks/inspiration",
129 | "user-guides/video-tutorials",
130 | "use-case/landing-page",
131 | "use-case/prototype",
132 | "use-case/saas"
133 | ]
134 | }
135 | ]
136 | },
137 | {
138 | "dropdown": "Changelog",
139 | "icon": "clock",
140 | "pages": [
141 | "changelog"
142 | ]
143 | }
144 | ]
145 | },
146 | "footerSocials": {
147 | "x": "https://x.com/lovable_dev",
148 | "github": "https://github.com/lovablelabs",
149 | "linkedin": "https://linkedin.com/company/lovable-dev"
150 | },
151 | "seo": {
152 | "metatags": {
153 | "og:image": "/assets/opengraph-image.png"
154 | }
155 | },
156 | "redirects": [
157 | {
158 | "source": "/user-guides/credits",
159 | "destination": "/user-guides/messaging-limits"
160 | }
161 | ]
162 | }
--------------------------------------------------------------------------------
/favicon-new.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/features/deploy.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Deploy"
3 | description: "Learn how to deploy your web applications with Lovable."
4 | icon: "rocket"
5 | ---
6 |
7 | Once your web app is ready, you can **deploy it** and share it with the world. You also have the option to **share a work-in-progress version** to gather feedback before going live. Lovable makes it simple to publish, iterate, and distribute your applications with just a few clicks.
8 |
9 |
10 | Your published app will be accessible to anyone with the link. Make sure
11 | you're ready to share before publishing\!
12 |
13 |
14 | ## Publishing your app
15 |
16 | 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.
17 |
18 |
19 |
20 | ### How to Publish Your App
21 |
22 |
23 |
24 | In the top right corner of the **editor view**, click the **Publish** button (globe icon).
25 |
26 | 
27 |
28 |
29 | A dialog box will appear with options to **publish your app**.
30 |
31 |
32 | Click the **Publish** button to start the deployment process. During this time, the button will display **Publishing**.
33 |
34 | 
35 |
36 |
37 | Once deployment is complete, you'll see a **Update** button for future updates.
38 |
39 |
40 | Easily surface security vulnerabilities in your app before publishing with Lovable’s new Security Scan feature. You will find the results of the scan in the publish dialog for Supabase-enabled apps.
41 |
42 | 
43 |
44 |
45 | Your application is now **live**, and you can access it via the provided link.
46 |
47 |
48 | 1. The publishing process typically takes less than a minute. You'll receive a
49 | notification once it's complete.
50 | 2. We've added an option in the project settings to **show or hide the Lovable badge** on your deployed app. You can customize this setting before publishing.
51 |
52 |
53 |
54 |
55 | **Use previewing for iterative development**
56 |
57 | - Previewing is very handy as it allows you and others to view the latest changes without affecting the live, published version of your application.
58 | - We've noticed users using it for iterative development and getting real-time feedback, as well as for collaborative reviews and testing before final deployment.
59 |
60 | Previewing allows you to **see your latest changes** without affecting the live, published version.
61 |
62 | To preview:
63 |
64 | 1. Open the **Publish** dialog.
65 | 2. Locate the **Preview** section.
66 | 3. Click the generated **preview link** to view or share your work-in-progress updates.
67 |
68 | The preview link is generated instantly and can be shared with team members for feedback.
69 |
70 | 
71 |
72 |
73 | If you want to rename the subdomain or your project name:
74 |
75 | 1. Go to **Settings**.
76 | 2. Choose a better name under the project name section.
77 | 3. Click **Rename Project**.
78 | 4. Just remember to **republish** to update the subdomain and reflect changes publicly.
79 |
80 |
81 | If you would like to connect to a custom domain, [this is the best way to do it](https://docs.lovable.dev/tips-tricks/custom-domain).
82 |
83 |
--------------------------------------------------------------------------------
/features/dev-mode.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Dev Mode"
3 | description: "View & Edit your project’s code directly in Lovable"
4 | icon: "code"
5 | ---
6 |
7 | 
8 |
9 | Previously, viewing your code required connecting your Lovable project to [GitHub](https://docs.lovable.dev/integrations/git-integration).
10 |
11 | With Dev Mode you can now view & edit the full code repository backing your Lovable project directly in the Lovable project editor.
12 |
13 | [More on this here](https://x.com/lovable_dev/status/1895500151889768596).
14 |
15 | 
16 |
17 |
18 | Code editing in Dev Mode is available exclusively to paid users.
19 |
20 |
21 | [More on this here.](https://x.com/lovable_dev/status/1907816567947096341)
--------------------------------------------------------------------------------
/features/figma-to-lovable.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Figma to Lovable"
3 | description: "Export Figma designs directly into Lovable."
4 | icon: "figma"
5 | ---
6 |
7 | You can now export Figma designs directly to Lovable using Builder.io's native integration. No devs needed. This guide shows you how to structure your design, export it, and turn it into a full-stack app—all in one smooth flow.
8 |
9 | ## Why This Integration Changes Everything
10 |
11 | Designers no longer have to stop at mockups.
12 |
13 | With Builder.io, you can transform Figma designs into clean, structured code.
14 |
15 | With Lovable, you turn that code into functional, full-stack apps—using AI.
16 |
17 | Figma ➜ Builder.io ➜ Lovable ➜ App
18 |
19 | ## Step-by-Step: Figma to Full-Stack App
20 |
21 |
22 |
23 |
24 |
25 | For smooth exporting, your Figma file needs to be well-organized. Here's how to prepare:
26 |
27 | #### Use Auto-Layout (Required for Precise Mode)
28 |
29 | - Apply Auto-Layout to all parent containers.
30 | - Use proper **padding, spacing, and resizing** rules.
31 | - Set horizontal/vertical resizing for responsive layouts.
32 |
33 | #### Name Your Layers Clearly
34 |
35 | - Use names like `Header`, `CTA Button`, `Nav Bar`—not `Frame 23`.
36 | - Avoid symbols and nested clutter.
37 | - Group similar components logically.
38 |
39 | #### Build Reusable Components
40 |
41 | - Use consistent styling (fonts, colors, etc.).
42 | - Turn repeated elements into **Figma components**.
43 |
44 | #### Think in Design Systems
45 |
46 | - Apply global styles.
47 | - Use a shared component library if available.
48 |
49 |
50 | **Pro Tip:** [Builder.io](http://Builder.io) supports two export modes:
51 |
52 | - **Easy Mode:** Quick, lower fidelity.
53 | - **Precise Mode:** Requires structure but offers pixel-perfect results.
54 |
55 |
56 |
57 |
58 |
59 | - Open your Figma file.
60 | - Go to `Plugins > Builder.io`.
61 | - Select the frame(s) you want to export.
62 |
63 |
64 | - **Easy Mode:** Fastest route to test layouts.
65 | - **Precise Mode:** Best for polished, responsive designs.
66 |
67 |
68 | If prompted, map detected components to ensure smoother export.
69 |
70 |
71 | - Hit **“Open in Lovable”**.
72 | - Your Figma design is now a working UI inside Lovable.
73 |
74 |
75 |
76 |
77 | This is where the magic happens—turning static designs into real, usable apps.
78 |
79 |
80 |
81 | In Lovable, you can:
82 |
83 | - Change layouts
84 | - Add sections
85 | - Tweak styling
86 | - Make responsive adjustments
87 |
88 | Just describe what you want. Lovable does the rest.
89 |
90 |
91 | - Use the **“Spinning up preview”** feature to view updates instantly.
92 | - Test your changes before deployment.
93 |
94 |
95 | Need a database or auth?
96 |
97 | - Connect Supabase or other services via Lovable’s integrations.
98 |
99 |
100 | - Push your app live in one click.
101 | - Share it with your team or users.
102 | - Iterate based on feedback.
103 |
104 |
105 |
106 |
107 | Congrats—you just built a working app from a Figma file without writing code.
108 |
109 | Here’s what you can do next:
110 |
111 | - [Share Your Build](https://x.com) on X
112 | - [Join the Community on Discord](https://discord.gg/lovable-dev)
113 | - [Try the Figma X Lovable Flow Again](https://lovable.dev)
114 |
115 |
116 |
117 | ## Resources
118 |
119 | - [How to Import from Figma (](https://www.builder.io/c/docs/import-from-figma)[Builder.io](http://Builder.io)[ Docs)](https://www.builder.io/c/docs/import-from-figma)
120 | - [Builder.io](http://Builder.io)[ Plugin Modes](https://www.builder.io/c/docs/figma-plugin-modes)
121 | - [Figma Auto-Layout Tips](https://www.builder.io/c/docs/figma-auto-layout)
122 | - [Builder.io](http://Builder.io)[: Figma to Code](https://www.builder.io/figma-to-code)
123 | - [Lovable press release](https://lovable.dev/blog/2025-01-22-figma-to-lovable-builder-io-native-integration).
124 |
125 | ## Got Feedback?
126 |
127 | We’re building this for _you_. Tag us, DM us, or share your experience—we’re listening.
--------------------------------------------------------------------------------
/features/introduction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Introduction'
3 | description: 'Explore the key features and capabilities of Lovable'
4 | ---
5 |
6 |
7 | Lovable comes with a sleeve of features available. While these Docs are work in progress, and not all of the features are described, we wanted to showcase some of the key and most commonly used features.
8 |
9 | ---
10 |
11 | ## Overview
12 | Explore the sections below to get started quickly and learn more about some of the features offered by Lovable.
13 |
14 |
15 |
20 | Learn how to publish and share your Lovable projects quickly and efficiently with the public.
21 |
22 |
23 |
28 | Extend Lovable's functionality by integrating npm packages into your projects.
29 |
30 |
31 |
--------------------------------------------------------------------------------
/features/knowledge.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Knowledge Files"
3 | description: "Provide a description for your new page."
4 | icon: "book-open"
5 | ---
6 |
7 | Every project has its own unique context, goals, and challenges. A knowledge file captures this **custom context** and serves as a living document that evolves with your project.
8 |
9 |
10 |
11 | ## **What to Include in Your Knowledge File**
12 |
13 | A comprehensive knowledge file covers all essential aspects of your project. Here’s a breakdown of what to include:
14 |
15 | - **Project Overview:** A brief description of the project, its goals, and objectives.
16 | - **User Personas:** Detailed descriptions of your target users and their needs.
17 | - **Feature Specifications:** User stories, acceptance criteria, and detailed descriptions of each feature.
18 | - **Design Assets:** Links to design files, color palettes, typography, and other visual elements.
19 | - **API Documentation:** Detailed API endpoints, request/response examples, and authentication methods.
20 | - **Database Schema:** ER diagrams, table structures, and relationships.
21 | - **Environment Setup:** Instructions for setting up the development environment, including dependencies and configurations.
22 | - **Testing Guidelines:** Types of tests, testing frameworks, and coverage requirements.
23 | - **Deployment Instructions:** Steps for deploying the application to different environments (development, staging, production).
24 | - **Version Control Practices:** Define your branching strategy, commit message conventions, and code review guidelines.
25 | - **Security Practices:** Guidelines for secure coding, data protection, and handling sensitive information.
26 | - **Compliance Requirements:** Any legal or regulatory requirements your project must adhere to.
27 |
28 | ## **Best Practices for Maintaining Knowledge Files**
29 |
30 | - **Start Early:** Use tools like Lovable’s experimental chat mode to generate a knowledge file at the beginning of your project.
31 | - **Keep It Dynamic:** Automate updates to ensure your knowledge file stays in sync with your codebase and documentation.
32 | - **Define Roles Clearly:** Assign ownership to different sections to ensure accountability and avoid outdated information.
--------------------------------------------------------------------------------
/features/labs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Labs"
3 | description: "Learn about and manage early access features."
4 | icon: "flask"
5 | ---
6 |
7 | ## What is Labs?
8 |
9 | These experimental features may change or be removed at any time.
10 |
11 | You can access Labs from your [Account Setting tab](https://lovable.dev/settings/account) in the Lovable Editor.
12 |
13 | ## **GitHub Branch Switching**
14 |
15 | Select the branch to make edits to in your GitHub repository. To switch branches in GitHub through the Lovable editor:
16 |
17 | 1. Enter your project.
18 | 2. Go to Project Settings
19 | 3. Go to GitHub
20 | 4. Click the branch dropdown, and choose the branch you want to switch to.
21 |
22 |
23 | ### **Important Notes:**
24 |
25 | - Commit or stash any uncommitted changes before switching branches
26 | - If you encounter "Branch not found" errors, pull the latest changes from the remote repository first
27 | - If you can't switch branches, check if you have untracked files that would be overwritten
28 | - Branch switching will change all files in your workspace to match that branch
29 | - Lovable primarily syncs with your repository's default branch (usually main)
30 |
31 |
--------------------------------------------------------------------------------
/features/modes.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Modes"
3 | description: "Learn how to use Lovable’s two AI modes to build faster and smarter."
4 | icon: "sliders"
5 | ---
6 |
7 | At Lovable, you can work with AI in two powerful modes:
8 |
9 | ## 1. Edit Mode
10 |
11 | **Edit Mode** is your AI developer. It writes code, adds new features, and updates your project—automatically. This is the default mode when you start using Lovable.
12 |
13 | ## 2. Chat Mode
14 |
15 | **Chat Mode** is your development partner and is **10x smarter**. It helps you think through problems, debug issues, and plan your product—directly within the Lovable Editor.
16 |
17 | Unlike Edit Mode, Chat Mode is conversational and doesn't make edits to the code. This is perfect for asking questions, planning your project, and debugging. This mode is agentic, meaning it can reason across multiple steps and decide when to search files, inspect logs, query the database, and more. Then, when you're ready, simply prompt: “`Implement the plan`”.
18 |
19 | This switches you back to Edit Mode, where Lovable turns those ideas into working code.
20 |
21 |
22 | Because these capabilities come with additional costs, messages in Chat Mode will now start counting towards your message limit.
23 |
24 |
25 |
26 |
27 | ### Switching Modes
28 |
29 | Click the **“Chat”** prompt at the bottom of your editor to toggle between Edit and Chat Modes.
30 |
31 | 
32 |
33 | When you're in Chat Mode and say “implement the plan,” Lovable will seamlessly switch to Edit Mode and start building for you.
34 |
35 | ### 
36 |
37 | **Top 15 Chat Mode Use Cases**
38 |
39 | 1. **Efficient debugging** by explaining errors, offering step-by-step breakdowns, and resolving issues when Lovable got stuck in loops.
40 | 2. **Optimized feature implementation** by identifying the minimal necessary changes required for new functionality.
41 | 3. **Effective system architecture**, planning database structures, relationships, and scalability strategies.
42 | 4. **Streamlined development**, collecting and refining feature ideas before implementation.
43 | 5. **Informed product decisions**, such as debating whether to fork a product or consolidate functions.
44 | 6. **Enhanced documentation and knowledge storage**, keeping development organized and reducing redundant prompts.
45 | 7. **Debugging Lovable itself**, such as redeploying edge functions when Supabase connections were lost.
46 | 8. **Guidance for non-specialists**, acting as an AI tutor for troubleshooting, from password resets to API integrations.
47 | 9. **Prompt generation and refinement**, improving workflows through clearer, more precise instructions.
48 | 10. **Decision-making assistance**, analyzing multiple solutions before executing changes.
49 | 11. **Product management support**, structuring features, onboarding flows, and pricing models.
50 | 12. **Improved collaboration**, acting as a bridge between developers and non-technical founders.
51 | 13. **Reduced trial-and-error**, preventing mistakes before they happen and saving hours of work.
52 | 14. **Better AI-generated code quality**, refining outputs for maintainability, performance, and best practices.
53 | 15. **Real-time coding feedback**, offering suggestions to improve readability, efficiency, and adherence to standards.
54 |
55 | Chat Mode transforms the no-code/low-code experience, bridging ideas and fully functional products. It bridges the gap between great ideas and fully functional products, making complex software **accessible** to founders who previously relied on engineers.
--------------------------------------------------------------------------------
/features/npm-packages.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Using npm packages'
3 | description: 'Learn how to leverage npm packages to extend your Lovable applications with advanced features'
4 | icon: 'box'
5 | ---
6 |
7 | While Lovable is powerful on its own, enabling users to build sophisticated web applications, you can leverage npm packages for more advanced and extended features. These packages help you build even more complex and feature-rich applications with ease.
8 |
9 |
10 | **What is npm?**
11 |
12 | npm (Node Package Manager) is a package manager for JavaScript that allows developers to share and reuse code. It hosts thousands of packages, which are pieces of reusable code, that you can easily integrate into your projects to extend functionality.
13 |
14 | You can access it [at npmjs.com](https://www.npmjs.com/).
15 |
16 |
17 | ## Using npm packages for advanced features
18 |
19 | Let's say you'd like to create a tool that enables you to arrange your tasks in different Kanban boards, similar to many popular project management tools. You can prompt Lovable to build this tool from scratch, but it might be slower and more challenging to achieve the desired functionality.
20 |
21 | Instead, you can use npm packages to simplify and speed up the process. For example, the [@hello-pangea/dnd](https://www.npmjs.com/package/@hello-pangea/dnd) package provides robust drag-and-drop functionality. By using this package, you can easily create a Kanban board where users can add new cards, move them within columns, and reorder them.
22 |
23 |
24 | ```bash Example prompt
25 | Use the hello-pangea/dnd npm package to add drag-and-drop functionality to my Kanban board app.
26 | Ensure users can add new cards, move them within columns, and reorder them.
27 | ```
28 |
29 |
30 | This prompt directs Lovable to integrate the package into your project, making it easier to achieve the desired functionality. Depending on other requirements, your result might look somewhat like this.
31 |
32 |
33 |
34 |
35 |
36 | ## Quality and responsibility
37 |
38 | It's important to note that while npm packages can significantly enhance your projects, Lovable cannot guarantee the quality or reliability of these third-party packages.
39 |
40 | The functionality and performance of npm packages are the responsibility of the end user, and it's essential to thoroughly test and validate them within your application.
41 |
42 | ### Increasing your chances of success
43 |
44 | Here are a few strategies to help you evaluate the legitimacy and quality of npm packages before integrating them into your projects.
45 |
46 | * **Number of downloads** - Check the number of downloads on the package's npm page. A high number of downloads typically indicates that the package is widely used and trusted by the community.
47 |
48 | * **Maintenance status and latest updates** - Look at the package's repository to see if it is actively maintained. Frequent commits, recent updates, and responsiveness to issues are good indicators of an actively maintained package. Ensure the package has recent updates. A package that is regularly updated is more likely to be compatible with the latest versions of dependencies and security practices.
49 |
50 | * **Reviews and community feedback** - A lot of npm packages are hosted on GitHub or similar code repositories. Read through reviews, discussions, and feedback from other developers on those locations, too. Additionally, specific developer forums can provide insights into the package's reliability and any potential issues.
--------------------------------------------------------------------------------
/features/precision-edit.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Precise Edits"
3 | description: "Edit your Lovable projects with precision "
4 | icon: "computer-mouse"
5 | ---
6 |
7 | ## Visual Edits
8 |
9 |
10 | * Visual Edits feature DOES NOT consume any credits, so it is totally FREE to use.
11 |
12 | * You can do multiple edits at the same time before saving your changes.
13 |
14 |
15 | Lovable makes programming accessible to non-technical users while ensuring designers have precise control. **Visual Edits** allows AI-driven development with Tailwind-native visual controls for easy refinement.
16 |
17 |
18 |
19 | #### How It Works
20 |
21 |
22 | **Keyboard shortcut**
23 |
24 | * Option + s on Mac
25 |
26 | * Alt + s on PC
27 |
28 |
29 | * **Activate** the tool from the editor toolbar.
30 |
31 | * **Hover & Click** on UI elements (buttons, text, images) to edit.
32 |
33 | * **Modify Attributes** like text, colors, layout, font weights, and image sizes.
34 |
35 | * **Select Parent Elements** for structural changes.
36 |
37 | * **Use AI-Powered Prompts** for complex adjustments.
38 |
39 | * **Preview in Real-Time** and save when satisfied.
40 |
41 | This streamlines UI refinements, combining AI assistance with manual precision.
42 |
43 |
44 |
45 | [This is the technical background](https://x.com/emilahlback/status/1894488375517671795) of what went into building this feature.
46 |
47 | ## **Figma Integration**
48 |
49 | Export Figma designs directly into Lovable to build full-stack apps without coding.
50 |
51 |
52 |
53 | ### Figma-to-code guide:
54 |
55 | * Structure Figma designs.
56 |
57 | * Use Builder.io’s plugin.
58 |
59 | * Leverage Lovable for seamless app creation.
60 |
61 | [Read more](https://lovable.dev/blog/2025-01-22-figma-to-lovable-builder-io-native-integration).
62 |
63 | ## Knowledge Files
64 |
65 | Every project has its own unique context, goals, and challenges. A knowledge file captures this **custom context** and serves as a living document that evolves with your project.
66 |
67 |
68 |
69 | ### **What to Include in Your Knowledge File**
70 |
71 | A comprehensive knowledge file covers all essential aspects of your project. Here’s a breakdown of what to include:
72 |
73 | * **Project Overview:** A brief description of the project, its goals, and objectives.
74 |
75 | * **User Personas:** Detailed descriptions of your target users and their needs.
76 |
77 | * **Feature Specifications:** User stories, acceptance criteria, and detailed descriptions of each feature.
78 |
79 | * **Design Assets:** Links to design files, color palettes, typography, and other visual elements.
80 |
81 | * **API Documentation:** Detailed API endpoints, request/response examples, and authentication methods.
82 |
83 | * **Database Schema:** ER diagrams, table structures, and relationships.
84 |
85 | * **Environment Setup:** Instructions for setting up the development environment, including dependencies and configurations.
86 |
87 | * **Testing Guidelines:** Types of tests, testing frameworks, and coverage requirements.
88 |
89 | * **Deployment Instructions:** Steps for deploying the application to different environments (development, staging, production).
90 |
91 | * **Version Control Practices:** Define your branching strategy, commit message conventions, and code review guidelines.
92 |
93 | * **Security Practices:** Guidelines for secure coding, data protection, and handling sensitive information.
94 |
95 | * **Compliance Requirements:** Any legal or regulatory requirements your project must adhere to.
96 |
97 | ### **Best Practices for Maintaining Knowledge Files**
98 |
99 | * **Start Early:** Use tools like Lovable’s experimental chat mode to generate a knowledge file at the beginning of your project.
100 |
101 | * **Keep It Dynamic:** Automate updates to ensure your knowledge file stays in sync with your codebase and documentation.
102 |
103 | * **Define Roles Clearly:** Assign ownership to different sections to ensure accountability and avoid outdated information.
--------------------------------------------------------------------------------
/features/security.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Security"
3 | description: "Security features in Lovable"
4 | icon: "shield-halved"
5 | ---
6 |
7 | # API keys
8 |
9 | Lovable writes frontend code, which means it runs in the browser. Therefore, no sensitive data of any kind should be stored in code.
10 |
11 | To connect to third party services (like OpenAI, Anthropic etc), API keys are needed. We recommend you use Supabase secrets to store your API keys, in combination with the [Supabase Edge Functions](https://docs.lovable.dev/integrations/supabase#edge-functions).
12 |
13 | ## Automatic API key detection
14 |
15 | Whenever you paste an API key into the chat, Lovable will automatically detect it and warn you not to hardcode sensitive credentials directly into your frontend code. Instead of pasting API keys, describe what you're trying to accomplish and Lovable will guide you through the secure implementation.
16 |
17 | 
18 |
19 | For example, instead of:
20 |
21 | "Add this API key to call OpenAI: sk_test_abc123..."
22 |
23 | Try this:
24 |
25 | "I want to integrate OpenAI's API to generate text responses"
26 |
27 | Lovable will then show you how to:
28 |
29 | 1. Store your API key securely in Supabase secrets.
30 |
31 | 2. Create a Supabase Edge Function to make the API call server-side.
32 |
33 | 3. Call that Edge Function from your frontend code.
34 |
35 | This approach keeps your sensitive credentials secure and follows security best practices for web applications.
36 |
37 | ## Supabase RLS
38 |
39 | RLS policies determine who can access what data in your Supabase database. We recommend you carefully review them before publishing your project.
40 |
41 | # Security scanning
42 |
43 | Before publishing, Lovable displays security warnings from the [Supabase security advisor](https://supabase.com/docs/guides/database/database-advisors?queryGroups=lint&lint=0002_auth_users_exposed) and will ask you to confirm that you want to publish if there are any warnings.
44 |
45 | We highly recommend you resolve all issues before publishing your projects and to keep your app's data safe.
46 |
47 |
48 | Seeing no warnings or errors from the Supabase security advisor does not guarantee that there are no security issues in your app. We recommend you ask Lovable to review your app's security before publishing.
49 |
50 |
51 | # Security scanning
52 |
53 | Lovable includes comprehensive AI-powered security scanning to help identify potential vulnerabilities in your code before you publish.
54 |
55 | ## Enhanced RLS policy review
56 |
57 | The Supabase security advisor can sometimes miss incorrect RLS (Row Level Security) usage. To address this, Lovable includes a deep code security review that uses AI to analyze your app for potential security issues beyond what Supabase's built-in advisor catches. This provides additional coverage for RLS policy problems and suggests specific plans on how to fix them.
58 |
59 | ## Manual security review
60 |
61 | You can request a security review at any time by asking Lovable to "review my app's security" or clicking the "Review Security" button in the publish dialog.
62 |
63 | Lovable will:
64 |
65 | 1. Analyze your entire codebase for security vulnerabilities
66 | 2. Check for common issues like XSS prevention, input sanitization, and authentication flaws
67 | 3. Review your Supabase RLS policies and database security (going deeper than Supabase's own advisor)
68 | 4. Provide a detailed report with specific recommendations
69 |
70 | 
71 |
72 | 
73 |
74 | ## Pre-publish security checks
75 |
76 | Before publishing, Lovable automatically displays security warnings from both the Supabase security advisor and its own enhanced AI security scanner. You'll be asked to confirm if there are any warnings, though we highly recommend resolving all issues first.
77 |
78 | 
79 |
80 | Remember: Even with no warnings, always request a manual security review for production applications.
--------------------------------------------------------------------------------
/features/visual-edit.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Visual Edit"
3 | description: "Tailwind-native visual controls for easy refinement."
4 | icon: "computer-mouse"
5 | ---
6 |
7 |
8 | - Visual Edits DO NOT consume any credits, so it's totally FREE to use.
9 | - You can make multiple changes before saving them all at once.
10 | - Tailwind-native controls: Custom styling without leaving the UI.
11 |
12 |
13 | Lovable brings programming into the hands of everyone. **Visual Edits** is our Figma-like interface that lets you visually update your app—directly on the canvas—while keeping full control over the underlying Tailwind code.
14 |
15 | No prompts, no guessing. Just click, tweak, and ship.
16 |
17 | ## How to Use Visual Edit
18 |
19 |
20 |
21 |
22 | **Keyboard shortcut:**
23 |
24 | - Option ⌥ \+ S on Mac
25 | - Alt \+ S on PC
26 |
27 |
28 | 1. **Activate Visual Edit** from the editor toolbar or via shortcut.
29 | 2. **Hover \+ Click** on any element—text, images, buttons, layouts.
30 | 3. **Edit visually**:
31 | - Change text content
32 | - Adjust spacing and layout
33 | - Modify colors, fonts, sizes
34 | - Apply or override Tailwind classes
35 | 4. **Select parent elements** for structural or layout-level changes.
36 | 5. **Use AI prompts** for complex tasks—but only if you want to.
37 | 6. **Preview in real-time** before hitting save.
38 |
39 | All updates are applied instantly—no rebuilds, no AI wait times, no code confusion.
40 |
41 | ## Why It Matters
42 |
43 | Visual Edits shortens the feedback loop between **idea → UI update**:
44 |
45 | - **No-code meets pro-level control**\
46 | Designers get pixel-perfect control, and devs get clean, maintainable code.
47 | - **Faster iteration, zero frustration**\
48 | No more guessing how CSS will behave—see it live, tweak in real-time.
49 | - **Hot Module Reloading**\
50 | Thanks to Vite-powered Dev Servers, saved edits refresh instantly—without page reloads.
51 | - **Smarter Editing with AST**\
52 | Behind the scenes, your code is converted into an Abstract Syntax Tree (AST) right in the browser. This allows safe, precise updates—no fragile regex hacks.
53 | - **Scalable Infrastructure**\
54 | Every Visual Edit runs on ephemeral, containerized cloud dev servers—4,000\+ of them—so your experience stays fast and consistent no matter your app’s complexity.
55 | - **Tailwind-native**\
56 | Whether you're using presets or writing your own classes, edits are always valid Tailwind. No locked-in styles.
57 |
58 | ## Common Use Cases
59 |
60 | - Change button colors or font weights on the fly.
61 | - Resize and align layout elements visually.
62 | - Rewrite CTA copy inline.
63 | - Add Tailwind classes to fine-tune spacing, shadows, borders, and more.
64 | - Preview edits across breakpoints and themes instantly.
65 |
66 | ## Under the Hood (for devs)
67 |
68 | We built Visual Edits by moving the code layer closer to the visual layer:
69 |
70 | - **Stable JSX Tagging**\
71 | Every generated component is tagged at compile-time using a custom Vite plugin, so edits map directly back to JSX source.
72 | - **In-browser AST**\
73 | The full codebase is parsed into an interactive AST client-side using Babel & SWC. This enables live updates and custom class handling—all without waiting on servers.
74 | - **Live Tailwind Generator**\
75 | Changes reflect immediately with our real-time Tailwind parser. You see the update before you save it.
76 | - **Hot Module Replacement (HMR)**\
77 | When you do save, we generate clean JSX/TSX, compute diffs, and instantly trigger HMR to update the app.
78 |
79 | ## Built for Everyone
80 |
81 | Whether you're:
82 |
83 | - A **non-technical founder** making your product shine
84 | - A **designer** refining spacing and hierarchy
85 | - A **developer** polishing the details with real-time feedback
86 |
87 | Visual Edits fits right into your workflow.
88 |
89 | ## Resources:
90 |
91 | - [📼 Launch video](https://www.youtube.com/watch?v=3FrKcqDGfe0&t=11s)
92 | - [📢 Feature launch: Introducing Visual Edits](https://lovable.dev/blog/introducing-visual-edits)
93 | - [🔧 Technical deep-dive](https://x.com/emilahlback/status/1894488375517671795) by Emil Ahlbäck
94 | - [🛠️ Engineering: How We Built Visual Edits](https://lovable.dev/blog/visual-edits)
95 |
96 | ## Final Notes
97 |
98 | Visual Edits is part of our mission to bring the power of software creation to everyone—not just coders. It’s free, fast, and built to scale with your imagination.
99 |
100 | [Try it out.](https://lovable.dev/) Tweak something. Fall in love with iteration again.
--------------------------------------------------------------------------------
/images/21stdev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/21stdev.png
--------------------------------------------------------------------------------
/images/CleanShot2025-05-02at15.04.42@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/CleanShot2025-05-02at15.04.42@2x.png
--------------------------------------------------------------------------------
/images/ConnectLovabletoStripe(1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/ConnectLovabletoStripe(1).png
--------------------------------------------------------------------------------
/images/Filtering-of-projects.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Filtering-of-projects.png
--------------------------------------------------------------------------------
/images/LovableLaunchedfromFigma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/LovableLaunchedfromFigma.png
--------------------------------------------------------------------------------
/images/Screenshot2025-04-23at8.16.42PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Screenshot2025-04-23at8.16.42PM.png
--------------------------------------------------------------------------------
/images/Screenshot2025-05-30at09.21.22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Screenshot2025-05-30at09.21.22.png
--------------------------------------------------------------------------------
/images/Screenshot2025-05-30at09.29.08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Screenshot2025-05-30at09.29.08.png
--------------------------------------------------------------------------------
/images/Screenshot2025-05-30at09.30.34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Screenshot2025-05-30at09.30.34.png
--------------------------------------------------------------------------------
/images/Screenshot2025-05-30at09.49.21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Screenshot2025-05-30at09.49.21.png
--------------------------------------------------------------------------------
/images/Supabase-api-key-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Supabase-api-key-clerk.png
--------------------------------------------------------------------------------
/images/Twitterpost-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/Twitterpost-1.png
--------------------------------------------------------------------------------
/images/ai-assistant-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/ai-assistant-make.png
--------------------------------------------------------------------------------
/images/animation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/animation.png
--------------------------------------------------------------------------------
/images/apollo-make-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/apollo-make-lovable.png
--------------------------------------------------------------------------------
/images/asana-clone-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/asana-clone-lovable.png
--------------------------------------------------------------------------------
/images/audience-resend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/audience-resend.png
--------------------------------------------------------------------------------
/images/call-customer-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/call-customer-make.png
--------------------------------------------------------------------------------
/images/categorization-community-projects.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/categorization-community-projects.png
--------------------------------------------------------------------------------
/images/change-workspace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/change-workspace.png
--------------------------------------------------------------------------------
/images/chat-mode-switch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/chat-mode-switch.png
--------------------------------------------------------------------------------
/images/chat-mode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/chat-mode.jpg
--------------------------------------------------------------------------------
/images/cleanshot_2025-05-01_at_11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/cleanshot_2025-05-01_at_11.png
--------------------------------------------------------------------------------
/images/cleanshot_2025-05-01_at_12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/cleanshot_2025-05-01_at_12.png
--------------------------------------------------------------------------------
/images/clerk-api-key.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/clerk-api-key.png
--------------------------------------------------------------------------------
/images/clerk-email-templates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/clerk-email-templates.png
--------------------------------------------------------------------------------
/images/clerk-organization-create.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/clerk-organization-create.png
--------------------------------------------------------------------------------
/images/clerk-organization-members.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/clerk-organization-members.png
--------------------------------------------------------------------------------
/images/clerk-waitlist-pending.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/clerk-waitlist-pending.png
--------------------------------------------------------------------------------
/images/clerk-waitlist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/clerk-waitlist.png
--------------------------------------------------------------------------------
/images/component.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/component.png
--------------------------------------------------------------------------------
/images/confirmation-email-submission-resend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/confirmation-email-submission-resend.png
--------------------------------------------------------------------------------
/images/connect-entri.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/connect-entri.png
--------------------------------------------------------------------------------
/images/contact-form-crm-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/contact-form-crm-make.png
--------------------------------------------------------------------------------
/images/course-creation-ai-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/course-creation-ai-2.png
--------------------------------------------------------------------------------
/images/course-creation-ai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/course-creation-ai.png
--------------------------------------------------------------------------------
/images/course-dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/course-dashboard.png
--------------------------------------------------------------------------------
/images/course-voice-ai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/course-voice-ai.png
--------------------------------------------------------------------------------
/images/create-clerk-application.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/create-clerk-application.png
--------------------------------------------------------------------------------
/images/create-workspace-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/create-workspace-lovable.png
--------------------------------------------------------------------------------
/images/crm-kanban-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/crm-kanban-make.png
--------------------------------------------------------------------------------
/images/crm-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/crm-make.png
--------------------------------------------------------------------------------
/images/crm-resend-email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/crm-resend-email.png
--------------------------------------------------------------------------------
/images/custom-domain-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/custom-domain-lovable.png
--------------------------------------------------------------------------------
/images/customize-email-resend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/customize-email-resend.png
--------------------------------------------------------------------------------
/images/dev-mode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/dev-mode.png
--------------------------------------------------------------------------------
/images/dns-provider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/dns-provider.png
--------------------------------------------------------------------------------
/images/dns-record.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/dns-record.png
--------------------------------------------------------------------------------
/images/email-resend-form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/email-resend-form.png
--------------------------------------------------------------------------------
/images/github-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/github-lovable.png
--------------------------------------------------------------------------------
/images/github-lovable.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/github-lovable.webp
--------------------------------------------------------------------------------
/images/hero-section.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/hero-section.png
--------------------------------------------------------------------------------
/images/history.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/history.png
--------------------------------------------------------------------------------
/images/impersonate-user-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/impersonate-user-clerk.png
--------------------------------------------------------------------------------
/images/implement-plan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/implement-plan.png
--------------------------------------------------------------------------------
/images/invite-collaborator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/invite-collaborator.png
--------------------------------------------------------------------------------
/images/invite-lovable-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/invite-lovable-2.png
--------------------------------------------------------------------------------
/images/invite-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/invite-lovable.png
--------------------------------------------------------------------------------
/images/jwt-template-clerk-configuration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/jwt-template-clerk-configuration.png
--------------------------------------------------------------------------------
/images/jwt-template-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/jwt-template-clerk.png
--------------------------------------------------------------------------------
/images/landing-page-lovable-project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/landing-page-lovable-project.png
--------------------------------------------------------------------------------
/images/launched.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/launched.png
--------------------------------------------------------------------------------
/images/lovable-app-overview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-app-overview.png
--------------------------------------------------------------------------------
/images/lovable-dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-dashboard.png
--------------------------------------------------------------------------------
/images/lovable-labs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-labs.png
--------------------------------------------------------------------------------
/images/lovable-prompting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-prompting.png
--------------------------------------------------------------------------------
/images/lovable-stripe.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-stripe.webp
--------------------------------------------------------------------------------
/images/lovable-support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-support.png
--------------------------------------------------------------------------------
/images/lovable-two-point-zero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/lovable-two-point-zero.png
--------------------------------------------------------------------------------
/images/make-enrich.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/make-enrich.png
--------------------------------------------------------------------------------
/images/make-hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/make-hero.png
--------------------------------------------------------------------------------
/images/make-supabase-automation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/make-supabase-automation.png
--------------------------------------------------------------------------------
/images/menu-project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/menu-project.png
--------------------------------------------------------------------------------
/images/mobile-responsive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/mobile-responsive.png
--------------------------------------------------------------------------------
/images/organization-management-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/organization-management-clerk.png
--------------------------------------------------------------------------------
/images/pricing-plan-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/pricing-plan-lovable.png
--------------------------------------------------------------------------------
/images/project-change-workspace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/project-change-workspace.png
--------------------------------------------------------------------------------
/images/project-setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/project-setting.png
--------------------------------------------------------------------------------
/images/publish-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/publish-lovable.png
--------------------------------------------------------------------------------
/images/redesign-history.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/redesign-history.jpeg
--------------------------------------------------------------------------------
/images/replicate-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/replicate-image.png
--------------------------------------------------------------------------------
/images/replicate-playground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/replicate-playground.png
--------------------------------------------------------------------------------
/images/replicate-real-time.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/replicate-real-time.png
--------------------------------------------------------------------------------
/images/restore.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/restore.png
--------------------------------------------------------------------------------
/images/select-plan-workspace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/select-plan-workspace.png
--------------------------------------------------------------------------------
/images/send-batch-emails-gdpr-resend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/send-batch-emails-gdpr-resend.png
--------------------------------------------------------------------------------
/images/setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/setting.png
--------------------------------------------------------------------------------
/images/sms-code-verification.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/sms-code-verification.png
--------------------------------------------------------------------------------
/images/sql-editor-supabase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/sql-editor-supabase.png
--------------------------------------------------------------------------------
/images/stripe-lovable-plan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/stripe-lovable-plan.png
--------------------------------------------------------------------------------
/images/subscription-newsletter-resend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/subscription-newsletter-resend.png
--------------------------------------------------------------------------------
/images/supabase-clerk-integration-doc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/supabase-clerk-integration-doc.png
--------------------------------------------------------------------------------
/images/supabase-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/supabase-clerk.png
--------------------------------------------------------------------------------
/images/supabase-resend-email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/supabase-resend-email.png
--------------------------------------------------------------------------------
/images/supabase-tasks-table.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/supabase-tasks-table.png
--------------------------------------------------------------------------------
/images/update-publish-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/update-publish-button.png
--------------------------------------------------------------------------------
/images/upgrade-plan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/upgrade-plan.png
--------------------------------------------------------------------------------
/images/vapi-make-automation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/vapi-make-automation.png
--------------------------------------------------------------------------------
/images/vapi-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/vapi-make.png
--------------------------------------------------------------------------------
/images/versioning.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/versioning.png
--------------------------------------------------------------------------------
/images/versioningcopy2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/versioningcopy2.png
--------------------------------------------------------------------------------
/images/visual-edit-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/visual-edit-image.png
--------------------------------------------------------------------------------
/images/visual-edit-replace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/visual-edit-replace.png
--------------------------------------------------------------------------------
/images/waitlist-component-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/waitlist-component-clerk.png
--------------------------------------------------------------------------------
/images/webhook-apollo-webhook-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/webhook-apollo-webhook-make.png
--------------------------------------------------------------------------------
/images/webhook-lovable-make.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/webhook-lovable-make.png
--------------------------------------------------------------------------------
/images/what-is-clerk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/what-is-clerk.png
--------------------------------------------------------------------------------
/images/workspace-setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/images/workspace-setting.png
--------------------------------------------------------------------------------
/integrations/21stdev-integration.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Integrate with 21st.dev"
3 | description: "Build High-Converting AI Landing Pages Using Lovable"
4 | icon: "ruler-combined"
5 | ---
6 |
7 | Most AI-generated landing pages look the same—vague sections, off-brand colors, and no personality. But it doesn’t have to be that way.
8 |
9 | We are going to share a structured workflow using Lovable and 21stdev that creates landing pages clients _actually_ love (like [this one](https://lovable.dev/projects/35d72d2e-6e25-40e5-9b0c-c0d1a7c1b727)).
10 |
11 | 
12 |
13 | ## Step-by-step guide
14 |
15 | From design inspiration to final polish, here’s the step-by-step guide he uses to build fast without sacrificing quality:
16 |
17 |
18 |
19 | Before writing a single word of prompt, browse [Dribbble](https://dribbble.com/) or [Behance](https://www.behance.net/). Look for designs with:
20 |
21 | - Clean typography and spacing
22 | - Clear CTAs and minimal layout
23 | - Subtle interactions (not overdesigned)
24 |
25 |
26 | Pick something you can realistically replicate. Avoid overly complex 3D designs if you don’t plan to recreate them.
27 |
28 |
29 | A real client asked for a "modern and minimal" design. That informed the visual starting point. Avoid picking something you can’t deliver.
30 |
31 |
32 |
33 | Start your Lovable project by prompting:
34 |
35 |
36 | Start with a blank empty project. We will be adding details afterwords.
37 |
38 |
39 |
40 | Once you find your reference design, download it. If it saves in WebP format, use an online converter to change it to PNG so it can be easily used in Lovable or GPT workflows.
41 |
42 |
43 | Tools we recommend: https://cloudconvert.com/webp-to-png
44 |
45 |
46 |
47 | Use Lovable [Chat Mode](https://docs.lovable.dev/features/labs#chat-mode) to extract:
48 |
49 | - Page sections (hero, features, FAQ, etc.)
50 | - Layout structure, spacing, and content order
51 | - Font families, color palettes, and gradients
52 | - Animation types, hover effects, and transitions
53 |
54 |
55 | Lovable [Chat mode](https://docs.lovable.dev/features/labs#chat-mode) (or customGPT) is also trained to recommend Unsplash images for blog thumbnails and illustrations.
56 |
57 |
58 | Lovable occasionally mislabels things (e.g., "Space Grotesque" font was misspelled). Always review and correct prompt outputs before pasting into Lovable.
59 |
60 | You can even ask Lovable chat mode to elaborate on sections or rewrite the prompt with better UX suggestions.
61 |
62 |
63 | Paste the detailed prompt into Lovable Edit Mode. Then:
64 |
65 | - Upload your PNG screenshot as a reference
66 | - Add notes like "_Use Space Grotesque font_" or "Use Unsplash for blog thumbnails"
67 |
68 | This combo leads to far more accurate designs than vague, single-sentence prompts.
69 |
70 |
71 | Please note how much Lovable faster this feels compared to setting up Tailwind or Bootstrap manually just a year ago.
72 |
73 |
74 |
75 | Use Lovable’s [visual editing tool](https://docs.lovable.dev/features/visual-edit) to:
76 |
77 | - Resize images (e.g., "make this image 800px wide")
78 | - Position hero images (e.g., "place this image on the right side")
79 | - Align design sections with the reference image
80 |
81 | Combine this with natural language edits for precision.
82 |
83 |
84 | Use [21stdev](https://21st.dev/)’s prebuilt UI components to upgrade:
85 |
86 | 
87 |
88 | - Hero sections
89 | - Navigation bars with hover effects
90 | - Testimonial layouts
91 | - CTAs and feature grids
92 |
93 | Find a component you like, copy the prompt, and paste it into Lovable. Be sure to match the visual tone with the rest of the site.
94 |
95 |
96 | AI saves time, but expect cleanup:
97 |
98 | 
99 |
100 | - Adjust branding (Lovable defaults to blue)
101 | - Improve spacing and padding manually
102 | - Use consistent typography throughout
103 | - Add gradients or depth for a non-flat look
104 |
105 | Make the design feel _intentional_, not "default."
106 |
107 |
108 | Don’t skip this. Ensure:
109 |
110 | 
111 |
112 | - Inputs go full-width
113 | - Font sizes adapt to smaller screens
114 | - Buttons are tap-friendly
115 | - Sections stack well and scroll smoothly
116 |
117 | Mobile UX is critical for conversions.
118 |
119 |
120 | To modernize the feel:
121 |
122 | - Use fade-ins for hero sections
123 | - Add button hover effects
124 | - Animate sections on scroll
125 | - Use subtle background movement
126 |
127 | Lovable can integrate [Framer Motion](https://motion.dev/) out-of-the-box if prompted right.
128 |
129 | 
130 |
131 |
132 | Craft prompts for ChatGPT, Midjourney or Ideogram based on your favorite elements from the reference design.
133 |
134 | **Steps:**
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 | The latest ChatGPT 4o seems worth the test.
152 |
153 | This is especially useful for 3D visuals or thematic illustrations.
154 |
155 |
156 | Once you’re happy with the result:
157 |
158 | - Click "Deploy" in Lovable
159 | - Connect a custom domain via Netlify
160 |
161 | Your site goes live in minutes. No manual setup needed.
162 |
163 |
164 | Copy the public link and share with your client. They can:
165 |
166 | - Review it live
167 | - Suggest tweaks
168 | - Approve quickly
169 |
170 | You can continue refining sections using Lovable’s visual or prompt-based editor. It’s a fast iteration loop.
171 |
172 |
173 |
174 | ## Why This Approach Works?
175 |
176 | AI isn't magic. But with structure, it becomes a superpower. Compared to unstructured prompting:
177 |
178 | - The first draft is 10x closer to done
179 | - You spend less time fixing errors
180 | - Every section has a purpose
181 | - The final product feels custom, not cookie-cutter
182 |
183 | It’s a blend of automation **\+** craftsmanship.
184 |
185 | ## Key Takeaways
186 |
187 | - Start with strong visual inspiration
188 | - Use structured prompts with Lovable Chat Mode
189 | - Add screenshots and clarify expectations
190 | - Upgrade sections using 21stdev components
191 | - Fix design quirks and optimize for mobile
192 | - Animate where it matters
193 | - Deploy fast, iterate faster
194 |
195 | This is the workflow [Prajwal](https://x.com/PrajwalTomar_/status/1902371273147064772) uses everyday for his clients - that we tried in-house - to build fast, beautiful, high-converting landing pages—powered by Lovable AI but guided by intention.
196 |
197 | Happy Building\!
198 |
199 | ## More Resources
200 |
201 | - [Brock Mesarich's tutorial](https://www.youtube.com/watch?v=v48gJFQvE1Y&pp=ygUPbG92YWJsZSAyMXN0ZGV2)
202 | - Lukas Margerie's tutorial ([1](https://www.youtube.com/watch?v=-GiBI0leMHU&t=30s&pp=ygUPbG92YWJsZSAyMXN0ZGV2) - [2](https://www.youtube.com/watch?v=uqdFobvoRQQ&pp=ygUPbG92YWJsZSAyMXN0ZGV20gcJCb0Ag7Wk3p_U))
203 | - [AI Jason's tutorial](https://www.youtube.com/watch?v=8MPElOdNjtk&pp=ygUPbG92YWJsZSAyMXN0ZGV2)
204 | - [Mark Kashef's tutorial](https://www.youtube.com/watch?v=Zv7N0SxfpRM&t=269s&pp=ygUPbG92YWJsZSAyMXN0ZGV2)
205 | - [Alejavi Rivera's tutorial](https://www.youtube.com/watch?v=mMBp0uGZOWw&pp=ygUPbG92YWJsZSAyMXN0ZGV2) (spanish)
206 | - [Fazt Code's tutorial](https://www.youtube.com/watch?v=RGZeP1_oMoY&pp=ygUPbG92YWJsZSAyMXN0ZGV2)
--------------------------------------------------------------------------------
/integrations/ai-integration.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Integration with AI"
3 | description: "How to Integrate AI Services into Lovable Projects"
4 | icon: "wand-magic-sparkles"
5 | ---
6 |
7 | Lovable makes it easy to integrate AI services into your web applications. Whether you want to build an AI-powered landing page, a text-generation tool, or a full SaaS app, Lovable's built-in integrations with services like [**OpenAI**](https://platform.openai.com/)**, **[**Groq**](https://console.groq.com/keys)**, **[**Claude**](https://www.anthropic.com/api)**, **[**Deepseek**](https://api-docs.deepseek.com/)**, and **[**Mistral**](https://docs.mistral.ai/api/) make it possible without writing backend code. Here's how to do it:
8 |
9 |
10 |
11 | Before you start building, define what you want the AI to do:
12 |
13 | - Generate or enhance text (e.g. email writer, tweet generator)
14 | - Classify or summarize content
15 | - Analyze images
16 | - Personalize responses
17 | - Integrate with a specific LLM API
18 |
19 |
20 | Use Lovable's chat interface to describe your feature in simple terms. For example:
21 |
22 | ```
23 | Build an email enhancement tool. The user should write an email, then click buttons to make it more professional, concise, or friendly using Groq API.
24 | ```
25 |
26 | Lovable will scaffold the UI, suggest components, and let you preview the app quickly.
27 |
28 |
29 | AI features often need backend logic. Supabase provides:
30 |
31 | - Database for user data
32 | - Auth for login/signup
33 | - Edge Functions for calling external APIs securely
34 |
35 |
36 | Set up Supabase early in your project to avoid UI/backend mismatches.
37 |
38 |
39 |
40 | To safely call AI APIs, create an Edge Function inside Lovable:
41 |
42 | - Add your API key to the Supabase by submitting this via the secrets form
43 | - Let Lovable generate the edge function code
44 | - Ensure you use function calling if your API returns structured data (e.g. calories, macros, tweet threads)
45 |
46 | **Prompt Example:**
47 |
48 | ```
49 | Use GPT-4 and function calling to extract nutrition info from a meal description. Save the results to the backend.
50 | ```
51 |
52 |
53 | Structure your OpenAI function calling schema with defined fields like:
54 |
55 | ```
56 | {
57 | "name": "extract_nutrition",
58 | "parameters": {
59 | "calories": "number",
60 | "protein": "number",
61 | "carbs": "number",
62 | "fat": "number"
63 | }
64 | }
65 | ```
66 |
67 |
68 |
69 | Add buttons or form actions for:
70 |
71 | - Submitting text to the AI
72 | - Uploading an image
73 | - Toggling between modes (concise vs friendly tone)
74 |
75 | Lovable lets you:
76 |
77 | - Attach functions to buttons
78 | - Animate interactions
79 | - Show real-time results with minimal prompting
80 |
81 |
82 | Use screenshots and phrases like "make this smoother" to guide the design.
83 |
84 |
85 | **Advanced UX Tip:** Implement side-by-side live previews of the AI response. Use left/right layout blocks or tabs to let users compare outputs.
86 |
87 |
88 |
89 | Some popular integrations for AI workflows:
90 |
91 | - **Resend** – send emails after form submission
92 | - **Groq API** – blazing fast LLM inference
93 | - **Stripe** – paywall access to AI tools
94 | - **Replicate** – generate or transform images
95 |
96 | **Prompt Example:**
97 |
98 | ```
99 | When a user submits the contact form, send an email using Resend and store the message in Supabase.
100 | ```
101 |
102 |
103 | **Payments Tip:** Lock advanced AI features behind a Stripe subscription. Use conditional flows like:
104 |
105 | ```
106 | if (user.isPaid) { showAIFeature(); } else { redirectToCheckout(); }
107 | ```
108 |
109 |
110 |
111 | - Use preview links to test mobile responsiveness
112 | - Check performance with multiple API calls
113 | - Share your project for feedback
114 | - Use chat history to revert changes or refactor
115 |
116 |
117 | When you're ready:
118 |
119 | - Deploy with a single click
120 | - Use [Lovable Launch](https://docs.lovable.dev/features/launched) to get visibility
121 | - Add OG tags and SEO title/description in the meta panel
122 | - Submit your app to Product Hunt, communities, and social media
123 |
124 |
125 |
126 | ## **Debug and Improve Prompts**
127 |
128 | - Be specific with system messages: "You are a helpful nutritionist."
129 | - Test function calling by mocking inputs.
130 | - Use `console.log()` inside edge functions to trace logic.
131 | - Use screenshots when asking Lovable to debug a layout.
132 |
133 | **Prompt Tip:** If the AI fails to use your context (e.g. user's meals), say:
134 |
135 | ```
136 | Make sure all of the user's meals are included in the prompt to GPT-4.
137 | ```
138 |
139 | ### Troubleshooting
140 |
141 |
142 |
143 | Make sure you include context like user history or previous entries.
144 |
145 |
146 | Use chat-only mode to debug one step at a time.
147 |
148 |
149 | Ensure `stream: true` is supported.
150 |
151 |
152 | Use file inputs and convert to base64 or upload via Supabase Storage.
153 |
154 |
155 | View Edge Function logs in Lovable's function editor or Supabase dashboard.
156 |
157 |
158 |
159 | ## Example Projects Built with AI Integration
160 |
161 | - [**Nexus Smart Email** ](https://smart-email-nexus.lovable.app/)– Landing page with real-time Groq-enhanced email preview
162 | - [**TweetMixer Pro**](https://www.youtube.com/watch?v=fT_dq_hyQAA&vl=de) – Paste blog posts, get tweet threads using GPT-4
163 | - [**AI Calorie Tracker**](https://www.youtube.com/watch?v=c0zhLzcVJRI&ab_channel=Lovable) – Analyze meals via GPT-4 with image uploads
164 | - [**Robot Arena Shooter** ](https://www.youtube.com/watch?v=zmK36lkAb6I)– Claude-powered game with AI-enhanced logic
165 | - [**Reindeer Quiz**](https://www.youtube.com/watch?v=XdZtpP3QpzQ) – Personalized result generation via Claude and custom scoring logic
166 |
167 | ## Final Thoughts
168 |
169 | Lovable is your AI-powered frontend, database, backend, and deployment pipeline all-in-one. AI integration is just prompting \+ context \+ testing. Take it step-by-step, and remember: you don’t need to be a backend engineer to build with AI.
--------------------------------------------------------------------------------
/integrations/chrome-extensions.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Chrome Adds-on"
3 | description: "Supercharge Lovable"
4 | icon: "Plus"
5 | ---
6 |
7 | Our community champions have created powerful Chrome extensions to enhance your Lovable experience!
8 |
9 | ## [Lovify](https://lovify.lovable.app/) by Talisha
10 |
11 |
12 |
13 | A development workflow booster packed with AI-driven features:
14 |
15 | * **Import from GitHub** – Pull projects into Lovable instantly.
16 |
17 | * **Spark Prompts** – AI-powered, context-aware suggestions.
18 |
19 | * **Project Planning** – Auto-generate PRDs, track progress, and streamline workflows.
20 |
21 | * **Voice-Controlled Debugging** – Say, “Hey Lovify, fix this bug…” for AI-assisted troubleshooting.
22 |
23 | * **Rubber Duck Debugging** – Talk through problems with a virtual duck.
24 |
25 | * **Cook Mode** – Upload reference images for pixel-perfect UI design.
26 |
27 | * **Slash Commands** – Quick actions like `/auth`, `/prompt`, `/integrations`.
28 |
29 | * **Live Code Analysis** – Real-time error detection and best-practice suggestions.
30 |
31 | * **Interactive Documentation** – Auto-parse and summarize API documentation.
32 |
33 | [Read the full customer story here](https://lovable.dev/blog/2025-01-31-from-fashion-to-founding-how-talisha-found-a-home-in-lovables-community).
34 |
35 |
36 |
37 | ## [Lovable.dev Add-ons](https://chromewebstore.google.com/detail/lovabledev-add-ons/kbacddfmjjdomaadfckjdhclgaghmjpi) by Rezaul
38 |
39 | A versatile toolkit for hands-free efficiency and enhanced workflows:
40 |
41 | * **Voice Input Integration** – Real-time voice-to-text transcription.
42 |
43 | * **Prompt Library & Enhancer** – AI-powered structured prompts and Groq AI integration.
44 |
45 | * **Project Management** – Organize, drag-and-drop, and navigate multiple projects.
46 |
47 | * **Advanced Chat Search** – Locate messages efficiently.
48 |
49 | * **Smart Color Picker** – Grab and save colors directly from the canvas.
50 |
51 | * **SEO Tools** – Generate and validate meta tags with ease.
52 |
53 | [Read the full customer story here](https://lovable.dev/blog/supercharge-lovable-chrome-extension).
54 |
55 | ## [Lovable Prompts](https://chromewebstore.google.com/detail/lovable-prompts/cgacpkdhmdlnjigpcpdicgmcmboobjeg)
56 |
57 | 
58 |
59 | A sleek, minimalistic popup for managing prompts effortlessly:
60 |
61 | * **Quick-access floating popup**
62 |
63 | * **Categorized & searchable prompt library**
64 |
65 | * **One-click copy functionality**
66 |
67 | * **Lightweight and seamless experience**
68 |
69 | ## [Lovable Helper](https://chromewebstore.google.com/detail/lovable-helper/hipnckfdkbfkfcnalhhkimhbdebklnop)
70 |
71 | 
72 |
73 | Enhance your Lovable workflow with smart shortcuts:
74 |
75 | * **Ctrl+Enter** – Send messages instantly.
76 |
77 | * **@ Key** – Quick access to message templates.
78 |
79 | * **Manage custom templates** – Organize and retrieve prompts easily.
80 |
81 | ## [Prompt2MVP](https://chromewebstore.google.com/detail/prompt2mvp/dfojilkhdfjdlmhpchfajagmiamindgh)
82 |
83 | A tool for building MVPs with AI-powered prompts and design inspiration:
84 |
85 | * **Capture & organize screenshots** as visual references.
86 |
87 | * **Convert screenshots into actionable prompts.**
88 |
89 | * **Choose tech stacks** for frontend and backend alignment.
90 |
91 | * **Define brand personality** with curated adjectives.
92 |
93 | * **One-click prompt insertion** into Lovable.dev.
94 |
95 | These extensions make your Lovable experience faster, smarter, and more efficient!
--------------------------------------------------------------------------------
/integrations/replicate.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Integration with Replicate"
3 | description: "Learn how to integrate Replicate with your Lovable application"
4 | icon: "robot"
5 | ---
6 |
7 | ## What is Replicate
8 |
9 | [Replicate](https://replicate.com/) lets you run open-source machine learning models with just a few lines of code—no ML expertise required.
10 |
11 | It’s an API platform where developers can generate images, videos, audio, and more using community-built or custom AI models. Whether you’re building an MVP, prototyping creative features, or adding production-grade AI to your app, Replicate gives you fast, flexible access to state-of-the-art models.
12 |
13 | ## Why use Replicate with Lovable?
14 |
15 | Replicate fits naturally into Lovable’s AI-first app-building workflow. You can:
16 |
17 | - Generate dynamic visuals (e.g. course banners, avatars, scenes)
18 | - Use multimodal AI (image, video, speech, text-to-speech)
19 | - Add real-time content generation without running your own model infrastructure
20 |
21 | With Lovable’s built-in knowledge of Replicate’s API and models, integration takes minutes—not days. Just describe what you want, and Lovable handles the rest.
22 |
23 | ## Step by Step Tutorial
24 |
25 | In this tutorial, we walk through how to integrate Replicate into a Lovable application to dynamically generate course banner images, adding a new layer of interactivity and polish to your product. You’ll also learn how Replicate fits into Lovable’s broader AI workflow—including how to pair it with OpenAI for course content, Superbase for backend logic, and real-time AI conversations using [OpenAI’s WebRTC API](https://platform.openai.com/docs/guides/realtime#connect-with-webrtc).
26 |
27 |
28 |
29 |
30 |
31 | We start by creating a Spanish-learning web app with Lovable. This includes:
32 |
33 | - A user login flow
34 | - AI-powered chat for Spanish tutoring
35 | - Voice recording and playback
36 | - Translation features
37 |
38 | This gives users a personalized AI tutor that they can talk to, type to, and learn with.
39 |
40 | 
41 |
42 |
43 | We enhance the app with AI-generated courses:
44 |
45 | 
46 |
47 | - Users define a topic (e.g., _Questions to ask at a barbecue_).
48 | - An OpenAI-powered function creates 10 multiple choice questions in Spanish.
49 | - Courses are saved to the user's account with Supabase and can be revisited anytime.
50 | 
51 | - Users get feedback on each question with explanations.
52 | - Automatically generate a **course banner image** that matches the topic. Replicate uses the **Flux Schnell** model for fast image generation and dynamically inject the image into the course page.
53 |
54 |
55 | **How it Works:**
56 |
57 | 1. We call the Replicate API when a new course is created.
58 | 2. The prompt is dynamically generated based on the course topic.
59 | 3. Replicate returns an image URL, which is used as the banner for the course.
60 |
61 | 
62 |
63 |
64 | Now, let’s make things visual with Replicate.
65 |
66 | 
67 |
68 | **Example Prompt:**
69 |
70 |
71 | A beautiful, educational, and engaging scene about topic in digital art style. Vibrant colors. No text on image.
72 |
73 | **Example Response Handling:**
74 |
75 | Some Replicate models return a single image URL, others return an array. Make sure your Lovable function correctly extracts the output, e.g.:
76 |
77 | ```
78 | const imageUrl = response.output[0]
79 | ```
80 |
81 |
82 | Replicate’s Playground makes it easy to test prompts and get code snippets:
83 |
84 | - Tweak prompts until you're happy with the output
85 | - Use the API snippet generator for Node.js, Python, etc.
86 | - Copy-paste directly into Lovable's backend functions
87 |
88 |
89 | Use Playground Beta to compare multiple outputs at once.
90 |
91 | 
92 |
93 |
94 | To simulate human conversations, we added a real-time Spanish-speaking feature using OpenAI’s WebRTC API:
95 |
96 | - Users can speak directly to their AI tutor.
97 | - The AI understands, responds, and corrects pronunciation in real time.
98 | - This makes language learning much more immersive and practical.
99 |
100 | This feature integrates smoothly with Lovable’s voice input, WebRTC handling, and frontend chat UI.
101 |
102 | 
103 |
104 |
105 |
106 | ## Tips & Gotchas
107 |
108 | - **Model Output Variance**: Replicate models differ in how they return outputs. Always inspect the actual JSON returned from the playground.
109 | - **Prompt Iteration is Key**: Small prompt changes can greatly affect image quality. Use the playground to experiment.
110 | - **Backend Logs**: Use Supabase Edge logs to debug your API calls. Lovable supports in-app log fetching.
111 | - **Version Control in Lovable**: Each prompt edit is auto-committed, but you can manually track checkpoints using the “Deploy” feature for production-ready states.
112 |
113 | ## FAQ
114 |
115 |
116 |
117 | Replicate is a platform that lets you run powerful machine learning models (like image or video generation) using a simple API—no need to train or host models yourself.
118 |
119 |
120 | Replicate is popular with indie hackers, startup builders, and large enterprises alike. Whether you're prototyping an AI feature or deploying at scale, Replicate supports both quick hacks and robust deployments.
121 |
122 |
123 | Yes. Lovable securely stores your keys and handles API calls for you once added.
124 |
125 |
126 | Replicate supports many modalities including:
127 |
128 | - Image generation (e.g. Flux Schnell)
129 | - Video generation
130 | - Audio and text-to-speech
131 | - Language models (though not Replicate’s main focus)
132 | - Custom Cog models (open-source Dockerized models you can deploy)
133 |
134 | Explore them all at [replicate.com/explore](https://replicate.com/explore).
135 |
136 |
137 | Use Replicate’s **Playground** to test different models before integrating them. The Playground lets you tweak prompts, compare outputs, and copy working code snippets for your app.
138 |
139 |
140 | Replicate has two API formats:
141 |
142 | - The original (`/predictions`) endpoint: most widely known and used.
143 | - The newer `/models/{owner}/{model}/versions/{id}/predictions` endpoint: more efficient and flexible.
144 |
145 | Lovable integrates with both depending on the model’s requirements.
146 |
147 |
148 | Model outputs vary. Some return a string URL, others return an array. Use the Replicate Playground to inspect the real response and update your parsing logic accordingly.
149 |
150 | Example fix:
151 |
152 | ```
153 | const imageUrl = Array.isArray(output) ? output[0] : output;
154 | ```
155 |
156 |
157 | You can choose:
158 |
159 | - **One-time generation on course creation**: Saves compute costs and creates a consistent visual identity.
160 | - **Dynamic generation per session**: If you want fresh visuals each time.
161 |
162 | In the tutorial, we chose to generate the image once when the course is first created.
163 |
164 |
165 | Yes\! Lovable has built-in knowledge about Replicate and many of its popular models. It can auto-generate integration code for you using the right packages and prompt structure.
166 |
167 |
168 | Lovable automatically installs and configures packages when needed, based on your prompt and integration context. You don’t have to npm install manually unless debugging locally.
169 |
170 |
171 | - Use Lovable’s **Superbase Edge function logs** to trace issues.
172 | - If there’s a mismatch between expected vs. actual Replicate response, update your JSON handling.
173 | - Use the **“Fix this”** button in Lovable to retry or refactor the function logic.
174 |
175 |
176 | Currently, every prompt change creates a commit. You can:
177 |
178 | - Use the **History** tab to navigate commits (including bookmarking commits)
179 | - **Deploy** a version to make it a production checkpoint
180 | - GitHub sync is available for custom version control
181 |
182 |
183 | You can export your Lovable project to GitHub with **two-way sync**:
184 |
185 | - Lovable pushes changes to GitHub
186 | - You (or your team) can make changes in an IDE and push back
187 | - Works great for frontend in Lovable \+ backend in your own editor
188 |
189 |
190 | These are simplified markdown-based docs optimized for language models. Replicate is actively working on adding these to help Lovable (and other tools) better understand its models automatically.
191 |
192 |
193 | Yes, prompt crafting is essential. Lovable helps with auto-prompting and templating, but you should always test in the Replicate Playground to refine the inputs for best results.
194 |
195 |
196 |
197 | ## Resources
198 |
199 | - Explore [Replicate API Docs](https://replicate.com/docs), [Replicate’s model catalog](https://replicate.com/)
200 | - Learn more about [OpenAI Function Calling](https://platform.openai.com/docs/guides/function-calling), [OpenAI WebRTC](https://platform.openai.com/docs/guides/speech/real-time-speech)
--------------------------------------------------------------------------------
/introduction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Welcome"
3 | description: "Build real web apps fast using natural language with Lovable"
4 | icon: "door-open"
5 | ---
6 |
7 | import { discordInviteLink, DiscordLink } from '/snippets/discord.mdx'
8 |
9 | Lovable is an AI-powered platform that enables users of any skill level to create full-stack web applications without requiring coding expertise by simply describing what they want in plain English. Instead of hiring developers, users can generate web apps or websites instantly. - taking you **from idea to app** as fast as possible.
10 |
11 | ## Product Capabilities
12 |
13 | 
14 |
15 | The platform provides all the tools you need to create amazing websites, front-end applications as well as full-stack web applications from one browser tab - in installation required. Lovable includes AI coding tools, real-time collaboration (beta test), and project sharing to give you a head start on your app creation journey.
16 |
17 | | Capability | Description | Maturity Level |
18 | | ---------------- | ------------------------------------------- | -------------- |
19 | | Frontend / UI | Build user interfaces & frontend | 🟢 Mature |
20 | | Persistence | Store and retrieve data | 🟢 Mature |
21 | | Authentication | Handle user login and accounts | 🟢 Mature |
22 | | Backend endpoint | API key protected endpoint such as OpenAI | 🟢 Mature |
23 | | Deployment | Publish, custom domains & deploy | 🟢 Mature |
24 | | Collaboration | Collaborate with other users within project | 🟢 Mature |
25 | | Real-time sync | Sync data across users in real-time | 🟢 Mature |
26 |
27 | ## Quick Start
28 |
29 | To create your app on Lovable, choose the guide that matches your needs:
30 |
31 |
32 |
33 | Step-by-step tutorial for a simple introduction to key features and concepts.
34 |
35 |
36 | Go beyond default features by integrating with third parties like Supabase, Stripe or others.
37 |
38 |
39 | Learn effective prompting strategies and get the most out of Lovable.
40 |
41 |
42 | Add your own domain to any Lovable site app.
43 |
44 |
45 | Learn how to deploy, share, and get traffic to your web applications with Lovable.
46 |
47 |
48 | Browse and use project templates to quickly start your next project.
49 |
50 |
51 | Get a full overview of how to build an app with Lovable.
52 |
53 |
54 | Resolve issues in your development lifecycle.
55 |
56 |
57 | Getting the Most Out of Lovable.
58 |
59 |
60 | Collaborate on your app in real time with teammates.
61 |
62 |
63 |
64 | ## What is Lovable
65 |
66 |
67 | LOVABLE
68 |
69 | Letting Ordinary Visionaries Achieve Breakthroughs with Language-based Engineering
70 |
71 |
72 | Lovable is an AI-powered platform that lets you create and deploy apps from a single browser tab. The platform eliminates the complexity of tradition app-creation environments by combing coding, deployment, and collaboration tools in a single interface.
73 |
74 | Typically, you must install programs, languages, and packages to build apps. However, on Lovable, you can rely on AI to configure your environment so you can start building without coding experience.
75 |
76 | The platform supports full-featured development and coding environments for those familiar with coding as well as those who are not, so there's no limit on what's possible.
77 |
78 | - Complete app generation and setup from natural language description.
79 | - Code suggestions and autocomplete.
80 | - Automated error detection and debugging assistance.
81 | - Documentation generation for your app.
82 | - App deployment to the cloud in a few clicks.
83 | - Database integration and hosting with Supabase native integration.
84 | - Custom domain support and connection.
85 |
86 | ## Stay Connected
87 |
88 |
89 |
90 | Have an idea? Share it and let the community vote.
92 |
93 |
94 | Publish your app to get in front of thousands of people.[
95 | ](https://lovable.dev/partners)
96 |
97 |
98 | Join as an expert, or get help from our network of experts.[
99 | ](https://lovable.dev/partners)
100 |
101 |
102 | Receive a 20% commission on the first 12 payments.
103 |
104 |
105 | Follow us on [Twitter](https://twitter.com/Lovable_dev) for the latest updates and announcements.
106 |
107 |
108 | Upvote on our product launches.
109 |
110 |
111 |
112 | ## Support
113 |
114 |
115 |
116 | Get help from our Community and Community Champions.
117 |
118 |
119 | Found a bug or an issue? Let us know.[
120 | ](https://lovable.dev/partners)
121 |
122 |
123 | Direct support channel for paying users.
124 |
125 |
126 |
127 | ## Learn More
128 |
129 |
130 |
131 | Learn more about Lovable.
132 |
133 |
134 | Learn the key development terms.
135 |
136 |
137 | Join the Lovable team.
138 |
139 |
140 | Compiled notes from the Lovable team.
141 |
142 |
--------------------------------------------------------------------------------
/invite-lovable-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/invite-lovable-2.png
--------------------------------------------------------------------------------
/knowledge-project-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/knowledge-project-lovable.png
--------------------------------------------------------------------------------
/logo-new-dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/logo-new-light.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/logo/light.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/logos.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "New file"
3 | description: "Description of your new file."
4 | ---
5 |
6 | 
7 |
8 | 
9 |
10 | 
--------------------------------------------------------------------------------
/lovable-editor-v2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/lovable-editor-v2.png
--------------------------------------------------------------------------------
/lovable-helper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/lovable-helper.png
--------------------------------------------------------------------------------
/lovable-prompts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/lovable-prompts.png
--------------------------------------------------------------------------------
/navigation-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/navigation-menu.png
--------------------------------------------------------------------------------
/prompt2mvp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/prompt2mvp.jpg
--------------------------------------------------------------------------------
/publish-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/publish-button.png
--------------------------------------------------------------------------------
/publish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/publish.png
--------------------------------------------------------------------------------
/published-link-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/published-link-lovable.png
--------------------------------------------------------------------------------
/security-scan-lovable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lovablelabs/docs/cf25ddc2e1179c8fbcbef75b5fb2fe6ac71ec978/security-scan-lovable.png
--------------------------------------------------------------------------------
/snippets/discord.mdx:
--------------------------------------------------------------------------------
1 | export const discordInviteLink = "https://discord.com/invite/rPw2rSFE2K";
2 |
3 | export const DiscordLink = () => {
4 | return Discord;
5 | };
6 |
--------------------------------------------------------------------------------
/tips-tricks/community.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Community"
3 | description: "Lovable community initiatives "
4 | icon: 'bullhorn'
5 | ---
6 |
7 |
8 |
9 | Share feature and integration requests.[
10 | ](https://feedback.lovable.dev/)
11 |
12 |
13 |
14 | Publish your app for visibility.[
15 | ](https://lovable.dev/partners)
16 |
17 |
18 |
19 | Join as an expert, or get help from our network of experts.[
20 | ](https://lovable.dev/partners)
21 |
22 |
23 |
24 | Receive a 10% commission on the first 6 payments.
25 |
26 |
27 |
28 | Follow us on [Twitter](https://twitter.com/Lovable_dev) for the latest updates and announcements.
29 |
30 |
31 |
32 | Get help from our Community and Community Champions.
33 |
34 |
35 |
36 | ## [Feature Requests](https://feedback.lovable.dev/)
37 |
38 | Share feature and integration requests, vote on ideas, and help shape Lovable's future.
39 |
40 | ## [Launched](https://launched.lovable.app/)
41 |
42 | A platform like Product Hunt where you can publish your app for visibility. [Learn more here.](https://docs.lovable.dev/features/deploy#launch-and-get-traffic)
43 |
44 | ## **Partner Program**
45 |
46 | Work with vetted solo builders and agencies to bring your ideas to life—fast and efficiently.
47 |
48 | ### **Why Use Hire a Lovable Partner?**
49 |
50 | * **Faster results** – Get projects done in a fraction of the usual time.
51 |
52 | * **Vetted experts** – Work with approved professionals.
53 |
54 | * **Focus on your vision** – Let experts handle the technical work.
55 |
56 | ### **How It Works**
57 |
58 | 1. [**Submit a request**](https://lovable.dev/)**:** Describe your project, timeline, and needs.
59 |
60 | 2. [**Browse Experts Directly**](https://lovable.dev/)**:** Find top-tier builders and agencies.
61 |
62 | 3. **Build & Launch:** Your expert handles the work, and you launch with confidence.
63 |
64 | ### [Become a Lovable Partner](https://lovable.dev/partners/apply)
65 |
66 | If you're a developer, designer, or agency, apply to become a partner and access a network of eager clients.
67 |
68 | ## Affiliate Program
69 |
70 | **Join** [**Friends of Lovable**](https://friends.lovable.dev/signup) and earn a 10% commission on the first 6 payments from customers you refer.
71 |
72 | ## Community & Socials
73 |
74 | * Follow on [X](https://x.com/lovable_dev): Join the [Lovable community on X](https://x.com/i/communities/1858851338257572046).
75 |
76 | * [**Discord Community**](https://discord.gg/lovable-dev) – Connect with builders and get support.
77 |
78 | ## Community Champion Program
79 |
80 | An exclusive group of Lovable advocates.
81 |
82 | #### Who Can Join?
83 |
84 | * Active Lovable users (3+ months)
85 |
86 | * Builders who share their journey publicly
87 |
88 | * Those who help others in the community
89 |
90 | * Passionate about Lovable and able to debug quickly
91 |
92 | #### Member Benefits
93 |
94 | * Early access to beta features
95 |
96 | * Private Discord channel with the Lovable team
97 |
98 | * Custom promo codes & affiliate links (on request)
99 |
100 | * Fast-track support
101 |
102 | * Special Discord roles
103 |
104 | * Lovable swag (when available)
105 |
106 | #### How to Join
107 |
108 | Membership is invite-only, but you can get noticed by:
109 |
110 | * Sharing Lovable on X, YouTube, TikTok, or other platforms
111 |
112 | * Helping others in [Discord](https://discord.gg/lovable-dev)
113 |
114 | * Connecting with existing champions (🥇)
115 |
--------------------------------------------------------------------------------
/tips-tricks/custom-fonts.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Using Custom (Google) Fonts"
3 | description: "Learn how to use web-safe fonts and Google Fonts in your Lovable projects"
4 | icon: "font"
5 | ---
6 |
7 | Currently, Lovable does not support direct uploads of custom fonts.
8 |
9 | However, there are several easy ways to use web-safe or incorporate custom fonts into your projects. Below, we’ll guide you through the available methods for **using web-safe** and **Google fonts**:
10 |
11 |
12 |
13 |
14 | **What are web-safe fonts?**
15 |
16 | Web-safe fonts are fonts that are commonly installed on most operating systems (Windows, macOS, Linux, etc.) and are visible on all devices.
17 |
18 | These fonts ensure that your text looks consistent across different browsers and platforms without needing to load any external resources. Some of the common web-safe fonts are:
19 |
20 | - Arial/Helvetica
21 | - Times New Roman
22 | - Georgia
23 | - Courier New
24 | - Verdana
25 | - Tahoma
26 | - Trebuchet MS
27 | - Lucida Sans Unicode
28 |
29 | If you want to use a web-safe font in your project, you can specify the font directly in your prompt. For example, if you want to use **Courier New** for a heading or title in the hero section, simply reference the font by name in your prompt.
30 |
31 | ```text
32 | Use Courier New as the heading font in the hero section for the main title.
33 | ```
34 |
35 | Web-safe fonts like Courier New ensure that your project will have consistent typography across all platforms without requiring external resources to load the font. However, they can limit your creativity. Lucikly, there are otions like the ability to use Google Fonts.
36 |
37 |
38 | If you prefer to use custom fonts, Lovable works nicely with **Google Fonts**. This allows you to easily use a wide range of fonts in your project. You can either reference a Google font by name or by linking directly to the font resource.
39 |
40 | ### Using by name
41 |
42 | In your prompt, you can specify the name of a Google font, and Lovable will include it in your project. For example:
43 |
44 | ```text
45 | Use Playfair Display as the first subtitle title font in the hero section.
46 |
47 | Make sure to use the useEffect React hook to apply the font properly.
48 | ```
49 |
50 | ### Using by link
51 |
52 | Alternatively, you can provide a direct link to the Google font, and Lovable will use that font in your project. You can get the link from [Google Fonts](https://fonts.google.com) by selecting the desired font and copying the link.
53 |
54 | Here’s how to prompt Lovable to use a Google font via a link:
55 |
56 | ```text
57 | Add this Google font link https://fonts.google.com/specimen/Dancing+Script
58 | and use this font for the third subtitle.
59 |
60 | Make sure to load the font using the useEffect React hook.
61 | ```
62 |
63 | By following these methods, you can customize the typography of your Lovable project using either web-safe fonts or Google Fonts.
64 |
65 | ## Further learning and examples
66 |
67 | To see these font integration methods in action, you can explore one of our example projects: [Lovable using fonts example project](https://lovable.dev/projects/3a826f38-d9cb-4d60-b4da-30a9b00149c8).
68 |
69 | In this project, you’ll find real prompts demonstrating how we applied different font styles, including web-safe fonts like Courier New and custom fonts from Google Fonts.
70 |
71 |
72 | 
73 |
74 | Additionally, for a more technical look at how fonts were integrated, check out this public repository: [GitHub: adding-fonts-example](https://github.com/viborc/adding-fonts-example). It includes the full implementation details, showcasing how various fonts were loaded and applied in the project.
75 |
76 |
--------------------------------------------------------------------------------
/tips-tricks/inspiration.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Inspiration time"
3 | description: "What are people building with Lovable?"
4 | icon: "lightbulb"
5 | ---
6 |
7 | People are building some cool things with Lovable, I'd love to share a few we like that are built fully or partially with Lovable:
8 |
9 | ## Landing Pages
10 |
11 | - [Dream Catcher](https://slumber-tale.lovable.app/) - Record, analyse and discover patterns in your dreams.
12 | - [Awaken Ambiance](https://preview--awaken-galaxy-voice-57.lovable.app/) - Real-time voice AI that responds naturally.
13 | - [Alpine Ventures](https://alpine.lovable.app/) - Investor in Product Obsessed Founders.
14 | - [PrintPigeon](https://printpigeon.co.uk/) - Send Letters Online With Ease.
15 |
16 | ## Educational Platforms
17 |
18 | - [Vpromise](https://vpromise.lovable.app/) - Interactive tools and innovative solutions for modern education.
19 | - [Backchannel](https://the-backchannel.lovable.app/) - System that flips the job search upside down.
20 | - [CAR33R](https://car33r.com/) - Cryptocurrency-powered hiring marketplace.
21 | - [Eva](https://eva.lovable.app/) - Receive your personalized AI recommendations.
22 | - [SkillStep](https://skillstep.lovable.app) - Help women find safe jobs and education in Europe.
23 | - [Tribbai](https://tribbai.com/) - Conversational AI platform.
24 | - [Elder Link](https://elder-voice-link-27.lovable.app/) - Helps seniors live independently while keeping family connected.
25 | - [CodeLearn](https://code-learn-olive.vercel.app/) - Interactive platform for learning programming through practical projects.
26 |
27 | ## Full-stack Products
28 |
29 | - [LOOK AI](https://lookfashion.ai/) (raised $500K) - AI-assisted search for clothing built with Lovable.
30 | - [Wiktok](https://wiktok.gptengineer.run/) - TikTok for Wikipedia pages.
31 | - [BluePrintA](https://blueprinta.xyz/) - Simplify Product Development.
32 | - [Dummy Forms](https://dummyforms.lovable.app/) - Easily create forms.
33 | - [Wildcard AI](https://wild-card.ai/) (YC) - Intelligent tool selection API for AI agents.
34 | - [Aneta](https://www.aneta.so/) - AI agents to supercharge HR and workplace engagement.
35 | - [BlueMint AI](https://blue-mint-scribe.lovable.app/) - AI that transforms product ideas into detailed, developer-ready blueprint spec.
36 | - [FigTask](https://preview--figma-commentary.lovable.app/) - Turn Figma Comments into Kanban Board Design Tickets.
37 | - [Stardust Analytics](https://stardust-insights.lovable.app/) - Helps Shopify store owners find the exact KPI blocking their growth.
38 | - [Funnel Forms](https://funnelforms-saas.lovable.app) - Boost your lead conversion with intelligent forms.
39 | - [Geschenkt](https://geschenkt.lovable.app/) - Craigslist on steroids.
40 | - [Your YT](https://youryt-dash-brain.lovable.app/) - Organize and interact with your YouTube videos intelligently.
41 | - [Access AI](https://voice-embeddable-widget.lovable.app/dashboard) - Transform any site into a voice-interactive experience.
42 | - [Magican](https://magican.lovable.app) - Infinite canvas platform.
43 | - [HealthSync](https://healthsync-360.lovable.app/) - Management platform that integrates insights with personal health tracking.
44 | - [Le Chat](https://le-chat.lovable.app/) - Mistral's Le Chat clone.
45 | - [Elora Health](https://x.com/elorahealth) - Digital health app that sets challenges across all your health dimensions.
46 | - [Dummy Forms](https://lovable.dev/blog/2025-01-20-how-a-canadian-infanteer-built-10-apps-in-record-time-with-lovable-dev) - Create Beautiful Forms in Minutes.
47 | - [ChatPDF](https://enchanted-kids-library.lovable.app/) - Talk to your documents naturally.
48 | - [Pixel Prompt Garden](https://preview--pixel-prompt-garden.lovable.app/) - AI images generator.
49 | - [Cherishable](https://t.co/izGayyDFcc) - Make videos from images.
50 | - [RaiseFlow](https://raiseflow.io/) - An investor CRM.
51 | - [Sherlock](https://sherlockai.lovable.app/) - Find talent with AI-powered precision.
52 |
53 | ## Games
54 |
55 | - [Echo of the Forge](https://echo-omi-graph.lovable.app/) - AI narrative experience that adapts to your choices.
56 | - [Kaleidoscope](https://kaleidoscope-visionary.lovable.app/) - Text prompt to generate a 3D space.
57 | - [Color Islands](https://color-islands.lovable.app/) - Multiplayer game.
58 |
59 | You can find more apps built with Lovable on [Lovable Launched](https://launched.lovable.app/) or by browsing ['lovable' on X](https://x.com/search?q=lovable&src=typed_query).
--------------------------------------------------------------------------------
/tips-tricks/mobile-store.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Mobile Support"
3 | description: "Publish a Lovable Web App to Both App Stores."
4 | icon: "mobile"
5 | ---
6 |
7 | ## Workaround Playbook
8 |
9 | This is the playbook for publishing a Lovable Web App to Both App Stores, Apple App Store and Google Play Store:
10 |
11 |
12 | This is a workaround, nothing official on our side or native integration for mobile support.
13 |
14 | You can request the official feature [here](https://feedback.lovable.dev/p/mobile-app-stack).
15 |
16 |
17 |
18 |
19 |
20 |
21 | Finalize the app’s UI and features inside Lovable.dev, ensuring everything functioned smoothly on different devices.
22 |
23 |
24 | Conduct multiple tests to check responsiveness and performance.
25 |
26 |
27 |
28 |
29 | - **Apple App Store:** Register for an Apple Developer Account ($99/year), configured necessary certificates, provisioning profiles, and App IDs.
30 | - **Google Play Store:** Set up a Google Play Developer Account ($25 one-time fee), ensuring proper API access and compliance.
31 |
32 |
33 | Use a web-to-native wrapper to package the Lovable web app for app store submission.
34 |
35 | - For iOS, use Xcode to meet Apple’s strict submission guidelines.
36 | - For Android, work with Android Studio to test and prepare the app for Play Store approval.
37 |
38 |
39 | Create detailed App Store and Play Store listings, including descriptions, screenshots, keywords, and privacy policies.
40 |
41 | - Apple’s review process took 48-72 hours before approval.
42 | - Google Play approval was much faster—less than 24 hours.
43 |
44 |
45 | - Monitore app performance and user feedback to ensure everything ran smoothly.
46 | - Implement updates and optimizations for better discoverability and engagement.
47 |
48 |
49 |
50 | The process has its challenges, especially with Apple’s strict guidelines and broken link setback, but it is all worth it in the end\\!
51 |
52 | Lovable definitely made the process smoother.
--------------------------------------------------------------------------------
/tips-tricks/multiple-users.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Multiple Users'
3 | description: 'Learn about current options for team collaboration in Lovable'
4 | icon: 'user'
5 | ---
6 |
7 | At this time, Lovable doesn't fully support team plans or multiple users on the same project. We are actively considering this feature for future updates. However, we've noticed that some users have found a workaround for collaborating on the same project.
8 |
9 | The workaround involves creating a single account (registering through the regular sign-up process) and then sharing the credentials for that account with the users you want to give access to.
10 |
11 | This allows multiple people to log in and work on the same project (not at the same time, however!)
12 |
13 |
14 | **Be cautious when sharing account credentials**
15 |
16 | If you choose to share an account with others, please only do so with trusted users. Everyone using the shared account will have access to the same information, projects, and edits, and it will be impossible to track who made specific changes.
17 |
18 | For security and accountability, we recommend being very cautious when sharing your credentials.
19 |
20 |
21 |
22 | **Consider separate login credentials**
23 |
24 | If you signed up using Google or GitHub sign-in, and you share those login details with others, you are also granting them access to your Google or GitHub account. This could expose sensitive personal information.
25 |
26 | A safer approach would be to create a separate email account specifically for Lovable and share that account instead, to avoid giving access to unrelated services like your Gmail or GitHub repositories.
27 |
28 |
29 | Please note that this is not an officially supported feature of Lovable but rather a workaround that we've observed users employing.
30 |
31 | We recommend considering the risks before proceeding with this method.
--------------------------------------------------------------------------------
/tips-tricks/seo.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "SEO"
3 | description: "Rank #1 on Google on day one!"
4 | icon: "magnifying-glass"
5 | ---
6 |
7 | **Search Engine Optimization (SEO)** helps your pages rank higher on Google and other search engines, making them more discoverable. Lovable makes it easy to follow SEO best practices.
8 |
9 | This guide walks you through how to optimize your Lovable-generated pages for search engines and maximize visibility.
10 |
11 |
12 |
13 | Metadata plays a crucial role in how search engines understand and display your content. Lovable can automatically generate:
14 |
15 | - **Title Tags** – Optimized based on page content.
16 | - **Meta Descriptions** – AI-generated summaries that improve click-through rates.
17 | - **Keywords** – Relevant keyword suggestions based on content.
18 |
19 |
20 | **Pro Tip:**
21 |
22 | When prompting Lovable, include “Follow SEO best practices” to ensure metadata is included.
23 |
24 |
25 |
26 | A sitemap helps search engines crawl and index your website efficiently. Lovable allows you to:
27 |
28 | - Generate an XML **sitemap** for your project.
29 | - Submit the sitemap to **Google Search Console** for faster indexing.
30 |
31 | Ensure **all important pages are indexed** correctly.
32 |
33 | **How to Generate a Sitemap in Lovable:**
34 |
35 |
36 |
37 | Ask Lovable to **"Create a sitemap"** for your project.
38 |
39 |
40 | Download the **sitemap.xml** file.
41 |
42 |
43 | Submit it to **Google Search Console** under “Sitemaps.”
44 |
45 |
46 |
47 |
48 | The `robots.txt` file tells search engines which pages they should or shouldn’t crawl. Lovable can create and customize this file for you.
49 |
50 | **Steps to Add a robots.txt File:**
51 |
52 |
53 |
54 | Prompt Lovable with **"Generate a robots.txt file for my site."**
55 |
56 |
57 | Customize the file to allow or block search engines from specific pages.
58 |
59 |
60 | Upload it to your site’s root directory.
61 |
62 |
63 |
64 |
65 | Headings (H1, H2, H3…) help search engines understand your content. Lovable ensures:
66 |
67 | - **H1 tags are unique and descriptive.**
68 | - **H2 and H3 tags** organize content logically.
69 | - **Keyword-rich headings** are included where relevant.
70 |
71 |
72 | **Best Practice:**
73 |
74 | Keep only **one H1 per page** and structure content hierarchically with H2 and H3 subheadings.
75 |
76 |
77 |
78 | Internal links help users and search engines navigate your site. Lovable can:
79 |
80 | - Suggest **relevant internal links** between pages.
81 | - Ensure **logical site architecture** for easy indexing.
82 | - Improve **page authority** with proper linking strategies.
83 |
84 | **How to Add Internal Links in Lovable:**
85 |
86 |
87 |
88 | Use prompts like **"Suggest internal links for this page."**
89 |
90 |
91 | Manually add links to **related content** within your project.
92 |
93 |
94 | Keep anchor text descriptive and relevant.
95 |
96 |
97 |
98 |
99 | Schema markup enhances how your pages appear in search results (e.g., showing ratings, FAQs, or event details). Lovable supports:
100 |
101 | - **Basic schema markup** for articles, FAQs, and products.
102 | - **SEO-optimized structured data** that Google understands.
103 |
104 | **How to Use Schema in Lovable:**
105 |
106 |
107 |
108 | Ask Lovable: **"Generate schema markup for this page."**
109 |
110 |
111 | Copy the JSON-LD code and insert it into your site.
112 |
113 |
114 | Validate it using **Google’s Rich Results Test.**
115 |
116 |
117 |
118 |
119 | - **Optimize images** with alt text and compressed file sizes.
120 | - **Avoid duplicate content** by making each page unique.
121 | - **Use long-tail keywords** to target niche searches.
122 | - **Keep content fresh** with regular updates.
123 |
124 |
125 | When sharing your project on social media, you can customize the preview image in two ways:
126 |
127 |
128 |
129 | Upload an image and use a simple prompt like:
130 |
131 |
132 | **Example prompt**
133 |
134 | ```
135 | Can you change the image that appears when the site is shared on social media platforms to the one above?
136 | ```
137 |
138 |
139 |
140 |
141 |
142 | Click **Edit code** (top right of your project).
143 |
144 |
145 | Connect your project to GitHub if you haven’t already. Follow our [GitHub integration guide](https://docs.lovable.dev/integrations/git-integration).
146 |
147 |
148 | Open your project repository and navigate to the `public` folder.
149 |
150 |
151 | Replace the existing `og-image.png` with your new image.
152 |
153 |
154 | Rename your new image to `og-image.png`.
155 |
156 |
157 | **Redeploy your project** to apply the changes.
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 | ## FAQ
166 |
167 |
168 |
169 | Google typically indexes pages within a few hours to a few days. Submitting a sitemap speeds up this process.
170 |
171 |
172 | Check if your sitemap is submitted and ensure your content follows SEO best practices.
173 |
174 |
175 | Yes\! Lovable ensures mobile-friendly page structures automatically.
176 |
177 |
--------------------------------------------------------------------------------
/tips-tricks/setting-up-payments.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Stripe & Payments"
3 | description: "How to set up payments in your app using our Stripe integration"
4 | icon: "credit-card"
5 | ---
6 |
7 | 
8 |
9 | Lovable now lets you set up Stripe entirely through **chat**.
10 |
11 | **Chat‑driven auto‑setup (recommended)**
12 | After you connect **Supabase** and save your **Stripe Secret Key** via **Add API Key**, just describe what you need:
13 | - “Add three subscription tiers …”
14 | - “Create a one‑time checkout for my e‑book at $29”
15 | Lovable generates the checkout / portal edge functions, database tables with RLS, and UI buttons—no manual coding or webhooks unless you ask for them.
16 |
17 |
18 |
19 | * For **one‑off sales**, be sure your cart or product page already works.
20 | * For **subscriptions**, confirm Supabase Auth is in place so Lovable can link Stripe customers to each user’s **id**
21 |
22 |
23 |
24 | ### Key Takeaways
25 |
26 | - Use the **chat‑driven flow** for both subscriptions and one‑off payments.
27 | - **Never paste your Stripe Secret Key in chat.** Configure it via the in-chat **Add API Key** form.
28 | - **Webhooks are opt‑in.** Lovable relies on edge‑function polling unless you request webhooks.
29 | - Debug in **Browser Console → Network/Errors**, **Supabase → Edge Functions → Logs**, and **Stripe Dashboard → Logs**.
30 | - Always test in **Stripe Test Mode**, then deploy.
31 |
32 | ## Requirements
33 |
34 | Before integrating Stripe, ensure the following prerequisites are met:
35 |
36 | - The project **must** be connected to Supabase. [Learn more about Supabase](https://docs.lovable.dev/integrations/supabase)
37 | - A **Stripe account** with properly configured products.
38 | - A working **frontend and backend**:
39 | - For individual product sales, ensure a shopping cart and checkout page are functional.
40 | - For subscriptions, set up login functionalities and different pricing tiers.
41 |
42 |
43 | **Please note**
44 | Stripe integration doesn't work in preview. To test the integration, make sure to deploy. You should also make sure to be in test mode in Stripe when trying out the functionality. When testing payment, card number: 4242 4242 4242 4242, any 3 digits as CVC and any future date will work as a card.
45 |
46 |
47 | ## Stripe Payment Setup (No‑Code Chat Flow)
48 |
49 | Lovable now generates all Stripe logic for you. Once your **Stripe Secret Key** is configured via the in-chat **Add API Key** form and your project is **connected to Supabase**, simply tell Lovable what you need in chat—no manual Payment Links required.
50 |
51 |
52 |
53 | **Prep your project**
54 |
55 | - Supabase connected
56 | - Stripe Secret Key added via the in-chat **Add API Key** form
57 | - (Optional) Prices or product IDs handy
58 |
59 |
60 | Examples:
61 |
62 | - Create a one-time checkout for my "Digital Course" at $29
63 | - Set up an annual Premium plan for $99, tied to each user's id
64 |
65 |
66 | **Review & apply**
67 | Lovable auto‑scaffolds the Edge Functions, database tables, and UI components (all tied to the user's id in Supabase). Check the preview, then click **Apply** to deploy.
68 |
69 |
70 |
71 |
72 | - Subscriptions should always linked to the authenticated user’s `id` in Supabase for secure, role‑based access.
73 |
74 |
75 | ## Advanced Integration: Webhooks & Supabase
76 |
77 | For complex payment structures such as **subscriptions and role-based access**, Lovable recommends using **Supabase** to securely handle Stripe integration. This allows for proper webhook handling, subscription management, and role-based access control based on payment tiers.
78 |
79 |
80 | The Edge Function that handles the necessary changes to the user account should be set up automatically by the AI.
81 |
82 |
83 |
84 |
85 | Getting started is simple. Lovable makes connecting Supabase effortless with a built-in native integration:
86 |
87 | 1. Click the **Supabase button** in the top right corner of Lovable.
88 | 2. Follow the instructions to link your project.
89 | 3. Once connected, Supabase enables secure payment processing, subscription management, webhook handling, customer data storage, and error handling.
90 |
91 |
92 | Initiate the process by prompting Lovable:
93 |
94 |
95 | Let's connect Stripe to my project. We will begin with secure payment processing.
96 |
97 | Lovable will generate the necessary SQL schema for handling payments. This includes database tables for users, subscriptions, and payments. You can review and customize these tables to fit your specific product needs before applying changes.
98 |
99 |
100 | **Edge Functions** in Supabase act as small, high-performance serverless functions that run close to the user, ensuring fast responses. They help process webhook events, such as payment confirmations, before updating the database.
101 |
102 |
103 |
104 | **Retrieve the Endpoint URL** from the Edge Function in Supabase.
105 |
106 |
107 | **Go to Stripe Dashboard** \> Developers \> Webhooks \> Create an Event Destination.
108 | 
109 |
110 |
111 | **Select Webhook Events** that align with your project needs:
112 |
113 | - `payment_intent.succeeded`
114 | - `payment_intent.payment_failed`
115 | - `customer.subscription.created`
116 | - `customer.subscription.updated`
117 | - `customer.subscription.deleted`
118 |
119 |
120 | **Enter the Endpoint URL** from Supabase.
121 |
122 |
123 | **Copy the Webhook Secret** and store it securely in **Supabase → Edge Functions → Manage Secrets → Add New Secret**.
124 |
125 |
126 | If unsure about naming the secret, ask Lovable in **chat mode** for guidance.
127 |
128 |
129 |
130 |
131 |
132 | To integrate Stripe securely, avoid sharing your API key directly in chat. Instead:
133 |
134 | .png)
135 |
136 |
137 |
138 | **Go to Stripe Dashboard** \> Developers \> API Keys.
139 |
140 |
141 | **Copy the Secret Key** (DO NOT paste it directly in Lovable chat).
142 |
143 |
144 | **Use the Lovable "Add API Key" feature** to securely store it.
145 |
146 |
147 | **Important Security Warning**
148 |
149 | Never paste your **Secret Key** directly in Lovable chat. Treat it like the keys to your house—exposing it could allow unauthorized access to your Stripe account. Instead, store it securely using Lovable's API key feature.
150 |
151 |
152 |
153 |
154 |
155 | - **Use Stripe's Test Mode** to safely test payments.
156 | - **Test card details**:
157 | - Card Number: `4242 4242 4242 4242`
158 | - Any future expiration date
159 | - Any 3-digit CVC
160 | - **Deploy your app**—Stripe integration does not work in preview mode.
161 |
162 |
163 |
164 | ## Debugging & Troubleshooting
165 |
166 |
167 |
168 |
169 |
170 | Open **Developer Tools** (Right-click \> Inspect \> Console in Chrome).
171 |
172 |
173 | Look for errors and review webhook event logs.
174 |
175 |
176 | Copy error messages and ask Lovable for debugging assistance.
177 |
178 |
179 |
180 |
181 |
182 |
183 | Go to **Supabase Dashboard**
184 |
185 |
186 | Edge Functions
187 |
188 |
189 | Logs to check for webhook errors.
190 |
191 |
192 |
193 |
194 |
195 |
196 | Navigate to **Stripe Dashboard**
197 |
198 |
199 | Webhook logs
200 |
201 |
202 | Confirm that Stripe is sending data correctly.
203 |
204 |
205 |
206 |
207 |
208 |
209 | Switch to **chat mode** and ask Lovable follow-up questions.
210 |
211 |
212 | Ask Lovable follow-up questions.
213 |
214 |
215 | Use the **Rubber Duck Method** & explain your issue step by step to clarify the problem.
216 |
217 |
218 |
219 |
--------------------------------------------------------------------------------
/tips-tricks/using-images.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Using images in Lovable"
3 | description: "Learn how to add images to your Lovable projects"
4 | icon: "frame"
5 | ---
6 |
7 | To add images you can do one of four things:
8 |
9 |
10 |
11 | Simply upload them in the chat and explain to Lovable’s AI where and how you’d like them to appear in your project.
12 |
13 |
14 |
15 |
16 | You can replace an existing image directly using the [visual editor](https://docs.lovable.dev/features/precision-edit#visual-edits) functionality:
17 |
18 |
19 |
20 | Click on "Edit" tool.
21 |
22 |
23 | Select the image holder you would like to change.
24 |
25 | 
26 |
27 |
28 | Change the image.
29 |
30 | 
31 |
32 |
33 |
34 |
35 | One way to add images to your project is by referencing an image from an external URL. This method allows you to use images hosted on external platforms like Unsplash, Imgur, or any other image-hosting service. Be mindful of use copyrights\!
36 |
37 | Here’s how to prompt Lovable to use an external image:
38 |
39 |
40 |
41 | Find the image you want to use.
42 |
43 | For example, you can visit a site like Unsplash, select an image, and copy its URL.
44 |
45 |
46 | In your project prompt, simply tell Lovable to use that image by specifying the URL. For example:
47 |
48 | ```
49 | Use the image from this URL
50 | https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png
51 | for the hero section image.
52 | ```
53 |
54 |
55 |
56 |
57 | Another method to add images to your Lovable project is by using images uploaded to the `public` directory of your connected GitHub repository. Here’s how you can do it:
58 |
59 |
60 |
61 | Ensure your project is connected to your GitHub repo. [Here's how to connect your repo](https://docs.lovable.dev/integrations/git-integration).
62 |
63 |
64 | Inside your GitHub repository, navigate to the `public` directory. This folder is typically used for hosting assets like images that can be referenced in your project.
65 |
66 |
67 | Click on **Add file** and then from a dropdown, select **Upload files** option.
68 | 
69 |
70 |
71 | The next step is to transfer your image to your repo:
72 |
73 | - Drag and drop the image into the public folder, or
74 | - Click on the **"choose your files"** link to browse and select the image file.
75 | 
76 |
77 |
78 | After selecting your image, write a simple commit message (e.g., "Adding image files to be used in the app") and click **"Commit changes"** to save the file to your repo.
79 |
80 |
81 | Once the file is uploaded, select it and then click on the copy icon next to the file name to copy the image’s path. This path will be used in your Lovable prompt.
82 | 
83 |
84 |
85 | You can now reference this image in your project by using a prompt like the following:
86 |
87 | ```
88 | Add an additional image to the hero section.
89 | This time, use this one from my local repo: public/c-64-close-up.jpg.jpeg
90 | ```
91 |
92 | Be sure to use your image name and path you copied in the previous step.
93 |
94 |
95 | Uploading large images to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox).
96 |
97 | Try to optimize your images before uploading them to your `public` folder by compressing them and using dimensions that are relevant to your use case. For example, don't use a full HD-sized image if it will only be displayed as a small icon.
98 |
99 |
100 |
101 | To help you better understand how to integrate images using the methods outlined above, we have a project you can explore: [Lovable Project Example](https://lovable.dev/projects/e823fedf-238d-4313-86a8-1fd4bfc2a9ba). In this project, you can see the actual prompts and how each method works in practice.
102 |
103 | Additionally, here's a public GitHub repository that includes the commits, uploaded images, and full implementation details. You can view the repository here: [GitHub: Adding Images Example](https://github.com/viborc/adding-images-example).
104 |
105 | Feel free to explore the project and repository to deepen your understanding and improve your implementation skills.
106 |
107 |
--------------------------------------------------------------------------------
/tips-tricks/using-videos.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Using Videos"
3 | description: "Learn how to embed videos in your projects using external links or GitHub uploads"
4 | icon: "film"
5 | ---
6 |
7 | Lovable offers two methods for embedding videos into your projects. Below, we’ll cover both options step by step:
8 |
9 |
10 |
11 |
12 | The simplest and recommended way to incorporate a video is by linking to one hosted externally, like on YouTube.
13 |
14 |
15 |
16 | ```txt Example prompt
17 | Embed this video
18 | https://www.youtube.com/watch?v=dQw4w9WgXcQ
19 | in the hero content section.
20 | ```
21 |
22 |
23 |
24 |
25 |
26 | Uploading large videos to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox).
27 |
28 | A better option is to use hosted services (like YouTube) or file storage options like S3, essentially giving you a URL that you can reference, as described in the previous steps.
29 |
30 | You can upload videos to your project’s GitHub repository and reference them directly. Here’s how:
31 |
32 |
33 |
34 | First, make sure your project is linked to a GitHub repo. [Here’s how to set up your repo](https://docs.lovable.dev/integrations/git-integration).
35 |
36 |
37 | Inside your connected repository, navigate to the `public` directory. This folder is specifically used for hosting project assets like images, videos, and other media.
38 |
39 |
40 | You can now add your video to the public folder by either dragging and dropping it or clicking **"choose your files"** to browse and upload the file from your local machine.
41 |
42 |
43 | After selecting your video file, enter a brief commit message (e.g., "Adds a Mars video to be used in the app") and click **"Commit changes"**.
44 | 
45 |
46 |
47 | Once the upload is complete, click on the video file and use the copy icon :octicons-copy-16: to copy its path. You’ll need this path in the next step.
48 | 
49 |
50 |
51 | Now, you can embed the video by specifying the file path in your prompt. For example, you can use a prompt like this one:
52 |
53 |
54 |
55 | ```bash Example prompt
56 | Insert an additional video into the introduction section using this file:
57 | public/mars-video-nasa.mp4
58 | ```
59 |
60 |
61 |
62 | Ensure you use the exact file path you copied earlier.
63 |
64 |
65 | To see these methods in action, explore one of the example projects: [Lovable using videos example project](https://lovable.dev/projects/380835ab-c8d7-4f45-9b0d-51ec04294457). You’ll find real prompts demonstrating how videos are integrated using both methods.
66 |
67 | Additionally, for a more technical look at the video adding process, check out this public repository: [GitHub: Video Upload Example](https://github.com/viborc/adding-videos-example). It includes the video upload and the implementation details used in the project.
68 |
69 |
--------------------------------------------------------------------------------
/use-case/saas.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "SaaS"
3 | description: "How to Build SaaS Products with Lovable"
4 | icon: "laptop"
5 | ---
6 |
7 | Welcome to the ultimate guide for building SaaS applications using Lovable.dev.
8 |
9 | This documentation will walk you through building, scaling, and deploying fully working SaaS products without writing a single line of code—unless you want to.
10 |
11 | ## Step-by-Step Process
12 |
13 |
14 |
15 | **Why**: Begin with the structure and layout of your app to minimize errors and plan ahead.
16 |
17 | **How**:
18 |
19 | - Write a prompt that outlines pages and user flow.
20 | - Optionally add screenshots (Figma, Excalidraw).
21 | - Focus only on front-end initially.
22 |
23 | **Prompt Example**:
24 |
25 | ```
26 | Create an AI journaling app with:
27 | - Landing page with Get Started CTA
28 | - Main app with sidebar to view/edit logs
29 | - Chat page to ask questions based on past entries
30 | ```
31 |
32 |
33 | **Why**: Store and retrieve user data securely.
34 |
35 | **How**:
36 |
37 | - Press the Supabase button in the Lovable editor
38 | - Create a Supabase project and connect it
39 | - Disable email verification in dev mode for speed
40 | - Define database schema for logs, users, meals, etc.
41 |
42 |
43 | You own your data and schema. Lovable just simplifies setup.
44 |
45 |
46 |
47 | Lovable adds email/password login by default. You can:
48 |
49 | - Redirect to sign-up when users click CTA
50 | - Link entries/meals to authenticated users
51 |
52 | **Prompt Example**:
53 |
54 | ```
55 | Add sign up and login. Redirect to sign-up on 'Get Started'.
56 | ```
57 |
58 |
59 | Each app feature is built incrementally:
60 |
61 | #### Journaling App:
62 |
63 | - Rate mood/energy/productivity
64 | - Save & update entries
65 | - View past logs in sidebar
66 |
67 | #### Calorie Tracker:
68 |
69 | - Input or upload meal
70 | - GPT-4 estimates nutrition (protein, fat, carbs, kcal)
71 | - Visual stats with icons \+ circular progress bars
72 |
73 |
74 | - Use the select tool to target specific sections
75 | - Upload screenshots to guide layout or logic
76 |
77 |
78 |
79 | Use GPT-4 for:
80 |
81 | - Journaling analysis
82 | - Meal breakdowns
83 | - Conversational insights
84 |
85 | **How**:
86 |
87 | - Set up Edge Functions in Supabase
88 | - Add OpenAI API Key via Lovable’s secure backend prompt
89 | - Confirm AI has access to dynamic user data (entries/meals)
90 |
91 | **Prompt Example**:
92 |
93 | ```
94 | Create chat page using GPT-4.
95 | Include journal entries in the prompt dynamically.
96 | Use function calling to return structured nutrition data.
97 | ```
98 |
99 |
100 | Lovable supports **Stripe subscription payments** with edge functions.
101 |
102 | **How**:
103 |
104 | 1. Create a Stripe product \+ price ID
105 | 2. Add Stripe API Key to Lovable
106 | 3. Define logic: only paying users can access main app
107 | 4. Add a customer portal to manage billing
108 |
109 | **Prompt Example**:
110 |
111 | ```
112 | Add recurring payments via Stripe.
113 | If not subscribed, redirect user to checkout.
114 | ```
115 |
116 |
117 | Stripe setup requires a Stripe account. Use test mode while developing.
118 |
119 |
120 |
121 | - Connect GitHub repo from Lovable
122 | - Click “Publish” to launch on `.lovable.app` domain
123 | - Use custom domain
124 |
125 | 📌 Refer to [Lovable Docs → Custom Domains](https://docs.lovable.dev/tips-tricks/custom-domain) for full walkthrough.
126 |
127 |
128 | Submit to [Lovable Launch](https://docs.lovable.dev/features/launched) for visibility.
129 |
130 | **Users can:**
131 |
132 | - Remix your project
133 | - View your prompts
134 | - Test your SaaS product instantly
135 |
136 |
137 |
138 | ## Tips for SaaS Builders
139 |
140 | ### Be Explicit
141 |
142 | - Always describe what _you want_ and what _you see_.
143 | - Use screenshots to clarify bugs or layouts.
144 |
145 | ### Work Step-by-Step
146 |
147 | - UI first → database → auth → core features → AI → payments
148 |
149 | ### Debug Like a Pro
150 |
151 | - Use chat mode to fix build errors or broken logic
152 | - Revert changes if necessary (does not revert database schema)
153 |
154 | ### Save Tokens
155 |
156 | - Use custom knowledge to store consistent instructions (theme, mobile responsiveness)
157 |
158 | ## Advanced features
159 |
160 |
161 |
162 | - Email/password auth via Supabase
163 | - Toggle verification off in dev
164 |
165 |
166 | - GPT-4 powered chats
167 | - Journaling context or meal context
168 | - Markdown formatting for cleaner outputs
169 |
170 |
171 | - Use icons and progress bars (e.g. 21st.dev components)
172 | - Weekly and daily charts
173 |
174 |
175 | - Lovable warns when files/components get too long
176 | - Accept “Yes” to auto-refactor into clean blocks
177 |
178 |
179 | - Connect GitHub repo
180 | - Use Lovable’s built-in VS Code editor
181 | - Make small changes to optimize without using credits
182 |
183 |
184 | ### 1. Lovable Publish
185 |
186 | - Click “Publish” to launch on `.lovable.app` domain
187 |
188 | ### 2. Netlify \+ GitHub
189 |
190 | - Connect GitHub repo from Lovable
191 | - Deploy with Netlify
192 | - Use custom domain
193 |
194 | 📌 Refer to [Lovable Docs → Custom Domains](https://docs.lovable.dev/tips-tricks/custom-domain) for full walkthrough.
195 |
196 |
197 |
198 | ## Other tutorials
199 |
200 | - [**AI Journaling App**](https://www.youtube.com/watch?v=gqsZGxuymTk&ab_channel=Lovable): Users write daily logs and chat with an AI that gives feedback based on their mood and activity.
201 | - [**AI Calorie Tracker**](https://www.youtube.com/watch?v=c0zhLzcVJRI&ab_channel=Lovable): Users describe or upload meals, and GPT-4 estimates nutritional info and tracks weekly stats.
202 | - [Luma Copycat:](https://www.youtube.com/watch?v=-sSOyO0FiPE) Luma-style event platform using Lovable and [**Supabase**](https://docs.lovable.dev/integrations/supabase)**.**
203 | - [**Simple CRM**](https://www.youtube.com/watch?v=5ZL744_Wxjo)\*\*: \*\*Create a simple yet powerful CRM using [**Lovable**](https://docs.lovable.dev/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-simple-crm-with-resend) for development, Supabase for data storage, and [**Resend**](https://docs.lovable.dev/integrations/resend) for email automation.
204 | - [Custom CRM:](https://www.youtube.com/watch?v=zv4vcR7VCAk) Create a **custom CRM** (Customer Relationship Management system) using [**Lovable**](https://docs.lovable.dev/lovable-f9060f1e/lovable-f9060f1e/editor/main#how-to-build-a-custom-crm-with-lovable-and-make) and [**Make**](https://docs.lovable.dev/integrations/make).
205 | - [Custom CRM:](https://www.youtube.com/watch?v=tyAsNwu_xCI) Create a **custom CRM** (Customer Relationship Management system) using [**Lovable**](https://docs.lovable.dev/lovable-f9060f1e/lovable-f9060f1e/editor/main#clerk-authentication-custom-domains-and-waitlists) and [**Clerk**](https://docs.lovable.dev/integrations/clerk).
206 | - [Feedback tool:](https://www.youtube.com/watch?v=tYDqBMilHkM) Create a fully functional AI-powered feedback app.
207 | - [DesignJoy copycat](https://www.youtube.com/watch?v=eZsbfEA-_oI&ab_channel=Lovable): Create a productized agency platform from scratch\!
208 | - You can also watch our [4-part video series](https://www.youtube.com/playlist?list=PLbVHz4urQBZkfZhwt8rL5PCoU4nyjK0OF) where the team builds a full-stack Duolingo clone—step by step, from prompt to production.
--------------------------------------------------------------------------------
/user-guides/best-practice.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Best Practices"
3 | description: "Getting the Most Out of Lovable"
4 | icon: "dumbbell"
5 | ---
6 |
7 | This guide helps all users—new or experienced—get up to speed quickly and avoid common pitfalls when building on Lovable.
8 |
9 | ## 1. Set Your Foundation: Use the Knowledge File
10 |
11 | **Why it matters:** The [_Knowledge_](https://docs.lovable.dev/features/knowledge) file is your project’s brain. It gets sent with every prompt and helps the AI understand the full context.
12 |
13 | **What to include:**
14 |
15 | - Your product vision (think of it like a PRD)
16 | - User journeys and personas
17 | - Key features and functionality
18 | - Design systems and UI guidance
19 | - Role-specific behavior (e.g. Admin, User, Investor)
20 |
21 |
22 | You can auto-generate a Knowledge file via Chat mode:
23 |
24 | ```
25 | Generate knowledge for my project at T=0 based on the features I’ve already implemented.
26 | ```
27 |
28 |
29 | ## 2. [Prompting](https://docs.lovable.dev/tips-tricks/prompting-one) Best Practices
30 |
31 | **Clear, verbose prompts = better output.** Think of the AI like your engineering partner—it only knows what you tell it.
32 |
33 | **Prompting tips:**
34 |
35 | - Be specific: Mention the exact page (e.g. `/dashboard`) and expected behavior.
36 | - Use natural language
37 |
38 | ```
39 | I want users with the role Investor to access this component, but not Admins.
40 | ```
41 | - Add screenshots: Especially useful for describing bugs or UX issues.
42 | - Add guardrails: Tell the AI what **not** to touch. E.g.
43 |
44 | ```
45 | Do not edit /shared/Layout.tsx.
46 | ```
47 | - Repeat important instructions across prompts. The AI’s memory can be limiting.
48 | - Avoid trying to implement 5 things at once. Break work into smaller, testable chunks. Use Chat Mode between each block to validate before moving on.
49 |
50 | ```
51 | **Feature Breakdown Template:**
52 | Create the new page
53 | Add UI layout
54 | Connect the data
55 | Add logic + edge cases
56 | Test per role
57 | ```
58 | - If your app has multiple roles (e.g. Admin, Investor, Startup), always define _which role_ the prompt applies to. This helps avoid bugs caused by shared logic/components.
59 |
60 | ```
61 | As an Investor, I want to view the company dashboard, but I shouldn’t be able to edit it. Please isolate this feature to the Investor role only.
62 | ```
63 |
64 | ## 3. Use Chat Mode Early and Often
65 |
66 | [**Chat mode**](https://docs.lovable.dev/features/labs#chat-mode) = your AI co-pilot. It helps you debug, brainstorm, and plan implementations—without editing your code until you’re ready.
67 |
68 | **When to switch to Chat Mode:**
69 |
70 | - After 2–3 failed “Try to Fix” attempts
71 | - When debugging complex logic or database issues
72 | - When planning new features
73 |
74 | ```
75 | Suggest 3 ways to implement X
76 | ```
77 |
78 |
79 | **Workflow tip:**
80 |
81 | Some users like to use Chat Mode for 60–70% of your time. Only click “Implement the plan” when you’re fully satisfied.
82 |
83 |
84 |
85 | If you forget using the Chat mode, this format improves output consistency and prevents collateral edits.
86 |
87 | ```
88 | On page /settings, implement [feature]. The expected behavior is [XYZ]. Please don’t touch component A, layout B, or shared logic unless necessary. Follow best practices from Tailwind / Supabase / X.
89 | ```
90 |
91 |
92 |
93 | To avoid unwanted code execution:
94 |
95 | ```
96 | Investigate but don’t write code yet.
97 | ```
98 |
99 | ```
100 | Suggest 3 ways to solve this without changing anything.
101 | ```
102 |
103 | This keeps control in your hands.
104 |
105 |
106 |
107 | When AI enters a "loop," use this sequence to avoid endless cycles of patching broken code:
108 |
109 | 1. Switch to Chat mode
110 | 2. Paste the error screenshot
111 | 3. Say:
112 |
113 | ```
114 | Please investigate this without breaking other features. If needed, revert to the last working version and fix from there.
115 | ```
116 |
117 |
118 | ## 4. Avoid Common Pitfalls with Supabase
119 |
120 | **Heads-up:** [Supabase](https://docs.lovable.dev/integrations/supabase) does not revert cleanly. If you revert a version, your database schema may break.
121 |
122 | **Best practices:**
123 |
124 | - Connect Supabase **after** front-end is stable
125 | - If you must revert, prompt the AI:
126 |
127 | ```
128 | Please validate the SQL schema at T=0 and ensure no breaking changes have occurred.
129 | ```
130 | - Always test database-linked features before publishing
131 |
132 | ## 5. Use Visual Edit for Quick UI Fixes
133 |
134 | The [**Visual Edit tool**](https://docs.lovable.dev/features/visual-edit) is free and fast. Use it instead of prompts for:
135 |
136 | - Changing text, colors, fonts, layout tweaks
137 | - Editing multiple small elements at once
138 | - Safe, credit-free commits (with undo available)
139 |
140 | ## 6. Use [GitHub](https://docs.lovable.dev/integrations/git-integration) \+ Version Control Wisely
141 |
142 | - Every edit is a commit. Use **pinning** to mark stable versions. After every working feature: **Pin it**
143 | - After every bug: **Compare versions visually.** You can prompt with:
144 |
145 | ```
146 | Compare version at T–1 to T–0. What changed? What might be breaking?
147 | ```
148 | - Come back to a stable version if you feel the AI has broken too much things.
149 | - Use **GitHub branching** at your own risk. Avoid deleting branches before switching back to `main` in Lovable to prevent project sync issues.
150 |
151 | ## 7. When All Else Fails, Remix
152 |
153 | Many users realize: doing it all over takes less time the second time.
154 |
155 | - [Remix](https://docs.lovable.dev/user-guides/quickstart#remix-an-existing-project:~:text=you%20to%20reuse-,the,-current%20state%20of) creates a clean copy of your project at T=0.
156 | - Rebuild with better prompting \+ clearer knowledge
157 | - Use your old project as reference only
158 |
159 | **Use cases:**
160 |
161 | - You're stuck in a buggy loop
162 | - You want to restart clean with preserved history
163 | - You need to disconnect Superbase and try a new path
164 |
165 |
166 | Remixing requires disconnecting Superbase first.
167 |
168 |
169 | ## 8. Stay Patient, Stay Calm
170 |
171 | You’re not alone. AI can be magical one moment and frustrating the next. The final 5% of any build is often the slowest—but the most important.
172 |
173 |
174 | **Golden rule:**
175 |
176 | Take your time with prompts. Re-check everything. Break work into small, testable blocks. The more precise your inputs, the better your outputs.
177 |
178 |
179 | ## 9. Use the Docs & Ask for Help
180 |
181 | - [Documentation](https://docs.lovable.dev) contains walkthroughs, templates, SEO tips, integrations, and more. You can ask questions directly in the doc AI assistant.
182 | - Join the [Discord community](https://discord.gg/lovable-dev) for peer support.
183 | - When ready, submit your project to [Lovable Launch](https://docs.lovable.dev/features/launched).
184 |
185 | ## 10. Bonus Tips
186 |
187 | - Add a voice note prompt using dictation (e.g. On Mac, use the mic to dictate long prompts) for long prompts. You’ll craft better input faster—especially useful when frustrated or tired.
188 | - Use the “`I am frustrated…`” prompt pattern to nudge better AI focus
189 | - After a major edit, always recheck multiple roles and their behavior (especially with conditional logic)
190 | - Store stable versions as fallbacks for quick debugging
191 | - If you're seeing unexpected side effects, this helps avoid bugs caused by overly generic logic.
192 |
193 | ```
194 | Create a component specifically for [role X] and do not reuse shared components unless clearly scoped.
195 | ```
--------------------------------------------------------------------------------
/user-guides/from-idea-to-app.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "From Idea to Working App"
3 | description: "How to Bring Your Vision to Life with Lovable"
4 | icon: "screwdriver-wrench"
5 | ---
6 |
7 | > **“I have no clue what I’m doing... but I know exactly what I want to build.”**
8 |
9 | If that sounds like you, you're in the right place.
10 |
11 | ## Who This Is For
12 |
13 | You’ve got an idea.
14 |
15 | You’ve tried AI tools, written notes, maybe even opened a few projects.
16 |
17 | But you’re stuck between inspiration and execution.
18 |
19 | **This guide will help you:**
20 |
21 | - Go from vague concept to concrete product
22 | - Avoid common mistakes
23 | - Use Lovable the smart way—especially if you’re not a developer
24 |
25 | ## The Common Pitfall: Building Before You Plan
26 |
27 | A lot of users fall into the same trap: `They start building before they’ve clarified what they’re building.`
28 |
29 | **The result?**
30 |
31 | - Errors on top of errors
32 | - Confused AI agents and AI-generated errors
33 | - Projects that veer off track or feel “`too far gone to fix`”
34 |
35 | ## Best Practices for Turning Ideas Into Real Products
36 |
37 | ### 1. Start Outside Lovable
38 |
39 | Many builders—including livestream guest MP—spend time shaping their ideas _before_ opening Lovable.
40 |
41 | Try this:
42 |
43 | - Record a voice note explaining your idea naturally (MP uses Granola for this)
44 | - Paste it into GPT or Claude to get an expanded version in clear product terms
45 | - Ask AI to act as a designer, PM, or developer and critique or co-draft a PRD (Product Requirements Document)
46 |
47 | Use Lovable when you're ready to go from clear vision to working prototype.
48 |
49 | ### 2. **Write It Out First**
50 |
51 | Before you prompt the AI, spend 15 minutes writing:
52 |
53 | - What does your product do?
54 | - Who it's for (even if it's just you)
55 | - What the _simplest & minimum version_ should include
56 |
57 |
58 | **Turn this into a list of features or use cases:**
59 |
60 | Write it as a list of user stories or features and feed it into chat mode or GPT to get a PRD (Product Requirements Document).
61 |
62 |
63 | ### 3. Choose Your Build Style Wisely
64 |
65 | There are two valid approaches to building with Lovable:
66 |
67 | 1. **Front-End First (Recommended for Beginners)**
68 | - Start with mock data
69 | - Build layouts, flows, and logic without connecting a database
70 | - Once satisfied, plug in Supabase and go live
71 | 2. **Back-to-Front**:
72 | - Connect Supabase from Day 1
73 | - Build and test each feature one by one
74 | - Best for advanced users comfortable debugging
75 |
76 | If you're new, **choose front-end first.** You'll:
77 |
78 | - Avoid complex SQL errors
79 | - Iterate faster
80 | - Stay focused on design \+ usability
81 |
82 |
83 | MP used front-end first for speed, clarity, and debugging ease. It helped him learn fast and ship quicker.
84 |
85 |
86 | ### 4. Use Chat Mode as a Thought Partner
87 |
88 | Chat Mode isn’t just a chatbot—it’s your project-aware assistant.
89 |
90 | It knows your files, your database schema, your logs.
91 |
92 | Use it to:
93 |
94 | - Debug issues with context
95 | - Break down vague ideas into structured components
96 | - Brainstorm, plan, and iterate
97 | - Translate vague ideas into working flows
98 |
99 |
100 | Try this prompt:
101 |
102 | ```
103 | I want to build a dog breeding management app. Here's what I need it to do: [list]. Can you break this down into steps or components to build?
104 |
105 | I’m building a job coaching app. Here’s what I want it to do: [list]. What’s the simplest version to test?
106 | ```
107 |
108 |
109 | ### 5. Break It Down into Bricks
110 |
111 | Don’t build everything at once. Split your idea into **bricks**:
112 |
113 | - Each brick = one feature, component, or flow
114 | - Build one at a time
115 | - Test, refine, then move on
116 |
117 | Ask Chat Mode to help plan this with prompts like:
118 |
119 | ```
120 | Here’s my app idea. Can you break it into features or steps I should build?
121 | ```
122 |
123 | ```
124 | Break this idea into buildable features I can test one at a time.
125 | ```
126 |
127 | ### 6. **Prompt with Purpose**
128 |
129 | Before each prompt, ask:
130 |
131 | ```
132 | What am I trying to build right now?
133 | ```
134 |
135 | Be specific. Avoid mid-conversation shifts—AI needs consistent intent to help you properly.
136 |
137 | ### 7. Avoid the Infinite Error Loop
138 |
139 | Stuck? Don’t click “Try to Fix” 10 times.
140 |
141 | Instead:
142 |
143 | - Open browser dev tools (Console tab)
144 | - Copy the actual error
145 | - Paste it into Chat Mode to investigate
146 | - Or remix the project without your database to simplify debugging
147 |
148 |
149 | Lovable now reads console logs automatically—no copy-paste needed for most cases.
150 |
151 |
152 | ### 8. Remix If Things Get Messy
153 |
154 | Projects evolve. If things feel tangled:
155 |
156 | - Remix your project (it clones the project, you keep the original)
157 | - Start fresh with what you’ve learned
158 | - Keep the new build focused and structured
159 | - Keep what works. Drop what doesn’t.
160 |
161 | ### 9. **Use Real Validation, Fast**
162 |
163 | A user told us he didn’t build to sell. He sent a rough prototype to 10 users in DMs. One asked to pay immediately. By Friday, Stripe was integrated.
164 |
165 | Validate by:
166 |
167 | - Asking real users, “Would this help you?”
168 | - Getting quick feedback, not perfection
169 | - Letting real interest guide your next steps
170 |
171 | ### 10. Get Better by Building Bad Ideas
172 |
173 |
174 |
175 | [MP](https://www.youtube.com/watch?v=mwHNw8aeYCI&ab_channel=Lovable) built 100\+ throwaway projects:
176 |
177 | - Message-for-a-stranger app
178 | - 90s nostalgia generator
179 | - AI interview prep tool
180 |
181 | Each one helped him test a skill:
182 |
183 | - Building UI with no backend
184 | - Adding profanity filters
185 | - Connecting AI APIs
186 | - Managing user flow
187 |
188 |
189 | Lesson:
190 |
191 | **Build things that don’t need to exist—so you’re ready when something does.**
192 |
193 |
194 | ## Builder’s Checklist
195 |
196 | 1. Write your idea in 5-10 bullet points
197 | 2. List out core features (use bullets) in an MVP (minimum viable product)
198 | 3. Decide: Front-End First or Back-to-Front
199 | 4. Use Chat Mode to co-plan and debug
200 | 5. Build in bricks: 1 feature at a time
201 | 6. Only connect Supabase when ready
202 | 7. Remix if errors pile up
203 | 8. Get feedback before going live
204 |
205 | ## Final Tip: You're the First User
206 |
207 | - Design for yourself first.
208 | - Test like your future users would.
209 | - Think like a product designer.
210 |
211 | And remember: you’re building something only you could imagine.
212 |
213 | > You don’t need to know how to code.\
214 | > You just need a clear idea, a good plan, and a little patience.\
215 | > Lovable will help with the rest.
--------------------------------------------------------------------------------
/user-guides/support-policy.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Support Policy"
3 | description: "Explore support options for free and paid plans with prioritized assistance"
4 | icon: "life-ring"
5 | ---
6 |
7 | Lovable is committed to delivering an exceptional customer experience. We provide technical support for paid projects running on our hosted Lovable platform, within the scope, hours, contacts, and channels outlined below.
8 |
9 | ## **Scope**
10 |
11 | Lovable’s technical support covers the following areas:
12 |
13 | ### **Plans**
14 |
15 | - **Free Plan:** Access to our [Discord community](https://discord.gg/lovable-dev) and documentation.
16 | - **Starter, Launch & Scale Plans:** Prioritized support through our in-product chat, powered by our AI assistant, with guaranteed access to human support when requested.
17 |
18 | ### **Configuration Assistance**
19 |
20 | - Guidance on starting your project with Lovable
21 | - Best practices for Prompt Engineering
22 | - Using Knowledge Files effectively
23 | - General questions about the Lovable stack and integrations
24 | - Billing and account management support
25 |
26 | ### **Troubleshooting**
27 |
28 | - Workarounds or resolutions for known issues
29 | - Answering general "how-to" questions and pointing to relevant documentation
30 | - Investigating and reporting bugs in Lovable’s platform (UI, API, Supabase connection, etc.)
31 | - Assistance with platform errors that persist after 2–3 attempts in chat/edit modes
32 |
33 | ### **Not Covered**
34 |
35 | Our technical support does not include:
36 |
37 | - Debugging complex user application code beyond what AI or community support can handle
38 | - Rewriting or adapting application code for compatibility with Lovable
39 | - Modifying or patching unsupported third-party or open-source integrations
40 |
41 | ---
42 |
43 | ## **Who Can Contact Support?**
44 |
45 | Support is available to customers using Lovable resources if:
46 |
47 | 1. The request is submitted via an official support channel (see below).
48 | 2. The request originates from a registered Lovable account email address.
49 |
50 | ---
51 |
52 | ## **Official Support Channels**
53 |
54 | ### **In-Product Support (Preferred)**
55 |
56 | Paid users can submit support tickets directly inside the Lovable platform. Our AI assistant handles common queries instantly, and you can escalate to a human anytime by clicking **"Talk to a human."**
57 |
58 | ### **Web and Dashboard**
59 |
60 | Support is also available through the [**Lovable Help & Support**](https://lovable.dev/support) page in the website.
61 |
62 | ### **Email**
63 |
64 | If the dashboard is inaccessible, contact us at [support@lovable.dev](mailto:support@lovable.dev) using a registered Lovable account email address.
65 |
66 | ### **Community Support**
67 |
68 | While official support requests are only handled through designated channels, our [Discord community](https://discord.gg/lovable-dev) offers peer-to-peer assistance.
69 |
70 | - Use Discord for workflow help, prompting questions, or project structure tips.
71 | - Always include clear details (e.g., prompt, message ID, screenshots) for better responses.
72 |
73 | **Note:** Lovable team members and champions may participate in community discussions, but official support is only guaranteed through the designated support system.
74 |
75 | ---
76 |
77 | ## **Proactive Monitoring**
78 |
79 | For platform-wide issues, updates will be posted on:
80 |
81 | - Our [official Changelog page](https://docs.lovable.dev/changelog)
82 | - The #announcement channel on [Lovable Discord](https://discord.gg/lovable-dev)
83 |
84 | There’s no need to submit support tickets for ongoing platform issues. The changelog and Discord will provide real-time updates.
85 |
86 | ---
87 |
88 | ## **Enterprise Support**
89 |
90 | Enterprise Plan customers have access to Premium Support options, including direct Slack channels, shared sessions, and faster SLAs.
91 |
92 | For details, contact us via the [Premium Support Inquiry form](https://cal.com/sebastian-schaaf/connect-with-lovable).
93 |
94 | ## **Reminder**
95 |
96 | If you're stuck, the fastest path to resolution is:
97 |
98 | 1. Use **chat mode** to understand what went wrong.
99 | 2. Ask: "What happened? What file was changed? How do we fix this?"
100 | 3. If it loops, switch to **chat-only debugging.**
101 | 4. Tag or restore a stable version before retrying.
102 | 5. Use the **Knowledge File** to lock in goals, structure, and rules.
103 |
104 | We’re here to help you ship. If in doubt, reach out.
--------------------------------------------------------------------------------
/user-guides/teams.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Teams"
3 | description: "Collaborate on your app in real time with teammates"
4 | icon: "people-group"
5 | ---
6 |
7 | Lovable lets you build apps together, live. Invite your designer, developer, agency, or anyone else to your workspace. Everyone sees changes as they happen.
8 |
9 |
10 | Each subscription is now connected to a workspace.
11 |
12 |
13 | - Users with a Pro subscription have personal workspaces. You can still invite up to 2 people to individual projects. Collaborators on a project use project owner credits.
14 | - Users with a Teams subscription can have up to 20 users in their workspace. Owners & admins can freely invite & remove users and manage projects. Editors can only make edits to existing projects. All users in a workspace share the connected credit pool.
15 |
16 | More info on pricing [here](https://docs.lovable.dev/user-guides/messaging-limits).
17 |
18 | ## Create a Workspace
19 |
20 | A workspace is your shared space for building and collaborating on projects.
21 |
22 |
23 |
24 | **“Create new workspace”** from the dashboard or any project.
25 |
26 |
27 | Name your workspace.
28 |
29 | 
30 |
31 |
32 | Choose a plan for your workspace.
33 |
34 | 
35 |
36 |
37 |
38 | ## Rename a Workspace
39 |
40 |
41 |
42 | Make sure you're in the right workspace (switch if needed).
43 |
44 |
45 | Go to **Settings**.
46 |
47 | 
48 |
49 |
50 | Edit the **Workspace name** and **description**.
51 |
52 | 
53 |
54 |
55 |
56 | ## Invite & Manage Collaborators
57 |
58 |
59 |
60 | Upgrade your plan if you're not on the **Teams** tier.
61 |
62 | 
63 |
64 |
65 | Click **“Invite”** in a project or from the dashboard.
66 |
67 | 
68 |
69 |
70 | Enter email addresses to send invites.
71 |
72 | 
73 |
74 |
75 | When they accept, they'll join your workspace and see all projects.
76 |
77 |
78 |
79 | ## Real-Time Collaboration
80 |
81 | Once teammates join:
82 |
83 | - You’ll see their cursor and live changes.
84 | - Their icons appear in the top-right corner.
85 | - You can edit any element together, instantly.
86 |
87 | ## Move a Project Between Workspaces
88 |
89 |
90 |
91 | In your project, open **Settings**.
92 |
93 | 
94 |
95 |
96 | Scroll to the **Workspaces** section.
97 |
98 | 
99 |
100 |
101 | Click **“Change Workspace”** and select the new one.
102 |
103 | 
104 |
105 |
106 |
107 | ## Managing Access
108 |
109 | - Teammates have access to all workspace projects.
110 | - Switch between teams from the dashboard sidebar.
111 | - Everyone must accept their email invite to join.
112 |
113 | Perfect for friends, startups, and smaller enterprise teams collaborating on the same app or wanting centralized billing.
114 |
115 |
116 | ## Permissions
117 |
118 | | Action | Owner | Admin | Editor |
119 | |--------|-------|-------|--------|
120 | | Edit projects | ✓ | ✓ | ✓ |
121 | | Publish projects | ✓ | ✓ | ✓ |
122 | | Connect/disconnect Supabase org to workspace | ✓ | ✓ | ✗ |
123 | | Connect/disconnect Supabase project org to projects | ✓ | ✓ | ✗ |
124 | | Connect/disconnect GitHub org to workspace | ✓ | ✓ | ✗ |
125 | | Connect/disconnect GitHub repo org to projects | ✓ | ✓ | ✗ |
126 | | Invite project-level collaborators | ✓ | ✓ | ✗ |
127 | | Transfer projects to other workspaces | ✓ | ✓ | ✗ |
128 | | Set roles for other | ✓ | ✓ | ✗ |
129 |
--------------------------------------------------------------------------------