Webstudio: The Open Alternative to Webflow for Static and CMS Websites

Sooner or later, every conversation about a new website reaches the same question: Webflow or Webstudio? I use both systems regularly, and I consider both excellent tools. Still, there is no standard answer, because which system fits better depends on the requirements of the project.

In this post, I introduce Webstudio in detail: what it is, how it works, how it plays together with a headless CMS such as Hygraph or Sanity, where it is ahead of Webflow and where it is not. At the end, you will find a decision guide to help you assess which system is right for your project.

In short: Webflow is the all-in-one platform with a built-in CMS and very simple content editing. Webstudio is the open, flexible builder for static websites or for projects where content comes from a separate CMS.

What is Webstudio?

Webstudio is a visual website builder aimed at designers and developers. As in Webflow, you design pages visually, but you work directly with real HTML and CSS. There are no templates whose limits you will feel later, and no black box generating code you do not understand.

Three things set Webstudio fundamentally apart from other builders:

• Open source: The builder is open source under the AGPL license. The code is available on GitHub, and the community is growing fast: according to Webstudio, more than 229,000 projects have been created, and the repository has around 8,800 stars on GitHub.
• No hosting lock-in: You can host your website with Webstudio, but you can also export it and run it on your own infrastructure, for example on Vercel, Netlify or Cloudflare.
• No built-in CMS, but any CMS: Webstudio deliberately does without a CMS of its own. Instead, you connect content from virtually any headless CMS or any API reachable over HTTP.

The visual editor: full CSS control

If you know Webflow, you will quickly find your way around Webstudio. The Navigator with the page structure sits on the left, the Style Panel on the right, the canvas in the middle. Under the hood, though, there are a few differences that matter a lot in day-to-day work.

Every CSS property

Webstudio supports every CSS property, not just a selection. That includes CSS variables, calc(), modern layout techniques and values you can paste in directly as CSS. If you have tried out a style in the browser or in another project, you simply paste it in.

Design tokens instead of classes

Instead of classes, Webstudio works with so-called tokens. They work similarly but are more flexible: you can apply several tokens to one element, change their order and convert local styles into a token at any time. That makes building a clean design system easier, without wrestling with nested combo classes.

Custom breakpoints

You define the breakpoints yourself, with min-width or max-width. That lets you work mobile-first or desktop-first, whichever suits the project.

Slots, components and animations

Recurring elements such as the navigation or footer are set up as slots and maintained in one place. For menus, dialogs, tabs or accordions, accessible components based on Radix are available. Scroll-driven animations use the browser's native Scroll Timeline API, so they run without additional JavaScript libraries and stay smooth.

Editing content in Content Mode

For clients and editorial teams, there is Content Mode. In it, text, links and images in approved content blocks can be edited, new pages created from prepared templates, and page settings such as title and description adjusted. Structure and design stay protected. Access works through a share link, for which you decide whether the person may also publish.

Static websites: fast, secure, affordable

Many websites do not need a CMS at all. A company website with a home page, services, about, case studies and contact rarely changes and is easy to maintain in Content Mode. This is exactly where Webstudio plays to its strengths.

Webstudio Cloud delivers your pages through Cloudflare Workers at more than 320 locations worldwide. Pages are served from the nearest location, so load times are correspondingly fast. Webstudio also offers hosting in Europe and puts an emphasis on GDPR-compliant data protection. Images are automatically delivered in modern formats such as WebP and AVIF, in suitable sizes and with lazy loading.

Forms work without an extra service, and webhooks let you pass submissions directly to other tools. Redirects (301 and 302), custom meta data, canonical and hreflang tags, and excluding individual pages from indexing are included as well.

CMS websites: Webstudio with Hygraph or Sanity

Webstudio gets really interesting once content needs to be structured and maintained in larger volumes: blogs, case studies, products, events, job postings, multilingual content. For this, I combine Webstudio with a headless CMS. My two favorites are Hygraph and Sanity.

How the connection works

In Webstudio, you create a so-called resource. This is a request to a REST or GraphQL API, with URL, method, headers and, if needed, a body. The response is then available as data in the builder. You bind that data to text, images, links, meta tags or lists.

For detail pages, you use dynamic paths such as /blog/:slug. Webstudio reads the slug from the URL, fetches the matching entry from the CMS and renders the page. If there is no matching entry, an expression makes the page return a 404 status code. Dynamic sitemaps can be generated the same way.

Webstudio renders these pages on the server and caches them at the Cloudflare edge. The result is a dynamic website that feels like a static one to visitors and search engines.

Hygraph

Hygraph is a headless CMS built consistently around a GraphQL API. It is particularly well suited to projects where content flows together from several sources, for example from a store system or a product database. The interface is tidy, roles and permissions are clear, and localization is built in from the ground up.

Sanity

Sanity is extremely flexible. You define the content model in code, and the editing interface, Sanity Studio, can be tailored in detail to the team's needs. Content is stored as structured rich text, so it can be reused in any channel: website, app, newsletter or AI applications. Multiple languages, real-time collaboration and visual editing are all possible.

Both systems offer free entry plans that are often enough for smaller websites. With many languages, many entries or large teams, however, you will hit limits and need a paid plan. I clarify this before the project starts so there are no surprises later.

What you should know

The combination is powerful, but it is also more demanding than a CMS that is built in. One example from practice: structured rich text from Sanity, meaning paragraphs, subheadings, lists and quotes, has to be translated cleanly into HTML in Webstudio. That is solvable, but it takes some experience. For projects like these, careful planning of the content model pays off.

Hosting from CHF 120 per year

A clear advantage of Webstudio over Webflow is the cost of running the website. At KOMUNIQUE, we offer very attractive hosting terms for Webstudio websites: from CHF 120 per year.

For SMEs, associations or organizations that need a fast, professional website without high running costs, that is a strong argument. And because Webstudio has no hosting lock-in, you stay flexible: the website can be exported as a static package at any time or moved to other infrastructure via the command line.

Webflow and Webstudio compared

Both systems have their place. The following overview shows where the differences lie:

• Editor: Both work visually on the basis of HTML and CSS. Webstudio supports every CSS property and works with tokens. Webflow uses classes and has very mature interactions and animations.
• CMS: Webflow comes with its own CMS that is easy to use. Webstudio relies on an external headless CMS such as Hygraph or Sanity, which makes it more flexible but also more complex.
• Content editing by clients: The Webflow Editor is very simple and clear. With Webstudio, you edit static content in Content Mode and CMS content in the respective headless CMS.
• Hosting: Webflow hosts exclusively on its own platform. We host Webstudio websites from CHF 120 per year, or you can host them yourself.
• Export: Webflow lets you export code and CMS content, but forms, search and localization no longer work afterwards. Webstudio is open source and can be fully exported and run on your own.
• Multilingual sites: Webflow offers Localization as an add-on, or alternatively Weglot. In Webstudio, multilingual content usually comes from the headless CMS.
• Maturity and ecosystem: Webflow is established, with a large community, a marketplace and many integrations. Webstudio is younger but evolving very quickly.
• AI and MCP: Both platforms offer an MCP server. More on that in the next section.

Partly compatible: switching gets easier

Webstudio has a feature that is especially interesting for Webflow projects: you can copy elements in Webflow and paste them directly into Webstudio. Structure, classes and styles are carried over, and the classes become tokens. It does not work entirely without rework, because not every Webflow feature has an equivalent in Webstudio, such as interactions or certain components. For layouts and sections, however, this compatibility saves a lot of time.

For you as a client, that is a real advantage: choosing a system is not a decision for life. If your requirements change, switching is considerably easier than with many other systems.

MCP: AI as a copilot lowers development costs

Both Webflow and Webstudio provide an MCP server. MCP stands for Model Context Protocol, an open standard that lets AI assistants such as Claude, ChatGPT or Cursor work directly with an application.

In practice, this means the AI can create pages, insert elements, set styles and tokens, translate copy, maintain CMS entries, check SEO settings, set up redirects and track down problems. With Webstudio, this runs through the command line and a project link; with Webflow, through the official MCP server, supplemented for some features by the Designer app.

What matters to me: AI does not replace craftsmanship. Concept, design, structure and quality control stay with me. But repetitive work such as creating dozens of CMS entries, translating an entire website, checking meta data or setting up redirects gets done by the AI in a fraction of the time. I pass that efficiency on. For you, that means lower development costs at the same quality.

Where Webstudio (still) has limits

An honest assessment belongs here too:

• A younger system: Webstudio is evolving quickly, and some features are new or still changing. The AI features inside the builder itself, for example, are still in alpha.
• A smaller ecosystem: There are fewer templates, extensions and specialists than for Webflow.
• CMS projects are more complex: Separating builder and CMS brings flexibility, but also more effort in planning and setup.
• Two interfaces for editors: On CMS websites, the team works in the headless CMS rather than directly on the page. If you want the simplest possible content editing in one place, Webflow will serve you better.

Webflow or Webstudio? A decision guide

Webstudio is a good fit if …

• you want a fast, static company website with low running costs,
• your content already lives in a headless CMS or comes from several sources,
• you want full control over code and hosting and no lock-in,
• data protection and hosting in Europe matter to you,
• you want to serve several channels such as website, app and newsletter from one CMS.

Webflow is a good fit if …

• your team should be able to edit content as easily as possible, directly on the website,
• you prefer an integrated CMS without additional systems,
• elaborate interactions and animations are needed,
• you want to rely on an established ecosystem with many integrations.

In many cases, the answer is clear after a short conversation. And if it is not, we look at the requirements together in detail.

Frequently asked questions

Is Webstudio a copy of Webflow?

No. The interface feels similar because both work visually with HTML and CSS. But Webstudio takes a different approach: open source, full CSS support, no built-in CMS and no hosting lock-in.

Can I move my Webflow website to Webstudio?

Partly. Layouts and sections can be transferred by copy and paste. Interactions, CMS content and some components have to be rebuilt or moved into a headless CMS. A move is a project, but one that is easy to plan.

Can I edit my content myself with Webstudio?

Yes. You edit static content directly on the page in Content Mode. CMS content such as blog posts is maintained in the headless CMS, for example in Hygraph or Sanity Studio.

How much does hosting a Webstudio website cost?

With KOMUNIQUE, you can host your Webstudio website from CHF 120 per year. If a headless CMS is used, a paid CMS plan may add further costs depending on the scope.

Is Webstudio suitable for SEO?

Yes. Clean code, fast load times, custom meta data, redirects, canonical and hreflang tags, dynamic sitemaps and optimized images are all possible. CMS pages are rendered on the server as well, so they are fully readable for search engines and AI systems.

Conclusion

For me, Webflow and Webstudio are not competitors but two strong tools with different strengths. Webflow convinces with its integrated CMS, simple content editing and a mature ecosystem. Webstudio scores with openness, full CSS control, a free choice of CMS and very affordable hosting from CHF 120 per year.

Because both systems are partly compatible and both offer an MCP server, I can work efficiently in either and use AI as a copilot. Which system we use, we decide together based on your requirements.

Planning a new website and not sure which system fits? Write to me. I will look at your project and recommend the solution that fits your content, your team and your budget.