Webstudio — Open Source Visual Website Builder

What Webstudio Does

Webstudio provides a complete website building experience:

• Visual Design: Drag-and-drop editor with full CSS property support (flexbox, grid, animations, transforms)
• Responsive Design: Breakpoint-based responsive editing with mobile-first or desktop-first workflows
• Component System: Reusable components with slots, props, and nested instances
• CMS Integration: Connect any headless CMS (Contentful, Sanity, Strapi) via REST/GraphQL bindings
• Asset Management: Built-in image optimization, font management, and media library
• Publishing: One-click publish to Cloudflare Workers, or export clean HTML/CSS/JS

Architecture

┌─────────────────┐     ┌──────────────┐     ┌─────────────┐
│  Visual Editor  │────▶│  Webstudio   │────▶│  Published   │
│  (React Canvas) │     │  Server      │     │  Site (Edge) │
└─────────────────┘     │  (Remix)     │     └─────────────┘
                        └──────┬───────┘
                               │
                        ┌──────┴───────┐
                        │  PostgreSQL  │
                        │  (Projects)  │
                        └──────────────┘

Key Features

Full CSS Support

Unlike many website builders that limit CSS options, Webstudio exposes every CSS property through an intuitive UI. This includes:

• CSS Grid with visual track editor
• Flexbox with alignment controls
• CSS animations and transitions
• Custom properties (variables)
• Container queries
• All pseudo-classes and pseudo-elements

Data Bindings

Connect dynamic data from any source to your design:

CMS Collection → Webstudio Binding → Visual Component

Webstudio uses a resource system where you define data sources (REST API, GraphQL, or static JSON) and bind response fields to component props, text content, or visibility conditions.

Export & Self-Host

Webstudio projects can be exported as standalone Remix applications:

# Export from Webstudio CLI
npx webstudio export --project your-project-id

# Deploy to Cloudflare
cd exported-project
npm install
npm run deploy

The exported code is clean, readable, and includes:

• Optimized images with responsive srcsets
• Atomic CSS classes for minimal bundle size
• SEO metadata and Open Graph tags
• Sitemap and robots.txt

Webstudio vs Alternatives

FAQ

Q: Is Webstudio suitable for e-commerce sites? A: It's great for the storefront/display layer. You can connect headless commerce backends like Shopify or Saleor via CMS bindings, but Webstudio itself does not provide cart or payment functionality.

Q: Does it support team collaboration? A: The Cloud version supports team collaboration and project sharing. The self-hosted version can be configured for multiple users.

Q: How good is the exported code? A: Exports are standard Remix apps with atomic CSS — clean and maintainable. Lighthouse scores typically exceed 90.