Webstudio Features

Builder – Design freedom, developer power

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.

Expression Editor

Create logical expressions directly in the UI, enabling conditional display, fallback values, concatenation, and more.

Read doc

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.

Learn more

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.

Learn more

SEO – Load up your site with all the bells and whistles

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.

Accessibility – Webstudio is made for all

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.

Learn more

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 – Connect to any HTTP API

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.

Read doc

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.

Read doc

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}”.

Read doc

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.

Performance – Ludicrous-fast, on the Cloudflare Edge

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.

Dynamic at the speed of static

Click Publish, and your creation is deployed to Cloudflare Workers, enabling ludicrous-fast sites distributed across 270+ locations.

Learn more

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.

Localization – Tailor content for every audience

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 – Private & Open Source

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.

Learn more
Logo
Webstudio
has arrived
Built with Webstudio