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 ComponentWebstudio 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 deployThe 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+ 以上。
来源与致谢
- GitHub: webstudio-is/webstudio — 8.4K+ ⭐ | AGPL-3.0
- 官网: webstudio.is