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.