Builder
Reusable styles without classes
Build a large website without the pain of class management. Attach styles to Tokens, which you add, delete, and reorder without specificity issues.
Naming styles is optional
Local Styles lets you design without creating Tokens or naming anything. Easily convert the Local Style into a reusable Token.
CSS variables
CSS variables allow you to define individual style values, like colors and sizes, and use them throughout your site. Create a global design system and access the variables in the Style Panel or create local variables for micro-interactions and more.
Expression Editor
Create logical expressions directly in the UI, enabling conditional display, fallback values, concatenation, and more.
All CSS properties & HTML attributes
We’re building Webstudio to closely align with what’s possible in code. This includes exposing all CSS properties and HTML attributes, not just the frequently used ones.
Reuse sections
Wrap your footer, nav, or anything else you want to reuse with a Slot component. Changes you make to one instance of a Slot reflect across all other instances of that Slot.
Custom breakpoints
Define custom breakpoints for responsive design, enabling precise control over the layout and appearance of websites across different devices.
Custom fonts
Upload custom fonts, including variable fonts, without the need for third-party services. This ensures better performance and privacy.
Webhook forms
Build and style forms that send the submission data to a third party using Webhooks and display a success or error message. The recipient of the notification emails defaults to the project owner and can be customized.
Radix components
Design unique and accessible user interfaces with dropdowns, dialogs, forms, navigation menus, tooltips, and more. Simply drag, drop, and style the Radix component on your canvas, without writing any code.
CSS calculations
Utilize calc() to perform calculations with units, such as calc(100% - 20px). Style values also support converting between units, such as 100px to rems (100/16rem).
Markdown conversion
Paste Markdown into Webstudio, and it automatically translates it to Webstudio components so you can go from editing content to a complete website faster.
Collaborate with links
Want to share your project? Generate a unique link with custom permissions to share it.
AI (alpha)
Build using your voice or text input, and AI will translate prompts to Webstudio components and styles.
Paste from Webflow
Paste work from Webflow and Webstudio will translate it into components and styles.
Paste CSS
Paste CSS into Webstudio, and it'll be translated to the various fields in the Style Panel.
Static site and dynamic app exports
Export your Webstudio Project as a static site with clean HTML and CSS or a dynamic JavaScript application.
Publish to Staging
You can publish your Project to a separate domain for testing before going live by only checking your staging domain, which can be the default Project subdomain or a custom domain.
SEO
Prevent indexing
Prevent search engines from indexing your page(s) with one click.
Sitemap
Auto-generated sitemap for static pages and opt-in dynamic sitemap based on CMS data. Pages that are excluded from search engine indexing are excluded from the sitemap. No more Google Search Console errors!
Full control over all attributes
Add all the attributes you need for optimal SEO, including meta title, description, Open Graph, rel, and custom metadata.
Redirect manager
Manage 301 (permanent) and 302 (temporary) redirects to maintain SEO integrity and direct traffic on your website.
Semantic tags
Change the default to something semantic such as nav or footer.
SSL
SSL is automatically managed for you and won't be interrupted if you use the Cloudflare Proxy.
Site name schema and favicon
Fill out the site name field and favicon for improved branding and visibility in search engine results.
Server-side rendering (SSR)
Delivers fully rendered pages to the client (good for SEO) while supporting dynamic functionality such as filters and searches.
Accessibility
Accessible interactive components
Tabs, accordions, mobile menus, and more are all accessible out of the box. Under the hood, we use the open-source Radix library.
Aria anywhere
Webstudio supports adding all HTML attributes, which enables Aria to be added to any component.
Semantic tags
Change the default to something semantic such as nav or footer.
CMS & external data
Dynamic routing
Define dynamic parameters within a page path, like /blog/:slug. When someone goes to /blog/hello-world, your query can dynamically fetch the blog post with the slug hello-world.
Collections
Iterate over data with unlimited nested collections.
SEO
Bind your CMS data to meta fields, in the middle of your schema, or anywhere else.
Forms
Build and style forms that dynamically update page values by requesting external resources, which is ideal for implementing searches and filters for a list of data.
Content Embed
Style each rich text element JUST like you style any other instance on the canvas – using the style panel, including Tokens or Local styles.
Bind CMS data anywhere
Bind incoming data to any data field, such as images (URL, width, height, alt), attributes (rel, open in new tab/target, ID, etc.), and more. The data can also be bound in the middle of your content, enabling templated content such as “Published at {publishedAt}”.
GraphQL Resources
A GraphQL Resource is for fetching data from a GraphQL API. It allows you to define the query, variables, and headers. Other requests, such as REST, can be fetched using a Resource.
Resources
Configure requests to your headless CMS using a Resource. A Resource allows you to define the request URL, method, headers, and body.
Dynamic sitemap
Create a sitemap containing static URLs from Webstudio and dynamic URLs from a CMS.
Server-side rendering (SSR)
Delivers fully rendered pages to the client (good for SEO) while supporting dynamic functionality such as filters and searches.
Dynamic at the speed of static
Click Publish, and your creation is deployed to Cloudflare Workers, enabling ludicrous-fast sites distributed across 320+ locations.
Cloudflare Proxy on
We love Cloudflare! Webstudio isn’t just compatible with Cloudflare, it’s deployed to it. You can even enable the Cloudflare Proxy.
Lazy and eager image loading
Enhance performance and Largest Contentful Paint (LCP) by implementing lazy and eager loading for images.
Perfect Lighthouse scores
Light up the fireworks as perfect Lighthouse scores are highly attainable on desktop and near-perfect on mobile.
Perfect image optimization
Images are automatically converted to WebP and compressed for maximum site speed.
Responsive images
Images are automatically output using optimized dimensions based on the screen they are rendering on.
Server-side rendering (SSR)
Delivers fully rendered pages to the client (good for SEO) while supporting dynamic functionality such as filters and searches.
Self-host
Static export (1 click)
One-click exporting downloads a zip file that is ready to be dragged and dropped to any hosting provider or committed to your repository.
Static export (CLI)
Run one command to download your Project as a static site ready for deployment or version control.
Dynamic export (CLI)
Download and build a dynamic JavaScript application with the Webstudio CLI, which is ready for deployment to Vercel, Netlify, and more.
Localization
Page lang
Set the language attribute for individual pages, either statically or dynamically.
Lang in path parameter
Use a dynamic parameter in the path for the language code, enabling dynamic routes and requests. For example, if /en/blog is in the URL, a Resource can request CMS content with the en language code.
Dates and times
Use the Time component to set language, country, date format, and time format. Values can be bound from external data, making it dynamic.
Sitemap
Generate a sitemap with localized URLs, including dynamic URLs from a CMS.
Conditional sections
Show or hide sections of your website based on the user's language.
Platform
Privacy focused
We aim to be fully GDPR compliant. We do not track users, our analytics are completely anonymized, and data is hosted within Europe.
Open Source
We’ll never lock you in to our platform. Our Builder is open source and AGPL licensed. You can self-host, contribute to development, and even create your own software on top of our technology.
No hosting lock-in
Use the Webstudio CLI to export your web app and host it where you wish. Our documentation covers Vercel and Netlify.