About Webstudio
Overview
Webstudio is an open source website builder that gives designers, developers, and founders a visual editor with access to all CSS properties and HTML attributes. You can publish to Webstudio Cloud or export your project and self-host it.
Webstudio acts as the frontend and connects to external content sources such as a CMS, CRM, database, or any API. Agents can automate builds through the Webstudio CLI and MCP, while you review and adjust every detail in the Visual Editor.
Key Benefits
- Style every property, unit, and breakpoint visually, with full access to all CSS properties and values.
- Load pages quickly on Webstudio Cloud, which runs on Cloudflare and serves converted WebP/AVIF responsive images.
- Self-host anywhere and keep control over hosting, pricing, security, and compliance.
- Pull content from any API, CMS, CRM, or database to create blogs, directories, and structured content.
- Run scroll-driven animations off the main thread with the browser-native Scroll Timeline API.
- Follow a public roadmap and public code with an active Discord community.
How It Works
You design in the Visual Editor, using Tokens, local styles, CSS variables, and Radix components, or you let an AI agent build through MCP. You then publish to Webstudio Cloud with staging and custom domains, or export the project as a static or dynamic site and host it yourself.
Use Cases
- Marketing teams build fast landing pages and optimize them for search with attainable Lighthouse scores.
- Developers build directory sites that fetch structured data from external APIs.
- Designers recreate Webflow work by pasting it into Webstudio and refining the styles.
- Agencies hand clients a Content Mode editor for updating copy without touching the design.
- Startup founders self-host exported sites to control hosting costs and compliance.
Why Choose This Product
Webstudio focuses on the frontend and lets you pair it with the backend services you already use. Its open source code lets you export and self-host without paying Webstudio, though several CMS and data features run on staging only in the Free plan.
Webstudio Pros & Cons
- Open source with self-hosting option
- Free plan with unlimited projects and pages
- Access to all CSS properties and HTML attributes
- MCP support for AI agent workflows
- Cloudflare-backed hosting with image optimization
- Free plan limits CMS and data features to staging only
- Free plan allows 10 publishes per day and 250 MB asset storage
- No built-in multi-step form component
Key Features
All CSS Properties
Exposes all CSS properties and HTML attributes, not just commonly used ones, in a visual Style Panel.
Reusable Style Tokens
Attach styles to Tokens you can add, delete, and reorder without specificity issues, or start with optional Local Styles.
MCP and AI Agents
Install the Webstudio CLI and use MCP so agents can automate builds that you review in the Visual Editor.
Scroll-Driven Animations
Create browser-native scroll animations with the Scroll Timeline API using one-click presets or detailed compositions.
External CMS Integration
Fetch data from any API, CMS, CRM, or database using Resources to build blogs and directories.
Webstudio Cloud Hosting
Hosts sites on Cloudflare with DDoS protection, SSL, and global CDN delivery.
Export and Self-Host
Exports projects as static sites or dynamic apps so you can deploy anywhere.
Image Optimization
Converts uploaded images to compressed, responsive WebP/AVIF formats with lazy and eager loading options.
Paste from Webflow
Translates content pasted from Webflow into Webstudio components and styles.
Webhook Forms
Builds styled forms that send submissions to third parties via webhooks and show success or error messages.
Webstudio Pricing
View full pricing →- Wstd.io subdomain
- Unlimited projects
- Unlimited pages
- Share projects
- Export projects
- Unlimited sites with custom domains
- 100,000 page views per month with overages
- MCP
- Content Mode for clients
- Staging and production publishing
- Backups and advanced sharing
- Everything on Pro
- Workspaces
- Member roles
- 5 seats included
| Feature | Free Free | Pro $15/mo | Team $35/mo |
|---|---|---|---|
| Wstd.io subdomain | |||
| Unlimited projects | |||
| Unlimited pages | |||
| Share projects | |||
| Export projects | |||
| Unlimited sites with custom domains | |||
| 100,000 page views per month with overages | |||
| MCP | |||
| Content Mode for clients | |||
| Staging and production publishing | |||
| Backups and advanced sharing | |||
| Everything on Pro | |||
| Workspaces | |||
| Member roles | |||
| 5 seats included |
Pricing extracted from the product website and may change. Check the source for current details.
Frequently asked questions about Webstudio
Is hosting included in the free Cloud plan?
The Free plan includes a wstd.io subdomain, unlimited projects, unlimited pages, project sharing, and project export. Custom domains require the Pro plan.
Do I pay per site on Webstudio?
No. Pricing is per account, and Pro includes unlimited sites with custom domains.
Are page view limits applied per domain or per account?
Page view limits apply per account, not per domain. All pricing in Webstudio is per account.
What happens if I exceed the Pro page view limit?
Pro includes 100,000 monthly page views. You can buy more at $20 per 100,000 views, with a capped overage for unexpected spikes.
Can I add Spline 3D animations to Webstudio?
Yes. You can add Spline or any other 3D animation using an HTML Embed inside a positioned container.
Can I build multi-step forms in Webstudio?
You can, but it needs manual setup. You can use button navigation between steps or embed external widgets like Typeform. The team plans a component editor to support reusable multi-step forms.