ConfigsApr 10, 2026·1 min read

Webstudio — Open Source Visual Website Builder

Webstudio is an open-source Webflow alternative with a visual drag-and-drop editor, full CSS support, headless CMS integration, and self-hosting on Cloudflare.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

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

Open http://localhost:3000 — start building your website visually with the drag-and-drop editor.

Intro

Webstudio is an open-source visual website builder and Webflow alternative. It provides a professional-grade design tool that supports all CSS properties, connects to any headless CMS, and outputs clean, performant code that can be hosted anywhere — including Cloudflare Workers for edge deployment.

With 8.4K+ GitHub stars and AGPL-3.0 license, Webstudio bridges the gap between design freedom and developer control, allowing designers to create production-ready websites without sacrificing code quality.

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

Feature Webstudio Webflow Framer WordPress
Open Source Yes (AGPL-3.0) No No Yes (GPL)
Full CSS All properties Limited Limited Theme-dependent
Self-hosted Yes No No Yes
CMS Any headless CMS Built-in Built-in Built-in
Export code Clean Remix app Limited No PHP themes
Edge hosting Cloudflare Workers Fastly CDN Vercel Traditional

常见问题

Q: Webstudio 适合做电商网站吗？ A: 适合做电商的前端展示页面。你可以通过 CMS 绑定连接 Shopify 或 Saleor 等无头电商后端，但 Webstudio 本身不提供购物车和支付功能。

Q: 可以团队协作吗？ A: Cloud 版本支持团队协作和项目共享。自托管版本可以通过配置多用户来实现。

Q: 导出的代码质量如何？ A: 导出的是标准 Remix 应用，使用原子化 CSS，代码干净可维护。Lighthouse 分数通常在 90+ 以上。

来源与致谢

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Duplicati — Free Encrypted Backup to Any Cloud Storage

Duplicati is an open-source backup client that stores encrypted, incremental backups to S3, Google Drive, OneDrive, Backblaze B2, SFTP, and 20+ storage backends.

AI Open Source

Wiki.js — Modern Open Source Wiki Platform

Wiki.js is a powerful open-source wiki built on Node.js with Markdown/WYSIWYG editors, Git sync, full-text search, and multi-language support. Beautiful, fast, and extensible.

AI Open Source

NocoDB — Open Source No-Code Database Platform

NocoDB turns any SQL database into a smart spreadsheet with REST APIs. Open-source Airtable alternative with views, automations, and team collaboration.

AI Open Source
◈Home🔍Search👤Me