Webstudio — Open Source Visual Website Builder

What it is

Webstudio is an open-source visual website builder designed as a Webflow alternative. It provides a drag-and-drop editor with full CSS support, headless CMS integration, and the ability to self-host on Cloudflare Workers.

Webstudio targets designers and developers who want visual editing without giving up code-level control. Unlike proprietary builders, you own the output and can deploy it anywhere.

How it saves time or tokens

Webstudio eliminates the back-and-forth between design tools and code editors. Designers can build responsive layouts visually while the tool generates clean, semantic HTML and CSS. Developers can then extend the output with custom components or integrate headless CMS content.

The self-hosting option on Cloudflare Workers means near-zero hosting costs and edge-delivered performance without managing servers.

Additionally, the project's well-structured documentation and active community mean developers spend less time troubleshooting integration issues. When AI coding assistants generate code for this tool, they can reference established patterns from the documentation, producing correct implementations with fewer iterations and lower token costs.

How to use

1. Visit the Webstudio cloud editor or self-host the builder:

git clone https://github.com/webstudio-is/webstudio.git
cd webstudio
pnpm install
pnpm dev

1. Create a project in the visual editor. Drag components onto the canvas, style them with the CSS properties panel, and set responsive breakpoints.

1. Connect a headless CMS (Contentful, Sanity, or any REST/GraphQL API) to populate dynamic content.

1. Publish to Cloudflare Workers or export the project as static HTML.

Example

<!-- Webstudio generates clean semantic HTML -->
<section class="hero">
  <h1 class="hero-title">Build Visually, Own Everything</h1>
  <p class="hero-desc">No vendor lock-in. Full CSS control.</p>
  <a href="/get-started" class="cta-button">Get Started</a>
</section>

The visual editor produces markup like this, which you can inspect, modify, and version-control.

Related on TokRepo

• AI Tools for Design — AI-powered design tools for web projects
• AI Tools for No-Code — No-code and low-code builder alternatives

Common pitfalls

• Expecting Webstudio to replace a full web framework. Webstudio excels at marketing sites and landing pages but is not a substitute for React or Next.js application development.
• Ignoring the learning curve of the CSS properties panel. Webstudio exposes raw CSS properties rather than simplified controls, which gives power but requires CSS knowledge.
• Skipping the responsive breakpoint setup. Design for mobile first, then add tablet and desktop breakpoints. Fixing responsive issues after the fact is much harder.
• Failing to review community discussions and changelogs before upgrading. Breaking changes in major versions can disrupt existing workflows. Pin versions in production and test upgrades in staging first.