WeWeb begrijpen: wat het is en wat het niet is
WeWeb is een **frontend-only** no-code tool. Het bouwt de gebruikersinterface van je webapplicatie, schermen, dashboards, formulieren, navigatie. Het heeft geen eigen database of backend.
Dit is een feature, geen bug. Door WeWeb alleen verantwoordelijk te maken voor de frontend kun je: - Elke database kiezen (Supabase, Airtable, een custom API) - Je backend onafhankelijk schalen - De frontendcode exporteren en zelf hosten als je ooit van WeWeb wilt afstappen
**WeWeb is niet**: - Een websitebuilder (zoals Webflow of Wix), het is bedoeld voor interactieve applicaties, niet marketingsites - Een database of backend, je hebt altijd een externe databron nodig - Een mobilapp-builder, het bouwt webapps die kunnen werken als PWA, maar geen native apps
Voor SaaS-dashboards, klantportals, interne tools en interactieve webapps is WeWeb de beste no-code keuze in 2025.
Project aanmaken en Supabase verbinden
Maak een account aan op weweb.io. Klik "New project" en kies een naam.
Verbind Supabase als eerste: 1. Ga naar de "Data" sectie in WeWeb (linkermenu) 2. Klik "Add a datasource" 3. Kies "Supabase" 4. Plak je Supabase Project URL en Anon Key 5. WeWeb importeert automatisch je tabelschema
Je Supabase-tabellen zijn nu beschikbaar als databronnen in WeWeb. Je kunt queries maken, filteren en sorteren, alles visueel configureerbaar.
Als je Supabase authenticatie gebruikt: 1. Ga naar Settings → Authentication in WeWeb 2. Kies "Supabase Auth" 3. WeWeb genereert automatisch login/logout-functionaliteit 4. Je kunt de ingelogde gebruiker ophalen via `ww.auth.getUserInfo()`
De WeWeb-interface begrijpen
WeWeb's editor heeft vier hoofdgebieden:
**1. Layers Panel (links boven)**: De componentboomstructuur van je huidige pagina. Elk element is genest in een container-hiërarchie.
**2. Pages & Navigator (links)**: Al je pagina's, herbruikbare componenten en assets.
**3. Canvas (midden)**: De visuele weergave. Klik elementen om ze te selecteren, sleep om te herpositioneren.
**4. Inspector (rechts)**: Configureer het geselecteerde element, stijl, databinding, acties, condities.
De WeWeb-logica werkt op drie niveaus: - **Elementen**: Individuele UI-componenten (tekst, afbeelding, knop, invoerveld) - **Variabelen**: State die data opslaat (array van takenlijst-items, huidige gebruiker, filterwaarde) - **Workflows**: Sequenties van acties die worden uitgevoerd als reactie op events (knop klikken, pagina laden, formulier indienen)
Databinding: dynamische data weergeven
Databinding is het verbinden van UI-elementen met data. Dit is het kernmechanisme van WeWeb.
**Een lijst weergeven**: 1. Voeg een "Collection List" element toe aan je canvas 2. Bind de lijst aan een Supabase-query (bijv. `select * from todos where user_id = [huidige gebruiker]`) 3. Ontwerp de list item-template, dit herhaalt zich voor elk item in de query-resultaten 4. Bind elk element in de template aan het juiste veld: `item.title`, `item.created_at`, etc.
**Een enkel veld weergeven**: 1. Selecteer een tekst-element 2. Klik het binding-icoon naast de "Text" eigenschap 3. Kies je databron → specifiek veld 4. De tekst toont nu dynamisch de waarde uit de database
**Conditionele weergave**: 1. Selecteer een element 2. In het Inspector-paneel → "Conditions" 3. Voeg een conditie toe: toon alleen als `someVariable === true`
Dit patroon, databinding + conditionele weergave + list binding, is 80% van wat je nodig hebt voor een typische WeWeb-applicatie.
Formulieren en gebruikersinteractie
Formulieren zijn hoe gebruikers data invoeren en acties uitvoeren.
**Formulier opzetten**: 1. Voeg een "Form Container" element toe 2. Voeg invoervelden toe voor elk gegeven dat je wilt verzamelen (tekst, e-mail, getal, selectie) 3. Bind elk invoerveld aan een WeWeb-variabele (bijv. `newTodoTitle`) 4. Voeg een knop toe met een "Submit" actie
**Submit-actie configureren**: 1. Selecteer de knop 2. Voeg een workflow toe aan het "Click" event 3. Acties in volgorde: - Supabase INSERT-actie: voeg een nieuwe rij toe aan de tabel - Ververs de collection lijst (of voeg het nieuwe item lokaal toe aan de array) - Reset de formuliervariabelen naar lege waarden - Toon een succesmelding
Voeg altijd validatie toe: verberg de submit-knop als verplichte velden leeg zijn, of toon een foutmelding bij validatiefouten.
Deployen en je app live zetten
WeWeb-apps worden gehost op WeWeb's CDN standaard. Verbind een custom domein: 1. Ga naar Settings → Custom Domain 2. Voeg je domein toe (bijv. `app.jouwbedrijf.nl`) 3. Voeg het CNAME-record toe dat WeWeb aangeeft bij je DNS-provider 4. WeWeb configureert automatisch HTTPS
Publish je wijzigingen via de "Publish" knop in de rechterbovenhoek. Elke publicatie deployt je app naar WeWeb's globale CDN.
**Omgevingen**: WeWeb ondersteunt aparte staging- en productieomgevingen op betaalde plannen. Gebruik staging voor testen van nieuwe functies voordat je naar productie publiceert.
**Voor Nederlandse apps**: configureer je WeWeb-project in de WeWeb EU-regio voor betere laadtijden voor Nederlandse gebruikers. Combineer dit met Supabase EU-west voor een volledig in de EU gehoste stack.