Webstudio is an open source visual website builder designed for developers, designers, and cross-functional teams who want full control over their frontend without writing code. It solves the limitations of traditional website builders like Webflow by offering complete access to CSS properties, reusable design tokens, dynamic data binding, and true separation of frontend and backend. Unlike proprietary platforms, Webstudio ensures you own your data, components, and infrastructure.
Built with React, Remix, and Radix UI, Webstudio supports deployment anywhere — including self-hosting or on Webstudio Cloud powered by Cloudflare Workers. It integrates with any headless CMS, enables dynamic routing and sitemaps, and optimizes images automatically to WebP/AVIF formats for peak performance and Lighthouse scores.
What You Get
- Full CSS Property Access - Control every CSS property, unit, and breakpoint visually without class naming constraints or hardcoded styles.
- Design Tokens - Create reusable styles for colors, gradients, spacing, and typography to ensure design consistency across your site without CSS classes.
- Local Styles - Apply one-off styles to individual elements without naming or polluting global class namespaces.
- Dynamic Data Binding - Connect visual components to external APIs or headless CMS data to render blogs, directories, and product listings dynamically.
- Collection List Component - Visually display all CMS records and choose which fields to show, enabling content-rich pages without code.
- Dynamic Sitemaps - Generate SEO-optimized sitemaps visually by integrating CMS content and dynamic routes without manual XML editing.
- Cloudflare-Powered Hosting - Publish with one click to Webstudio Cloud, leveraging Cloudflare Workers for edge caching, global speed, and security.
- Self-Hosting Support - Deploy Webstudio anywhere, including on-premises or private servers, with full control over data, pricing, and compliance.
- Optimized Image Rendering - Automatically convert, compress, and serve images in WebP/AVIF formats with responsive breakpoints for fast loading.
- Separation of Concerns - Published sites are isolated from the builder environment, improving stability, performance, and security.
Common Use Cases
- Building marketing websites with CMS content - A marketer uses Webstudio to visually design a landing page that pulls blog posts and testimonials from Contentful or Sanity without writing code.
- Creating product directories for SaaS companies - A founder builds a dynamic product catalog using Webstudio’s Collection List and connects it to their Supabase backend for real-time updates.
- Developing high-performance e-commerce product pages - An e-commerce team designs fast-loading product pages with dynamic pricing and inventory data from Shopify’s headless API.
- Launching a content-heavy blog with dynamic routing - A journalist creates a blog with individual post templates, dynamic URLs, and auto-generated sitemaps for SEO without touching backend code.
Under The Hood
Architecture
- Monorepo structure with clear separation between applications and shared packages, enabling reusable UI components and utilities across domains
- React-based component-driven design following atomic principles, with decoupled elements like Section, Icon, and FormFields composed via props
- Dependency injection implemented through package exports and workspace overrides, allowing controlled substitution of core libraries like @stitches/react and @radix-ui
- Prisma ORM isolates persistence logic from UI state, maintaining clean data flow boundaries
- Custom Vite and Vitest configurations with environment-specific conditions enhance modularity in build and test pipelines
- Storybook used extensively to drive component development and ensure UI isolation from application state
Tech Stack
- React 18.3.0-canary and TypeScript 5.8.2 form the core frontend stack, optimized with Vite 6.3.4 for fast development workflows
- Monorepo managed via pnpm with structured apps/, packages/, and fixtures/ directories to ensure shared tooling and version consistency
- Storybook 8.6.4 integrated with React-Vite for component-driven documentation and UI testing
- Prisma serves as the primary ORM with dedicated migration packages and patched dependencies to support custom behavior
- Vite and Vitest configured with custom resolution conditions to support internal module paths and SSR testing
- Oxlint and Prettier enforce strict type safety and consistent formatting across the codebase
Code Quality
- Extensive test coverage with Vitest, including unit and integration tests for edge cases like zero-width breakpoints and non-Latin routing
- Strong TypeScript typing enforces correctness for CSS values, instances, and style declarations, reducing runtime errors
- Modular code organization mirrors domain boundaries with isolated utilities and corresponding test files
- Consistent naming conventions and clear test suites improve readability and maintainability
- Robust validation layers prevent failures in CSS transformations and asset handling through deterministic logic
- Comprehensive test scaffolding with mocked state stores and DOM environments enables reliable testing of complex UI behaviors
What Makes It Unique
- Native component and template system with dynamic metadata resolution enables true low-code extensibility without hardcoded configurations
- Built-in design system with accessibility-focused components like EnhancedTooltip and Separator ensures UI consistency and reduces debt
- Decoupled state management via Nanostores with computed observables delivers reactive updates without full re-renders, even under complex filtering
- Server-side project loader with origin enforcement and destination validation creates a secure, CLI-integrated pipeline uncommon in low-code builders
- Semantic, theme-aware separator component with decorative modes and orientation support reflects deep design system fidelity beyond superficial styling