explaingit

webstudio-is/webstudio

8,560TypeScriptAudience · designerComplexity · 3/5LicenseSetup · moderate

TLDR

An open-source visual drag-and-drop website builder similar to Webflow where you own your data and infrastructure, with full CSS control, headless CMS support, and deployment to Cloudflare Workers.

Mindmap

mindmap
  root((Webstudio))
    Builder
      Drag and drop
      Full CSS control
      Visual editor
    Deployment
      Cloudflare Workers
      Self-hosting option
      Cloud hosted version
    Content
      Headless CMS support
      Own your data
    Community
      Discord
      Public roadmap
      Contributing guide
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build and deploy a website visually without writing code, then host it on Cloudflare Workers.

USE CASE 2

Self-host the website builder on your own servers to keep full ownership of your data and components.

USE CASE 3

Connect a headless CMS to manage content separately from the visual layout.

USE CASE 4

Run visual regression tests with Lost Pixel to catch unintended UI changes when the builder is updated.

Tech stack

TypeScriptReactCloudflare Workers

Getting it running

Difficulty · moderate Time to first run · 30min

Self-hosting requires additional setup, the optional animation SDK component requires accepting a separate proprietary license.

The core builder is AGPL-3.0, free to use and modify, but distributed versions must be open-sourced. One optional animation package requires a separate proprietary license from Webstudio Inc.

In plain English

Webstudio is an open-source visual website builder aimed at developers, designers, and cross-functional teams who want full control over their site without being locked into a proprietary platform. It is often compared to Webflow, and like Webflow it lets you construct websites through a visual drag-and-drop interface rather than writing all the code by hand. The key difference the project emphasizes is ownership: you own your data, your components, and your infrastructure. You can use the cloud-hosted version at webstudio.is if you want to get started quickly, or you can run the builder on your own servers if self-hosting fits your setup better. The builder connects to any headless content management system, so you can pair it with whichever tool you already use to manage content. It also supports the full set of CSS properties, giving designers fine-grained control over styling, and the resulting site can be deployed to various hosting providers including Cloudflare Workers. The main repository holds the core builder, which is licensed under AGPL-3.0 and free to use. One optional package called sdk-components-animation is proprietary and requires accepting a separate license agreement from Webstudio, Inc. before you can use it. The README itself is short and mostly points to external resources: documentation, a blog, contributing guides for both developers and designers, a community discussion board, a feature wishlist, and a public roadmap. The project uses a visual regression testing tool called Lost Pixel to review changes to the builder interface and catch unintended visual differences when updates are made. Community discussion happens on Discord and GitHub Discussions, and a public issue tracker is open for bug reports.

Copy-paste prompts

Prompt 1
Deploy a Webstudio project to Cloudflare Workers, walk me through the build and publish steps from the CLI.
Prompt 2
Connect my Contentful CMS to Webstudio so editors can update content without touching the visual builder.
Prompt 3
Self-host the Webstudio builder on my VPS, what are the setup steps and environment variables I need?
Prompt 4
Set up Lost Pixel visual regression tests for my Webstudio components so layout breaks are caught in CI.
Open on GitHub → Explain another repo

← webstudio-is on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.