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

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.

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