Webstudio
Webstudio is an open source website builder that empowers creators to build highly maintainable and fast websites using modern web standards.
What is Webstudio?
Try WebstudioWebstudio is a visual website builder that aims to give you “developer power” without the typical class and component overhead. It supports reusable styling with Tokens (or lightweight Local Styles), flexible responsive design, and AI-assisted creation. You can also connect your site to external data and export or deploy with performance-focused publishing options.
What can I build with Webstudio?
Webstudio helps you design and build websites visually while still working close to what’s possible in code. You can create responsive layouts, reuse sections with Slot components, and handle advanced styling using CSS variables, expression logic, and full access to CSS properties and HTML attributes.
Is Webstudio no-code or will I need to write code?
Webstudio is designed to let you build by dragging, dropping, and styling in the UI, including accessible Radix-based components. At the same time, it exposes CSS/HTML capabilities and offers an Expression Editor, so you can go deeper without needing to leave the builder.
How does Webstudio support reusable styles and design systems?
Webstudio lets you reuse styles by attaching them to Tokens you can add, delete, and reorder without specificity issues. If you prefer, you can start with Local Styles and later convert them into reusable Tokens, and you can also define CSS variables for global or micro-interaction style values.
Can I connect Webstudio sites to my CMS or other external data?
Yes. Webstudio supports Resources to call HTTP APIs (including GraphQL Resources), dynamic routing for paths like /blog/:slug, collections for iterating through nested data, and binding CMS data to fields anywhere on the page.
How does Webstudio handle SEO and indexing?
Webstudio includes controls like one-click “prevent indexing,” an auto-generated sitemap that matches what’s allowed to be indexed, full control over SEO metadata (meta title/description, Open Graph, rel, and custom metadata), and a redirect manager for 301 and 302 redirects. It also supports server-side rendering for dynamic pages where SEO matters.
Can I publish for testing before going live, and export my project?
You can publish to a staging domain first, then check only the staging domain before going live. Webstudio also offers one-click static export (as a zip for any hosting) as well as CLI options for static or dynamic exports suitable for deployments like Vercel and Netlify.