🆕December Update

A lot has happened in the last 3 months, let me give you some highlights!

1. Content Mode

Content Mode allows you to share editing access with clients or content editors, protecting your designs from accidental changes while enabling editors to modify only the areas you specify.

Here is what the editing experience looks like:

2. Content Block component - better than Rich Text

Content Block is a component that enables authoring content with a Notion-like editing experience, where everything is accessible via a slash command by typing /. Content Block is more than just a rich text editor—it provides a way to add and remove components available for editing by adding instances to the Templates container within the Content Block. Just like you design other elements, you can design each block yourself and make it available to content editors. For example, you can design a "Card" and add it to the Templates. The content editor can then press the slash key, insert the "Card," and start editing it immediately.

3. Search & Commands

The Search & Commands is a centralized place to navigate the builder and perform actions such as switching pages and adding components — all with the keyboard.

4. CSS Variables

CSS variables enable you to build complex websites in a much more maintainable way. Our UX for CSS variables supports all the features developers know and love about CSS variables.

1. Create a design system. Define global styles like colors, gradients, sizes, and box shadows.

2. Use your variables everywhere. You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more!

3. Start with libraries like Open Props, expertly crafted CSS variables, so you can use a tried and true system, and so we can standardize our Projects.

4. Create complex micro-interactions. CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions!
5. Design and build simultaneously. Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best.

6. Change variable by breakpoint. CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way.

Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

5. Craft - the standard for building with Webstudio.

Craft is a new standard for building with Webstudio. It allows you to eliminate the learning curve when switching between Projects and structure your projects really well and consistently.

It contains:

• CSS vars

• A style guide

• Tokens

• Guidelines

Craft makes building websites fast, flexible, and reusable.

6. Modern Font Stacks

Custom fonts are killing performance, but what can we do about it?

There is a way - it's called Modern Font Stacks. No downloads, no layout shifts, no flashes — just instant renders.

7. Publish to staging

Publish to the default subdomain or any custom domain and see a preview of the site that is 100% identical to production!

• Test it on different devices

• Share it with your team

• Get approval from your client

8. AI Support Hub

We partnered with Hall to provide you with the best way to search all the questions and answers we’ve accumulated over the years on Discord, while also combining this knowledge with the information on our documentation site and blog.

It uses AI to deliver the specific answers you need when you search here and will automatically respond to your questions on Discord. We’ve already had some great success stories where users reached out for help and received the exact answers they needed based on previous responses.

9. Public Templates Marketplace

Templates are now available on the website and from within the builder. You can filter them by categories. This marketplace is built using Webstudio and Baserow as a backend.

We have also added plenty of new beautiful templates.

And more

• Edit complex CSS values in a larger editor, automatically scroll CSS value inputs when the value is too long. See the post on X.
• Redesigned controls and icons. See the post on X.
• Floating Panels V2

• Create XML-time component to convert time to ISO string in XML documents

• Support multiple emails for webhook form submission. See the post on X.
• Preview variable values in autocomplete

• Support pasting CSS in advanced section. See the post on X.
• Global root for CSS properties and CSS variables

• Auto-detect font weight based on selected font family

• Accessible and draggable pages tree

• Open the page settings in one click or key press from the top bar

See Release 0.196.0 and older for a detailed changelog.