# 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.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
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:

```bash
# 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 |

## 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.

## Source & Thanks

- GitHub: [webstudio-is/webstudio](https://github.com/webstudio-is/webstudio) — 8.4K+ ⭐ | AGPL-3.0
- Website: [webstudio.is](https://webstudio.is)

---
Source: https://tokrepo.com/en/workflows/webstudio-open-source-visual-website-builder-55aaef45
Author: AI Open Source