Was ist der Unterschied zwischen WeWeb und Webflow?

Webflow ist ein Marketing-Website-Builder — ideal für Landingpages, Blogs und Unternehmens-Websites. WeWeb ist ein Frontend-Builder für Web-Anwendungen — ideal für SaaS-Apps, interne Tools und Dashboards, die sich mit einer Datenbank (Supabase, Xano) verbinden. Versuche nicht, ein SaaS in Webflow zu bauen oder eine Marketing-Website in WeWeb zu überentwickeln.

Muss ich Code schreiben, um WeWeb zu nutzen?

Für 80–90 % der Funktionen nicht. WeWeb hat einen vollständigen visuellen Editor für UI, Datenverbindungen, Authentifizierung und grundlegende Logik. Für komplexe benutzerdefinierte Funktionen (Datenverarbeitung, externe API-Integrationen) kannst du JavaScript-Snippets hinzufügen — aber die meisten B2B-Apps brauchen das nicht.

Wie skaliert eine WeWeb-App bei vielen Nutzern?

WeWeb-Apps werden als statische Dateien auf Vercels globalem CDN gehostet — das Frontend skaliert unbegrenzt. Die Skalierungsfrage betrifft das Backend (Supabase). Supabase PostgreSQL skaliert auf Millionen Nutzer mit korrektem Indexing und Connection-Pooling. Für 99 % der SaaS-Apps ist WeWeb + Supabase Pro mehr als ausreichend bis 100.000+ MAU.

Brauche ich eine WeWeb-Lizenz für jede App, die ich baue?

Der WeWeb Pro-Plan (149 USD/Monat) erlaubt eine veröffentlichte App auf einer Custom-Domain. Für mehrere Apps brauchst du den Team-Plan oder kaufst Zusatz-Slots. Für Agenturen, die mehrere Kundenprojekte bauen: WeWeb hat spezielle Agentur-Preise — kontaktiere sie direkt für Volumenpakete.

WeWeb Tutorial für Einsteiger: Deine erste Web-App bauen

Was WeWeb ist und wofür man es nutzt

WeWeb ist ein visueller Frontend-Builder, kein Website-Builder. Der Unterschied ist entscheidend: WeWeb baut Web-Anwendungen — Tools mit Benutzerauthentifizierung, Datenbankoperationen, komplexen UI-Logiken. Nicht Blogs oder Marketing-Websites (dafür gibt es Webflow).

Wofür WeWeb ausgezeichnet ist: - **SaaS-Frontends**: der UI-Layer einer SaaS-Anwendung, verbunden mit Supabase oder Xano als Backend - **Interne Tools**: HR-Dashboards, Projektmanagement-Tools, Daten-Reports - **Kunden-Portale**: Bereiche, wo Kunden ihre Bestellungen, Tickets oder Konten verwalten - **Marktplätze**: Anzeige von Produkten/Dienstleistungen mit Suche, Filter und Checkout

WeWebs technischer Hintergrund: es generiert eine Vue.js-Anwendung, die über Vercels CDN gehostet wird. Das bedeutet global schnelle Ladezeiten und unbegrenzte Skalierung — das Frontend ist nur statische Dateien.

Für den deutschen Markt: WeWeb ist bei deutschen SaaS-Agenturen und Mittelstandsprojekten sehr beliebt, weil es Supabase EU-Region nativ unterstützt und damit DSGVO-konforme Apps ohne Kompromisse ermöglicht.

Erstes Projekt einrichten

Erstelle ein Konto auf weweb.io (kostenlos im Staging). Neues Projekt → Name und Beschreibung.

**Design-System einrichten**: WeWeb hat ein eingebautes Design-System mit Farben, Typographie und Spacing. Gehe zu Design → Design Tokens und definiere: - Primary Color: deine Hauptmarkenfarbe - Neutral Colors: Grauabstufungen für Text und Hintergründe - Font Family: z.B. Inter (ausgezeichnet für B2B-Apps) - Border Radius: wie rund sollen Buttons und Cards sein?

**Supabase verbinden**: Add Plugin → Supabase → Project URL und Anon Key eingeben. WeWeb liest dein Supabase-Schema und macht alle Tabellen als Datenquellen verfügbar.

**Authentifizierung aktivieren**: Mit aktiviertem Supabase-Plugin → Authentication → Enable. WeWeb erstellt automatisch Login/Logout-Actions und einen Auth-State, den du für bedingtes Rendering nutzen kannst.

Collections und Daten anzeigen

WeWebs Daten-Konzept dreht sich um "Collections" — Datensätze, die an eine Datenquelle gebunden sind:

1. **Collection erstellen**: Data → Collections → Add Collection → Supabase → deine Tabelle → Filter hinzufügen (z.B. nur Zeilen des aktuellen Nutzers) → Felder auswählen

2. **In einer Liste anzeigen**: Ziehe ein Container-Widget auf den Canvas → bind es an deine Collection (Data-Binding-Panel) → Container wird zu einer Liste: für jedes Element in der Collection wird eine Instanz des Containers erstellt

3. **Felder binden**: Innerhalb des Container-Kinder-Widgets: klicke auf ein Text-Widget → Value → bind an ein Collection-Feld (`item.title`, `item.created_at`, etc.)

4. **Filter und Suche**: Füge ein Input-Feld hinzu, gebunden an eine Seiten-Variable `searchQuery`. In der Collection: Filter → title contains `searchQuery`. Die Liste filtert automatisch wenn der Nutzer tippt.

Row-Level-Security in Supabase stellt sicher, dass WeWeb nur Zeilen zurückgibt, die der angemeldete Nutzer sehen darf — du musst keine Autorisierungslogik im Frontend schreiben.

Formulare und Daten schreiben

Daten in Supabase schreiben mit WeWeb:

1. **Formular-Layout**: Erstelle ein Seiten-Layout mit Input-Feldern (WeWebs Input-Komponente oder UI-Kit-Felder). Jedes Feld: bind an eine Seiten-Variable (`newItemTitle`, `newItemDescription`, etc.)

2. **Submit-Action**: Button → OnClick → Add Action → Supabase → Insert Row → deine Tabelle → Felder auf Seiten-Variablen mappen (title: `newItemTitle`, etc.)

3. **Feedback**: Nach erfolgreichem Insert: Show Notification ("Eintrag erstellt"), Variablen zurücksetzen, Collection neu laden (damit die neue Zeile in der Liste erscheint)

4. **Validierung**: WeWeb hat eingebaute Formular-Validierung — required Fields, E-Mail-Format, Mindestzahl Zeichen. Aktiviere sie in der Input-Komponente-Einstellungen.

5. **Update und Delete**: Update-Action folgt demselben Muster, aber mit PATCH statt INSERT. Delete: Button → Action → Supabase → Delete Row → Filter: `id = item.id`. Nach dem Löschen Collection neu laden.

Navigation und mehrere Seiten

WeWeb-Apps haben mehrere Seiten, verbunden durch Navigation:

**Seiten erstellen**: Pages-Panel → + Add Page → Name und URL-Slug (z.B. `/projects/:id` für eine Detail-Seite mit Dynamic Parameter)

**Navigation implementieren**: Button oder List-Item-Click → Action → Navigate → Seite auswählen → Parameter übergeben (z.B. `id: item.id`)

**Dynamic Parameter in Zielseite**: In der Zielseite-Query: filtere Supabase nach `id = url_parameter.id`. Zeige dann die Details des spezifischen Eintrags.

**Navigation Guards**: Für Seiten, die Authentifizierung erfordern: Page Settings → Access Control → Authenticated Users Only. WeWeb leitet nicht-angemeldete Nutzer zur Login-Seite weiter.

**Layout und Navigationsleiste**: Erstelle eine Header-Komponente mit dem App-Logo, Navigationslinks und einem User-Avatar-Dropdown (mit Logout-Option). Füge diese Komponente auf jeder Seite ein — WeWeb unterstützt wiederverwendbare Komponenten, die einmal bearbeitet überall aktualisiert werden.

Deployen und live gehen

WeWeb hostet deine App automatisch auf einem globalen CDN (Vercel). Um die App produktionsbereit zu machen:

1. **Custom Domain**: Settings → Domains → deine Domain hinzufügen (app.deinprodukt.de). WeWeb konfiguriert DNS-Records — du musst nur einen CNAME-Record bei deinem Domain-Provider setzen.

2. **Environment Variables**: Für Produktions- vs Staging-Unterschiede: Project Settings → Environments → Variablen setzen (z.B. SUPABASE_URL kann für Staging und Produktion verschieden sein)

3. **Publish**: Publish-Button → Select Environment (Production) → Publish. WeWeb baut und deployed die App auf dem CDN. Erste Deployments dauern 2–3 Minuten, danach 30–60 Sekunden.

4. **DSGVO-Elemente sicherstellen**: Datenschutzrichtlinie-Link im Footer, Cookie-Banner wenn Tracking-Scripts genutzt werden, Impressum (in Deutschland gesetzlich vorgeschrieben für kommerzielle Websites).

5. **Monitoring**: WeWeb integriert sich mit PostHog, Google Analytics und anderen Analytics-Tools. Aktiviere Event-Tracking für Schlüsselaktionen (Registrierung, erster Hauptaction, Zahlungs-Klick) um die Nutzungs- und Konversionsrate zu messen.