Webstudio: die offene Alternative zu Webflow für statische und CMS-Websites

Wer mit mir über eine neue Website spricht, landet früher oder später bei der Frage: Webflow oder Webstudio? Beide Systeme setze ich regelmässig ein. Beide halte ich für hervorragende Werkzeuge. Und trotzdem gibt es keine Standardantwort, denn welches System besser passt, hängt von den Anforderungen des Projekts ab.

In diesem Beitrag stelle ich dir Webstudio ausführlich vor: was es ist, wie es funktioniert, wie es mit einem Headless-CMS wie Hygraph oder Sanity zusammenspielt, wo es Webflow voraus ist und wo nicht. Am Schluss findest du eine Entscheidungshilfe, mit der du einschätzen kannst, welches System für dein Vorhaben das richtige ist.

Kurz gesagt: Webflow ist die All-in-one-Plattform mit eingebautem CMS und sehr einfacher Inhaltspflege. Webstudio ist der offene, flexible Builder für statische Websites oder für Projekte, bei denen die Inhalte aus einem separaten CMS kommen.

Was ist Webstudio?

Webstudio ist ein visueller Website-Builder, der sich an Designer:innen und Entwickler:innen richtet. Wie in Webflow gestaltest du Seiten visuell, arbeitest dabei aber direkt mit echtem HTML und CSS. Es gibt keine Templates, deren Grenzen du später spürst, und keine Blackbox, die Code erzeugt, den du nicht verstehst.

Drei Dinge unterscheiden Webstudio grundlegend von anderen Buildern:

• Open Source: Der Builder ist unter der AGPL-Lizenz quelloffen. Der Code ist auf GitHub einsehbar, und die Community wächst schnell: Laut Webstudio wurden bereits über 229'000 Projekte erstellt, das Repository hat rund 8'800 Sterne auf GitHub.
• Kein Hosting-Lock-in: Du kannst deine Website bei Webstudio hosten, sie aber auch exportieren und auf eigener Infrastruktur betreiben, etwa bei Vercel, Netlify oder Cloudflare.
• Kein eingebautes CMS, dafür jedes CMS: Webstudio verzichtet bewusst auf ein eigenes CMS. Stattdessen bindest du Inhalte aus praktisch jedem Headless-CMS oder jeder Schnittstelle an, die über HTTP erreichbar ist.

Der visuelle Editor: volle CSS-Kontrolle

Wer Webflow kennt, findet sich in Webstudio schnell zurecht. Links der Navigator mit der Seitenstruktur, rechts das Style Panel, in der Mitte die Arbeitsfläche. Unter der Haube gibt es aber ein paar Unterschiede, die im Alltag viel ausmachen.

Alle CSS-Eigenschaften

Webstudio unterstützt sämtliche CSS-Eigenschaften, nicht nur eine Auswahl. Dazu gehören CSS-Variablen, calc(), moderne Layout-Techniken und Werte, die du direkt als CSS einfügen kannst. Wenn du ein Styling im Browser oder in einem anderen Projekt ausprobiert hast, kopierst du es einfach hinein.

Design Tokens statt Klassen

Statt Klassen arbeitet Webstudio mit sogenannten Tokens. Sie funktionieren ähnlich, sind aber flexibler: Du kannst mehrere Tokens auf ein Element anwenden, ihre Reihenfolge ändern und lokale Styles jederzeit in ein Token umwandeln. Das macht den Aufbau eines sauberen Design Systems einfacher, ohne dass du dich mit verschachtelten Combo-Klassen herumschlagen musst.

Eigene Breakpoints

Die Breakpoints legst du selbst fest, mit min-width oder max-width. So kannst du mobile-first oder desktop-first arbeiten, je nachdem, was zum Projekt passt.

Slots, Komponenten und Animationen

Wiederkehrende Elemente wie Navigation oder Footer legst du als Slots an und pflegst sie an einer Stelle. Für Menüs, Dialoge, Tabs oder Akkordeons stehen barrierearme Komponenten auf Basis von Radix zur Verfügung. Animationen, die beim Scrollen ablaufen, nutzen die native Scroll Timeline API des Browsers. Sie laufen also ohne zusätzliche JavaScript-Bibliotheken und entsprechend flüssig.

Inhalte pflegen im Content Mode

Für Kund:innen und Redaktionsteams gibt es den Content Mode. Darin lassen sich Texte, Links und Bilder in freigegebenen Content Blocks bearbeiten, neue Seiten aus vorbereiteten Vorlagen erstellen und Seiteneinstellungen wie Titel und Beschreibung anpassen. Struktur und Design bleiben geschützt. Der Zugang erfolgt über einen Freigabelink, bei dem du festlegst, ob die Person auch veröffentlichen darf.

Statische Websites: schnell, sicher, günstig

Für viele Websites braucht es gar kein CMS. Eine Unternehmenswebsite mit Startseite, Angebot, Über uns, Referenzen und Kontakt ändert sich selten und lässt sich mit dem Content Mode gut pflegen. Genau hier spielt Webstudio seine Stärken aus.

Webstudio Cloud liefert deine Seiten über Cloudflare Workers an über 320 Standorten weltweit aus. Die Seiten werden am nächstgelegenen Standort ausgeliefert, entsprechend schnell sind die Ladezeiten. Webstudio bietet zudem Hosting in Europa an und legt Wert auf Datenschutz nach DSGVO. Bilder werden automatisch in modernen Formaten wie WebP und AVIF ausgeliefert, in passenden Grössen und mit Lazy Loading.

Formulare funktionieren ohne Zusatzdienst, und über Webhooks kannst du Einsendungen direkt an andere Tools weitergeben. Weiterleitungen (301 und 302), eigene Meta-Daten, Canonical- und hreflang-Angaben sowie das Ausschliessen einzelner Seiten aus der Indexierung sind ebenfalls dabei.

CMS-Websites: Webstudio mit Hygraph oder Sanity

Spannend wird Webstudio, sobald Inhalte strukturiert und in grösserer Menge gepflegt werden: Blogs, Referenzen, Produkte, Veranstaltungen, Stellenangebote, mehrsprachige Inhalte. Dafür kombiniere ich Webstudio mit einem Headless-CMS. Meine beiden Favoriten sind Hygraph und Sanity.

So funktioniert die Anbindung

In Webstudio legst du eine sogenannte Resource an. Das ist eine Abfrage an eine REST- oder GraphQL-Schnittstelle, mit URL, Methode, Headern und bei Bedarf einem Body. Die Antwort steht dir danach als Daten im Builder zur Verfügung. Diese Daten bindest du an Texte, Bilder, Links, Meta-Tags oder Listen.

Für Detailseiten nutzt du dynamische Pfade wie /blog/:slug. Webstudio liest den Slug aus der URL, holt den passenden Eintrag aus dem CMS und rendert die Seite. Gibt es keinen passenden Eintrag, liefert die Seite per Ausdruck den Statuscode 404. Auch dynamische Sitemaps lassen sich so erzeugen.

Webstudio rendert diese Seiten serverseitig und speichert sie im Edge-Cache von Cloudflare zwischen. Das Ergebnis ist eine dynamische Website, die sich für Besucher:innen und Suchmaschinen anfühlt wie eine statische.

Hygraph

Hygraph ist ein Headless-CMS mit konsequenter GraphQL-Schnittstelle. Es eignet sich besonders für Projekte, bei denen Inhalte aus mehreren Quellen zusammenfliessen, etwa aus einem Shop-System oder einer Produktdatenbank. Die Oberfläche ist aufgeräumt, die Rollen und Freigaben sind klar, und die Lokalisierung ist von Grund auf mitgedacht.

Sanity

Sanity ist extrem flexibel. Das Content-Modell definierst du im Code, und die Redaktionsoberfläche, das Sanity Studio, lässt sich bis ins Detail an die Bedürfnisse des Teams anpassen. Inhalte werden als strukturierter Rich Text gespeichert und lassen sich so in jedem Kanal wiederverwenden: Website, App, Newsletter oder KI-Anwendungen. Mehrere Sprachen, Echtzeit-Zusammenarbeit und Visual Editing sind möglich.

Beide Systeme bieten kostenlose Einstiegspläne, die für kleinere Websites oft reichen. Bei vielen Sprachen, vielen Einträgen oder grossen Teams kommst du aber an Grenzen und brauchst einen kostenpflichtigen Plan. Das kläre ich vor Projektstart, damit es später keine Überraschungen gibt.

Was du wissen solltest

Die Kombination ist mächtig, aber sie ist auch anspruchsvoller als ein CMS, das direkt eingebaut ist. Ein Beispiel aus der Praxis: Strukturierter Rich Text aus Sanity, also Absätze, Zwischentitel, Listen und Zitate, muss in Webstudio sauber in HTML übersetzt werden. Das ist lösbar, braucht aber etwas Erfahrung. Für solche Projekte lohnt sich daher eine durchdachte Planung des Content-Modells.

Hosting ab CHF 120 pro Jahr

Ein klarer Vorteil von Webstudio gegenüber Webflow sind die Kosten für den Betrieb. Bei KOMUNIQUE haben wir für Webstudio-Websites sehr attraktive Hostingkonditionen: ab CHF 120 pro Jahr.

Gerade für KMU, Vereine oder Organisationen, die eine schnelle, professionelle Website ohne hohe laufende Kosten brauchen, ist das ein starkes Argument. Und weil Webstudio keinen Hosting-Lock-in kennt, bleibst du flexibel: Die Website lässt sich jederzeit als statisches Paket exportieren oder über die Kommandozeile auf eine andere Infrastruktur übertragen.

Webflow und Webstudio im Vergleich

Beide Systeme haben ihre Berechtigung. Die folgende Übersicht zeigt, wo die Unterschiede liegen:

• Editor: Beide arbeiten visuell auf Basis von HTML und CSS. Webstudio unterstützt alle CSS-Eigenschaften und arbeitet mit Tokens. Webflow nutzt Klassen und hat sehr ausgereifte Interaktionen und Animationen.
• CMS: Webflow bringt ein eigenes, einfach bedienbares CMS mit. Webstudio setzt auf ein externes Headless-CMS wie Hygraph oder Sanity und ist dadurch flexibler, aber auch komplexer.
• Inhaltspflege durch Kund:innen: Der Webflow Editor ist sehr einfach und übersichtlich. Bei Webstudio pflegst du statische Inhalte im Content Mode und CMS-Inhalte im jeweiligen Headless-CMS.
• Hosting: Webflow hostet ausschliesslich selbst. Webstudio-Websites hosten wir ab CHF 120 pro Jahr, alternativ kannst du selbst hosten.
• Export: Bei Webflow lassen sich Code und CMS-Inhalte exportieren, Formulare, Suche und Lokalisierung funktionieren danach aber nicht mehr. Webstudio ist Open Source und lässt sich vollständig exportieren und selbst betreiben.
• Mehrsprachigkeit: Webflow bietet Localization als Zusatzpaket, alternativ Weglot. In Webstudio kommt die Mehrsprachigkeit in der Regel aus dem Headless-CMS.
• Reife und Ökosystem: Webflow ist etabliert, mit grosser Community, Marketplace und vielen Integrationen. Webstudio ist jünger, entwickelt sich aber sehr schnell weiter.
• KI und MCP: Beide Plattformen bieten einen MCP-Server. Dazu mehr im nächsten Abschnitt.

Teilweise kompatibel: der Wechsel wird einfacher

Webstudio hat eine Funktion, die gerade für Webflow-Projekte interessant ist: Du kannst Elemente in Webflow kopieren und direkt in Webstudio einfügen. Struktur, Klassen und Styles werden dabei übernommen, die Klassen werden zu Tokens. Ganz ohne Nacharbeit geht es nicht, denn nicht jede Webflow-Funktion hat in Webstudio eine Entsprechung, etwa Interaktionen oder bestimmte Komponenten. Für Layouts und Sektionen spart diese Kompatibilität aber viel Zeit.

Das ist für dich als Kund:in ein echter Vorteil: Die Entscheidung für ein System ist keine Entscheidung für immer. Wenn sich die Anforderungen ändern, ist ein Wechsel deutlich einfacher als bei vielen anderen Systemen.

MCP: KI als Copilot senkt die Entwicklungskosten

Sowohl Webflow als auch Webstudio stellen einen MCP-Server bereit. MCP steht für Model Context Protocol und ist ein offener Standard, über den KI-Assistenten wie Claude, ChatGPT oder Cursor direkt mit einer Anwendung arbeiten können.

Konkret heisst das: Die KI kann Seiten anlegen, Elemente einfügen, Styles und Tokens setzen, Texte übersetzen, CMS-Einträge pflegen, SEO-Angaben prüfen, Weiterleitungen einrichten und Probleme aufspüren. Bei Webstudio läuft das über die Kommandozeile und einen Projekt-Link, bei Webflow über den offiziellen MCP-Server, für einige Funktionen ergänzt durch die Designer-App.

Wichtig ist mir dabei: Die KI ersetzt nicht das Handwerk. Konzept, Design, Struktur und Qualitätskontrolle bleiben bei mir. Aber repetitive Arbeiten wie das Anlegen von dutzenden CMS-Einträgen, das Übersetzen einer ganzen Website, das Prüfen von Meta-Daten oder das Einrichten von Weiterleitungen erledigt die KI in einem Bruchteil der Zeit. Diese Effizienz gebe ich weiter. Für dich bedeutet das tiefere Entwicklungskosten bei gleicher Qualität.

Wo Webstudio (noch) an Grenzen stösst

Auch hier gehört eine ehrliche Einordnung dazu:

• Jüngeres System: Webstudio entwickelt sich schnell, manche Funktionen sind neu oder ändern sich noch. Die KI-Funktionen im Builder selbst befinden sich zum Beispiel noch im Alpha-Stadium.
• Kleineres Ökosystem: Es gibt weniger Vorlagen, Erweiterungen und Fachleute als bei Webflow.
• CMS-Projekte sind komplexer: Die Trennung von Builder und CMS bringt Flexibilität, aber auch mehr Aufwand bei Planung und Einrichtung.
• Zwei Oberflächen für Redaktionen: Bei CMS-Websites arbeitet das Team im Headless-CMS und nicht direkt auf der Seite. Wer möglichst einfache Inhaltspflege an einem Ort möchte, ist mit Webflow besser bedient.

Webflow oder Webstudio? Eine Entscheidungshilfe

Webstudio passt gut, wenn …

• du eine schnelle, statische Unternehmenswebsite mit tiefen laufenden Kosten möchtest,
• deine Inhalte bereits in einem Headless-CMS liegen oder aus mehreren Quellen kommen,
• du volle Kontrolle über Code und Hosting willst und keinen Lock-in möchtest,
• Datenschutz und Hosting in Europa für dich wichtig sind,
• du mehrere Kanäle wie Website, App und Newsletter aus einem CMS bespielen willst.

Webflow passt gut, wenn …

• dein Team Inhalte möglichst einfach direkt auf der Website pflegen soll,
• du ein integriertes CMS ohne weitere Systeme bevorzugst,
• aufwendige Interaktionen und Animationen gefragt sind,
• du auf ein etabliertes Ökosystem mit vielen Integrationen setzen willst.

In vielen Fällen ist die Antwort nach einem kurzen Gespräch klar. Und falls nicht, schauen wir uns die Anforderungen gemeinsam im Detail an.

Häufige Fragen

Ist Webstudio eine Kopie von Webflow?

Nein. Die Bedienung ist ähnlich, weil beide visuell mit HTML und CSS arbeiten. Webstudio verfolgt aber einen anderen Ansatz: Open Source, volle CSS-Unterstützung, kein eingebautes CMS und kein Hosting-Lock-in.

Kann ich meine Webflow-Website zu Webstudio umziehen?

Teilweise. Layouts und Sektionen lassen sich per Kopieren und Einfügen übernehmen. Interaktionen, CMS-Inhalte und einige Komponenten müssen neu aufgebaut oder in ein Headless-CMS übertragen werden. Ein Umzug ist also ein Projekt, aber ein gut planbares.

Kann ich meine Inhalte bei Webstudio selbst pflegen?

Ja. Statische Inhalte bearbeitest du im Content Mode direkt auf der Seite. CMS-Inhalte wie Blogbeiträge pflegst du im Headless-CMS, zum Beispiel in Hygraph oder im Sanity Studio.

Was kostet das Hosting einer Webstudio-Website?

Bei KOMUNIQUE hostest du deine Webstudio-Website ab CHF 120 pro Jahr. Wird ein Headless-CMS eingesetzt, können je nach Umfang zusätzliche Kosten für einen kostenpflichtigen CMS-Plan anfallen.

Ist Webstudio für SEO geeignet?

Ja. Sauberer Code, schnelle Ladezeiten, eigene Meta-Daten, Weiterleitungen, Canonical- und hreflang-Angaben, dynamische Sitemaps und optimierte Bilder sind möglich. Auch CMS-Seiten werden serverseitig gerendert und sind für Suchmaschinen und KI-Systeme vollständig lesbar.

Fazit

Webflow und Webstudio sind für mich keine Konkurrenten, sondern zwei starke Werkzeuge mit unterschiedlichen Schwerpunkten. Webflow überzeugt mit dem integrierten CMS, der einfachen Inhaltspflege und einem ausgereiften Ökosystem. Webstudio punktet mit Offenheit, voller CSS-Kontrolle, freier Wahl des CMS und sehr günstigem Hosting ab CHF 120 pro Jahr.

Weil beide Systeme teilweise kompatibel sind und beide einen MCP-Server bieten, kann ich in beiden effizient arbeiten und KI als Copilot einsetzen. Welches System wir einsetzen, entscheiden wir gemeinsam anhand deiner Anforderungen.

Du planst eine neue Website und bist unsicher, welches System passt? Schreib mir. Ich schaue mir dein Vorhaben an und empfehle dir die Lösung, die zu deinen Inhalten, deinem Team und deinem Budget passt.