Wat WeWeb is en waarom het anders is

WeWeb is een visuele webapplicatie-bouwer, maar het is geen websitebuilder zoals Webflow, en het is geen algemeen no-code-platform zoals Bubble. Dit onderscheid is belangrijk. WeWeb is specifiek gebouwd voor webapplicaties: datagedreven interfaces waarbij gebruikers inloggen, met records interacteren, en acties uitvoeren. Denk aan dashboards, CRM's, klantportalen en interne tools, niet marketingsites.

Vergeleken met Bubble hanteert WeWeb een frontend-first-aanpak. Bubble bundelt een eigen database en backend samen met zijn UI-laag. WeWeb is database-agnostisch: je verbindt het met elke backend via REST API, GraphQL, of zijn native Supabase-connector. Dit betekent dat je data leeft in een echte, draagbare database (PostgreSQL via Supabase) in plaats van vergrendeld binnen een platform. Voor ontwikkelaars die ooit van frontend willen wisselen, is dit een cruciaal architecturaal voordeel.

Vergeleken met Webflow handelt WeWeb dynamische data en gebruikersauthenticatie native af. Webflow blinkt uit in statische en CMS-gedreven marketingsites. WeWeb handelt de geauthenticeerde, per-gebruiker dynamische data af die een webapplicatie definieert. Heeft je product gebruikersaccounts nodig, data die verandert op basis van wie is ingelogd, of CRUD-bewerkingen, dan is WeWeb het juiste gereedschap. Je kunt de vergelijking in meer detail verkennen op de WeWeb-toolpagina.

Je WeWeb-project opzetten

Maak een account aan op weweb.io en creëer een nieuw project. Je begint met een lege workspace. De WeWeb-editor kent drie kernconcepten: Pages (routes in je app), een responsief Grid-layoutsysteem, en een Component Library. Besteed 10 minuten aan het verkennen van de editor voordat je gaat bouwen, sleep een container, verander de grootte ervan over verschillende breakpoints, en voeg een paar elementen toe om te begrijpen hoe het grid werkt.

Maak om te beginnen twee pagina's aan: een Login-pagina en een Dashboard-pagina. WeWeb gebruikt een pagina-gebaseerd routeringssysteem vergelijkbaar met Next.js, elke pagina heeft zijn eigen URL en kan zijn eigen layout hebben. Stel de Login-pagina in als je standaard (niet-geauthenticeerde) route. Je beveiligt het Dashboard later met een auth guard.

Het responsieve grid gebruikt een 12-koloms layout met configureerbare breakpoints: desktop, tablet en mobiel. Maak er een gewoonte van om elke layout die je bouwt bij alle drie breakpoints te controleren voordat je verdergaat. WeWeb toont een breakpoint-toggle in de bovenste werkbalk, gebruik deze voortdurend. Responsiviteit achteraf repareren kost 3× langer dan responsief bouwen vanaf het begin.

Je Supabase-database verbinden

WeWeb heeft een ingebouwde Supabase-connector. Open in de linkerzijbalk het Plugins-paneel en voeg de Supabase-plugin toe. Je hebt twee waarden nodig uit je Supabase-project: de Project URL en de publieke anon-sleutel, beide te vinden in je Supabase-dashboard onder Settings > API. Plak ze in WeWeb's connector en sla op.

Eenmaal verbonden kan WeWeb lezen van en schrijven naar elke Supabase-tabel, RPC-functies aanroepen, en luisteren naar realtime-subscriptions, allemaal zonder code te schrijven. De connector integreert ook met Supabase Auth, wat betekent dat WeWeb aanmelding, inloggen en sessiebeheer kan afhandelen via dezelfde plugin. Dit is de integratie die de WeWeb + Supabase-stack zo krachtig maakt voor beginners: één connector geeft je data, auth en realtime in één opzetstap.

Test de verbinding door een eenvoudige datacollection in WeWeb aan te maken die rijen ophaalt uit een van je Supabase-tabellen. Verschijnen de rijen in de collection-preview, dan ben je verbonden. Zie je een authenticatiefout, controleer dan of Row Level Security is ingeschakeld en of je een geschikte policy hebt voor de anon-rol op de tabel die je test.

Je datamodel bouwen in Supabase

Ontwerp je databaseschema voordat je enige UI bouwt. Voor een beginnerstutorial bouwen we een eenvoudige taakbeheer-app. Navigeer in Supabase naar de Table Editor en maak een tasks-tabel aan met deze kolommen: id (int8, primary key, automatisch gegenereerd), user_id (uuid, verwijst naar auth.users), title (text, not null), status (text, standaard 'pending'), created_at (timestamptz, standaard now()), en updated_at (timestamptz).

Relaties zijn belangrijk, zelfs in eenvoudige apps. De user_id-kolom is een foreign key die elke taak koppelt aan de gebruiker die deze heeft aangemaakt. Dit is de basis van data-isolatie, je wilt alleen dat gebruikers hun eigen taken zien. Schakel Row Level Security in op de tasks-tabel en voeg een SELECT-policy toe: USING (user_id = auth.uid()). Voeg bijpassende INSERT-, UPDATE- en DELETE-policies toe met WITH CHECK (user_id = auth.uid()). Deze vier policies zijn het minimum voor een veilig single-user datamodel.

Voor complexere apps zou je een workspaces-tabel en een workspace_id-foreign-key toevoegen om multi-tenancy mogelijk te maken, maar voor je eerste WeWeb-app is single-user RLS de juiste plek om te beginnen. De Supabase-toolpagina gaat dieper in op geavanceerde datamodelleringspatronen wanneer je verder wilt gaan.

CRUD-bewerkingen maken in WeWeb

Met je Supabase-tabel verbonden, maak je een datacollection in WeWeb aan voor de tasks-tabel. Stel deze in om rijen op te halen waarbij user_id gelijk is aan het ID van de huidige gebruiker (WeWeb's Supabase-plugin stelt het huidige-gebruikersobject beschikbaar als variabele). Bind een herhalend lijstcomponent aan deze collection, elk item in de lijst rendert één taakrij.

Voeg voor het aanmaken van taken een formulier toe met een tekstinvoer en een Submit-knop. Voeg in de click-workflow van de knop een Supabase Insert-actie toe: table = tasks, data = { title: form.title, user_id: currentUser.id, status: 'pending' }. Trigger na een geslaagde insert een collection-refresh, zodat de nieuwe taak direct in de lijst verschijnt. Dit patroon, formulier indienen → insert → refresh, is de kern-create-workflow in WeWeb.

Update en delete volgen hetzelfde patroon. Voor update bind je een invoerveld aan de titel van de geselecteerde taak, en bij het opslaan voer je een Supabase Update-actie uit die filtert op het id van de taak. Voor delete voeg je een knop toe met een Supabase Delete-actie en een id-filter. Deze drie workflows, create, update, delete, gecombineerd met je lijstweergave geven je volledige CRUD in ongeveer 30 minuten editorwerk. Wil je dit professioneel laten bouwen voor een echt product, ons team heeft 50+ no-code-apps in productie opgeleverd met precies deze stack.

Authenticatie toevoegen

In WeWeb handelt de Auth-sectie van de Supabase-plugin aanmelding, inloggen en sessiebeheer af. Maak op je Login-pagina een eenvoudig formulier met e-mail- en wachtwoordvelden en twee knoppen: Inloggen en Aanmelden. Bind de Inloggen-knop aan de Supabase Auth "Sign In with Email"-actie en de Aanmelden-knop aan "Sign Up with Email". Voeg na succesvol inloggen een navigatie-actie toe die doorstuurt naar je Dashboard-pagina.

Open de pagina-instellingen en schakel Auth Guard in om de Dashboard-pagina te beveiligen tegen niet-geauthenticeerde toegang. Kies "Redirect to Login if not authenticated" en wijs deze naar je Login-pagina. WeWeb stuurt niet-geauthenticeerde bezoekers automatisch door voordat de pagina rendert, geen extra logica nodig.

Voeg voor een productie-app ook een Uitloggen-knop toe aan je navigatie. Bind deze aan de Supabase Auth "Sign Out"-actie gevolgd door een redirect naar de Login-pagina. Test de volledige flow: meld je aan met een nieuw e-mailadres, controleer de redirect naar Dashboard, ververs de pagina om te bevestigen dat de sessie behouden blijft, en log dan uit en bevestig de redirect terug naar Login. Authenticatie in WeWeb met Supabase implementeren kost ongeveer 45 minuten van begin tot eind.

Styling en responsiviteit

WeWeb gebruikt een systeem van designvariabelen vergelijkbaar met CSS custom properties. Definieer je merkkleuren, lettergroottes, randradii en spacingwaarden als variabelen in het Design System-paneel. Eenmaal gedefinieerd, pas je ze toe door je hele app in plaats van waarden hard te coderen. Dit betekent dat je primaire merkkleur later wijzigen slechts één update vereist, geen gezoek door 200 componenten.

Voor responsiviteit valt WeWeb's grid van nature samen over breakpoints, maar je zult kolombreedtes moeten aanpassen, elementen verbergen, en spacing wijzigen op tablet- en mobielformaten. Gebruik het breakpoint-override-systeem: elke stijleigenschap kan per breakpoint worden overschreven. Een vuistregel: ontwerp eerst voor desktop, controleer dan tablet (meestal kleine aanpassingen), en dan mobiel (meestal vereist dit bewuste kolomstapeling en verkleining van lettergrootte).

Herbruikbare componenten zijn je grootste productiviteitsvermenigvuldiger. Komt een patroon meer dan twee keer voor, een kaartlayout, een statusbadge, een modalstructuur, maak er dan een WeWeb-component van. Componenten worden eenmaal gedefinieerd en overal bijgewerkt. Dit is vooral belangrijk voor navigatiebalken en zijbalken die op elke pagina verschijnen. Je navigatie vanaf het begin als component bouwen bespaart uren repetitief werk naarmate je app groeit.

Je WeWeb-app publiceren

Klik op Publish in de bovenste balk van WeWeb wanneer je klaar bent om live te gaan. Je kunt gratis publiceren naar WeWeb's ingebouwde subdomein (jouwapp.weweb.io), of een custom domein koppelen op elk betaald plan. Ga voor het toevoegen van een custom domein naar Project Settings > Domains, voer je domein in, en volg de DNS-instructies, WeWeb regelt SSL automatisch via Cloudflare.

Voor SEO-instellingen heeft elke pagina in WeWeb een eigen SEO-paneel waar je de paginatitel, meta-beschrijving en Open Graph-afbeelding instelt. Configureer voor publieke pagina's ook de canonical URL zodat deze overeenkomt met je custom domein. WeWeb's gepubliceerde output is server-gerenderde HTML, pagina's zijn crawlbaar door zoekmachines en scoren standaard goed op Core Web Vitals.

Loop na het publiceren nog één keer je volledige gebruikersflow door in een privé-browservenster om te bevestigen dat de productie-build zich identiek gedraagt aan de editorpreview. Controleer dat authenticatie-redirects werken, dat CRUD-bewerkingen slagen met een echt gebruikersaccount, en dat de app er correct uitziet op mobiel. Gefeliciteerd, je hebt je eerste WeWeb-app gebouwd en gepubliceerd.