Webstudio

Webstudio is an open source visual development platform for developers, designers, and cross-functional teams who demand full frontend control without the lock-in of proprietary builders. Where tools like Webflow own your data and restrict your stack, Webstudio lets you own your components, data, and infrastructure — deploy to your own servers or use Webstudio Cloud on Cloudflare Workers.

The builder exposes every CSS property with a visual interface, supports reusable design tokens, and lets you bind any element to live data from a headless CMS or external API. Dynamic routing, auto-generated sitemaps, and WebP/AVIF image optimization are built in so the sites you build are genuinely production-ready without post-processing.

Under the hood, Webstudio separates the builder runtime from published sites entirely: published output is clean React and Remix code derived from a typed schema, not an export of builder internals. This means faster sites, predictable SEO behavior, and no editor bloat loading in production. The CLI and SDK let developers extend Webstudio with custom components that integrate natively into the visual interface.

Webstudio is free and open source under AGPL-3.0 for all core functionality. An optional proprietary animation package is available under a separate commercial license, forming a sustainable open-core business model while keeping the essential builder fully open.

What You Get

• Full CSS Property Access - Edit every CSS property, unit, and breakpoint in the visual interface — not a restricted subset — so your designs match specs exactly without fighting class naming systems.
• Design Tokens - Define reusable values for colors, gradients, spacing, and typography that cascade across your site, ensuring visual consistency without maintaining a separate design system file.
• Local Styles - Apply one-off styles to individual elements without creating global class names or polluting shared namespaces — ideal for one-time layout exceptions.
• Dynamic Data Binding - Connect any element to data from a headless CMS, REST API, or database query with a visual expression editor, building blogs, directories, and product listings without writing fetch logic.
• Collection List Component - Visually loop over CMS records and map fields to any element type, enabling fully dynamic list pages authored entirely in the visual interface.
• Dynamic Sitemaps and Routing - Generate SEO-optimized sitemaps and configure dynamic URL patterns visually from CMS content, without editing XML files or route config.
• Cloudflare Workers Publishing - Publish with one click to Webstudio Cloud, deploying to the Cloudflare edge network for global latency, DDoS protection, and image optimization built in.
• Self-Hosting on Any Infrastructure - Run the full Webstudio builder and publish target on your own servers using the provided Docker Compose configuration and PostgreSQL backend.
• Automatic Image Optimization - Images are automatically converted to WebP and AVIF, resized to responsive breakpoints, and served with correct cache headers — no pipeline configuration needed.
• SDK and CLI for Custom Components - Extend the builder with typed React components using the Webstudio SDK, then register them to appear natively in the visual interface alongside built-in elements.

Common Use Cases

• Marketing site with live CMS content - A growth team builds landing pages in the visual editor while connecting sections to Contentful or Sanity entries, enabling content updates without engineering involvement.
• Developer portfolio or agency site with self-hosted control - A freelance developer deploys Webstudio on their own VPS, retaining complete control over data residency, uptime, and no per-seat billing.
• SaaS product directory with dynamic routing - A startup builds a feature comparison directory where each product page pulls from a Supabase table through data binding, with URL slugs and sitemaps generated automatically.
• E-commerce product pages with headless Shopify - An e-commerce team designs responsive product pages that bind to Shopify’s Storefront API for pricing, inventory, and variants, publishing to the edge for fast load times.
• Blog with typed content and SEO metadata - A content team authors posts in their CMS while Webstudio generates individual post templates with canonical links, Open Graph metadata, and dynamic sitemaps from the same data source.
• Design system handoff with embedded component library - A design-engineering team uses Webstudio’s token system and custom SDK components to bridge Figma design tokens with actual production components in the builder.

Under The Hood

Architecture Webstudio follows a monorepo architecture with disciplined separation between the builder application, published site runtime, and shared SDK packages. The builder is a Remix application divided into distinct feature domains — style panel, navigator, pages, assets, marketplace — each isolated enough to change independently. A typed schema layer (pages, instances, styles, props, breakpoints, data-sources, deployments) acts as the central contract: the builder writes to it, the React SDK reads from it to generate published sites, and the CLI operates on it for local development. This schema-driven design means published output has zero runtime coupling to the builder, producing clean, fast React and Remix pages. State is managed through Nanostores with computed observables, giving reactive updates across the builder without full re-renders under complex filtering or selection changes.

Tech Stack The core is TypeScript 5.8 with React 18 canary and Remix powering the builder application, deployable to Vercel or Cloudflare Workers. PostgreSQL serves as the persistence layer, accessed through Prisma ORM with a dedicated migration package and patched dependencies for custom behavior. Certain data access patterns use PostgREST for direct database queries from the edge. The style editing layer is built on a custom CSS engine that computes an atomic stylesheet with full cascade semantics, not a utility-class mapping. CodeMirror provides embedded editors for CSS expressions and JavaScript bindings. Radix UI supplies accessible component primitives, Storybook 8 drives UI development and visual regression testing via Lost Pixel, and Vitest with a custom Playwright E2E harness covers integration and end-to-end scenarios.

Code Quality The project maintains extensive test coverage with over 247 test files, organized to mirror package and feature boundaries. TypeScript typing is thorough throughout: Zod schemas provide runtime validation for plan features, CSS values, and builder configuration, and compile-time guards catch type violations before they reach the runtime. The plans package is a clean example — feature flags are Zod-validated at startup, typed as strict boolean or number fields, and a compile-time assertion enforces the constraint on new additions. Oxlint and Prettier enforce formatting and lint rules across all packages. End-to-end tests use fixture-based database bootstrapping for reproducible scenarios covering authentication flows, publishing pipelines, and plan gating.

What Makes It Unique Webstudio’s most distinctive technical characteristic is that the builder and published site share a schema but no runtime. Publishing does not export builder state — it compiles the schema through the React SDK into clean Remix pages that load independently of the editor. This eliminates the common trade-off between visual development speed and production code quality. The custom CSS engine is another departure: rather than mapping visual choices to utility classes, it maintains a full CSS cascade that evaluates specificity, inheritance, and breakpoints natively, so what developers see in the inspector matches what browsers compute. The open-core model — AGPL for all core builder functionality, a separate commercial EULA for the animation package — makes the monetization boundary explicit and auditable, which is unusual honesty for an open-core product.

Self-Hosting

Webstudio core is licensed under the GNU Affero General Public License version 3 (AGPL-3.0). AGPL is a strong copyleft license with a specific network use provision: if you run a modified version of Webstudio as a network service — for example, hosting your own modified builder for users — you must make the source code of your modifications available to those users. For most self-hosters running the software as-is for their own team, this is a non-issue. For agencies or SaaS companies who intend to modify the builder and offer it as a hosted product, the AGPL requires releasing those modifications. One package, sdk-components-animation, ships under a separate proprietary EULA from Webstudio, Inc. and requires explicit acceptance before use — it is optional and not required for core builder functionality.

Running Webstudio yourself requires a PostgreSQL database, a Node.js 22 runtime, and storage for uploaded assets. The repository ships a Docker Compose file that sets up the database and builder service together, which covers a straightforward single-server deployment. In practice, a production self-hosted installation needs to handle backups, database scaling, and asset storage independently — none of these are managed for you. The builder and the published site runtime also need to be deployed separately if you want published sites on Cloudflare Workers, which adds operational surface. Active development means you will want a strategy for keeping your deployment current with upstream releases, since new schema versions ship frequently.

The hosted Webstudio Cloud tier offloads the entire operational burden: database management, backups, Cloudflare Worker publishing, image optimization CDN, and the animation package are all included. The cloud tier adds features gated behind plan limits — dynamic data, authentication flows, staging environments, and domain management each have plan-level controls. Self-hosters can configure these limits themselves via environment variables since the plan feature system is open source, but they are responsible for enforcement logic. There is no SLA, formal support contract, or enterprise agreement for the self-hosted path; community support is available through Discord and GitHub Discussions.