Lovable uitleg: apps bouwen met AI in stappen

Lovable is een AI-tool waarmee je een volledig werkende webapplicatie bouwt door gewoon te typen wat je wilt. Geen programmacode, geen technische kennis vereist. Je omschrijft je idee en de AI regelt de rest: de interface, de database en de logica. In dit artikel lees je stap voor stap hoe je aan de slag gaat, welke fouten je het beste vermijdt en hoe je problemen oplost als er toch iets misgaat.

Wat is Lovable precies?

Lovable (lovable.dev) is een zogenaamde AI app builder. Je communiceert via een chatinterface: je typt een opdracht en Lovable genereert meteen een live preview van de app. Elke aanpassing doe je via nieuwe berichten, zoals een gesprek.

Lovable is bedoeld voor mensen die een idee hebben maar niet willen leren programmeren. Denk aan een simpele planningsapp voor je team, een inventarislijst voor een kleine winkel of een persoonlijk dashboard. In februari 2026 voegde Lovable de zogeheten Plan Mode toe: de AI laat je eerst een gedetailleerd plan zien voor hij begint te bouwen. Je kunt dat plan aanpassen voordat er een regel code wordt gegenereerd.

Account aanmaken en eerste project starten

1. Ga naar lovable.dev en klik op “Get started”.
2. Log in met je Google- of GitHub-account. Een apart wachtwoord aanmaken is niet nodig.
3. Na het inloggen kom je op het dashboard. Klik op “New project”.
4. Je ziet een chatvenster. Typ hier een beschrijving van wat je wilt bouwen. Wees zo concreet mogelijk (zie tips verderop).
5. Lovable toont direct een live preview rechts in het scherm. Elke aanpassing die je typt, is meteen zichtbaar.

Het gratis abonnement geeft je 5 berichten per dag. Dat is genoeg om te experimenteren. Betaalde abonnementen beginnen bij circa €20 per maand voor 500 berichten.

Een goede startprompt schrijven

De kwaliteit van je eerste prompt bepaalt voor een groot deel hoe snel je resultaat hebt. Een vage opdracht leidt tot een vage app. Gebruik deze aanpak:

• Beschrijf het doel: wat moet de app doen? Bv. “Een app waarmee ik dagelijkse taken kan bijhouden per project.”
• Noem de doelgroep: voor wie is de app? “Voor mezelf, mobiel gebruik.”
• Geef een voorbeeld van de structuur: “Ik wil een lijst met taken, een knop om een taak toe te voegen en een vinkje om taken als gedaan te markeren.”
• Noem beperkingen: wat moet er juist niet in? “Geen gebruikersaccounts, geen betaalmogelijkheid.”

Met Plan Mode (beschikbaar via de schakelaar boven het chatvenster) laat je Lovable eerst een plan tonen. Lees dat goed door. Kloppen de stappen? Keur het plan goed. Klopt er iets niet? Pas de beschrijving aan voordat de bouw start.

Stap voor stap een functie toevoegen

Na de eerste versie van je app bouw je verder via losse opdrachten. Doe dat stapsgewijs:

1. Test eerst wat er al staat. Klik door de live preview. Wat werkt? Wat ontbreekt?
2. Beschrijf één aanpassing per keer. Niet: “Voeg een inlogscherm, e-mailnotificaties en een exportknop toe.” Wel: “Voeg een inlogscherm toe met e-mail en wachtwoord.”
3. Wacht op de preview-update voor je de volgende stap typt.
4. Geef feedback als iets niet klopt. Bv. “De knop is te groot, maak hem kleiner.” Of: “De lijst toont taken in de verkeerde volgorde, sorteer op datum.”

Database koppelen via Supabase

Wil je dat de app data opslaat (bv. taken bewaren na het sluiten van de pagina)? Dan heb je een database nodig. Lovable integreert rechtstreeks met Supabase:

1. Klik op het Supabase-icoontje in je projectpanel.
2. Log in op je Supabase-account (gratis aan te maken op supabase.com).
3. Klik op “Connect”. Lovable maakt automatisch de benodigde tabellen aan op basis van jouw app-beschrijving.
4. Test of data opgeslagen blijft door de pagina te verversen na het toevoegen van een item.

Heb je nog geen Supabase-account? Lees onze uitleg over Supabase aanmaken voor een stap-voor-stap handleiding.

Je app publiceren

Als je tevreden bent, publiceer je de app met één klik:

1. Klik op de knop “Publish” rechtsboven in het scherm.
2. Lovable genereert een link op het formaat jouwprojectnaam.lovable.app.
3. Deel die link met anderen. Zij hoeven niets te installeren.
4. Wil je een eigen domeinnaam? Ga naar Settings → Custom Domain en voer je domein in. Je hebt daarvoor een betaald abonnement nodig.

Veelgemaakte fouten bij Lovable

Veel beginners lopen tegen dezelfde problemen aan. Dit zijn de fouten die het vaakst voorkomen en hoe je ze vermijdt:

• Alles tegelijk vragen. “Maak een app met login, dashboard, taken, notities, exporteren en statistieken” geeft een half werkend resultaat. Bouw functie voor functie.
• Te weinig context geven. Schrijf niet “maak iets voor mijn bedrijf”. De AI weet niet wat jouw bedrijf doet. Geef altijd context.
• Niet controleren na elke stap. Als je blind vijf aanpassingen achter elkaar typt zonder te testen, is het moeilijk te achterhalen waar het mis ging.
• Berichten verspillen aan repareren wat je zelf kunt oplossen. Kleine lay-out-issues (kleur, lettergrootte) kun je soms sneller handmatig aanpassen in de code-editor dan via een prompt.
• Vergeten om Supabase te koppelen. Zonder database-integratie verdwijnt alle data zodra je de pagina herlaadt.
• Geen gebruik maken van Plan Mode. Zeker bij complexe apps spaart Plan Mode veel reparatieberichten uit.

Wat als het niet werkt? Troubleshooting

Soms gaat er iets mis. Lovable zelf geeft een foutmelding, de preview laadt niet of de app doet onverwachts iets. Volg dit stappenplan:

1. Klik op “Try to Fix”. Als Lovable een fout detecteert, toont het een knop waarmee de AI zelf probeert te repareren. Dit lost 60% van de eenvoudige bugs op.
2. Bekijk de Logs. Klik op het tabblad Cloud → Logs. Hier zie je exacte foutmeldingen. Kopieer de foutmelding en plak hem als nieuwe prompt: “Ik zie deze fout: [foutmelding]. Hoe los ik dit op?”
3. Hard refresh. Als de preview niet laadt, druk dan op Ctrl+Shift+R (Windows) of Cmd+Shift+R (Mac). Soms is het een tijdelijk sandbox-probleem.
4. Revert naar een vorige versie. Lovable bewaart de geschiedenis van je project. Klik op History en ga terug naar een werkende versie.
5. Controleer je Supabase-instellingen. Veel database-fouten ontstaan doordat de koppeling niet goed is ingesteld of doordat environment variables ontbreken.
6. Check status.lovable.dev. Soms heeft Lovable zelf een storing. In april 2026 was er een incident waarbij sommige projecten tijdelijk niet bereikbaar waren. Wacht dan gewoon even.

Kom je er niet uit? In het Lovable Discord-kanaal is een actieve community. Deel een schermafbeelding van de foutmelding en iemand helpt je snel verder. Meer tips over AI-tools en troubleshooting vind je ook elders op handleidingstart.nl.

Lovable versus alternatieven

Lovable is niet de enige AI app builder. Dit is hoe het zich verhoudt tot de bekendste alternatieven:

Voor beginners zonder codeerervaring is Lovable momenteel een van de toegankelijkste opties, mede dankzij de live preview en de Supabase-integratie.

De code-editor: wanneer handmatig aanpassen?

Lovable heeft een ingebouwde code-editor waarmee je de gegenereerde code direct kunt bekijken en aanpassen. Dat is handig als:

• Je een kleine fout wil corrigeren zonder een bericht te “verspillen” (zeker op de gratis tier met 5 berichten per dag).
• Je een specifieke CSS-kleur of lettertype wil aanpassen en je weet hoe CSS werkt.
• Je een technische foutmelding ziet die je zelf kunt herkennen en oplossen.

De code is geschreven in React (JavaScript) met Tailwind CSS. Als je geen programmeur bent, hoef je hier niet aan te komen. Maar het is goed te weten dat de optie bestaat. De code-editor bereik je via de knop “Code” rechtsboven in de editor-interface.

Alle wijzigingen die je in de code-editor maakt, worden opgeslagen in je GitHub-repository als je de GitHub-integratie hebt ingesteld. Zo kun je altijd terug naar een eerdere versie via de History-knop.

Wat kun je bouwen met Lovable? Praktische voorbeelden

Om een idee te geven van wat realistisch is, hier een aantal voorbeelden van apps die beginners met Lovable hebben gebouwd:

• Taakbeheer-app: projecten aanmaken, taken toevoegen, aftekenen. Met Supabase opgeslagen zodat je het op telefoon en laptop kunt gebruiken.
• Klantendatabase voor een kleine winkel: namen, contactgegevens, aankopen. Met zoekfunctie en exportknop naar CSV.
• Boekhoud-dashboard: inkomsten en uitgaven bijhouden, grafieken tonen per maand. Exporteren als PDF.
• Reserveringssysteem: een simpele agenda waarop klanten tijdsloten kunnen kiezen en bevestigingen via e-mail ontvangen (met koppeling aan een e-mailservice).
• Persoonlijk leestracker: boeken toevoegen, voortgang bijhouden, reviews schrijven.

Lovable is minder geschikt voor apps die zware berekeningen vereisen, veel gelijktijdige gebruikers moeten aankunnen (grote schaal), of die integreren met complexe externe API’s zonder goede documentatie.

Credits en kosten in de gaten houden

Op het gratis plan heb je 5 berichten per dag. Elk bericht dat Lovable verwerkt — of het nu een grote functie of een kleine kleurwijziging is — telt als één bericht. Zo gebruik je je credits slim:

• Plan je sessie van tevoren. Schrijf op papier of in een notitie welke stappen je wilt uitvoeren voor je begint. Zo verspil je geen berichten aan vage opdrachten.
• Gebruik Plan Mode voor complexe functies. Het plan kost ook een bericht, maar voorkomt dat je drie berichten kwijt bent aan het repareren van een mislukte eerste poging.
• Kleine aanpassingen via de code-editor. Een kleur aanpassen kost geen bericht als je het zelf doet in de code.
• Werk in één sessie per dag. Je 5 gratis berichten worden dagelijks gereset om middernacht. Plan grote bouwsessies op ochtenden zodat je de hele dag de tijd hebt.

Wil je meer bouwen? Het Starter-abonnement kost circa €20 per maand voor 500 berichten per maand. Dat is ruim voldoende voor een persoonlijk project of een eenvoudige app voor een klein bedrijf. Vergelijk Lovable-abonnementen via de officiële pricing-pagina op lovable.dev.

Veelgestelde vragen

Is Lovable gratis te gebruiken?

Ja, er is een gratis abonnement met 5 berichten per dag. Dat is genoeg om het platform te testen. Voor meer berichten of een eigen domein betaal je vanaf circa €20 per maand.

Heb ik programmeerkennis nodig voor Lovable?

Nee. Lovable is ontworpen voor mensen zonder programmeerervaring. Je typt in gewone taal wat je wilt en de AI bouwt het. Technische kennis helpt wel als je specifieke aanpassingen wil doorvoeren via de code-editor.

Kan Lovable ook mobiele apps maken?

Lovable maakt progressive web apps (PWA): webapps die goed werken op mobiel en ook als app op je thuisscherm gezet kunnen worden. Native apps voor de App Store of Play Store kun je er (nog) niet mee bouwen.

Wat is Plan Mode in Lovable?

Plan Mode is een functie (uitgebracht in februari 2026) waarbij Lovable eerst een gedetailleerd stappenplan toont voor hij begint met bouwen. Je kunt het plan aanpassen en goedkeuren. Dit vermindert fouten en bespaart berichten.

Hoe sla ik mijn project op in Lovable?

Lovable slaat automatisch op na elke wijziging. Je kunt je projecten ook synchroniseren met een GitHub-repository via de GitHub-integratie in de projectinstellingen.

Mijn app geeft een foutmelding. Wat doe ik?

Klik eerst op de knop ‘Try to Fix’. Werkt dat niet? Ga naar Cloud → Logs, kopieer de foutmelding en plak die in het chatvenster van Lovable. De AI begrijpt technische foutmeldingen en geeft een oplossing.

Kan ik mijn Lovable-app koppelen aan een eigen domeinnaam?

Ja, dat kan via Settings → Custom Domain. Hiervoor heb je een betaald Lovable-abonnement nodig. Je koppelt het domein via de DNS-instellingen bij je domeinregistrar.