## 1. Content Mode [Content Mode](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/foundations/modes.md#content) 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. Content mode tutorial | Set up for clients/team members - YouTube [Content mode tutorial | Set up for clients/team members](https://www.youtube.com/watch?v=hzRy45vIViY) Here is what the editing experience looks like: How to edit your Webstudio Project in Content mode - YouTube [How to edit your Webstudio Project in Content mode](https://www.youtube.com/watch?v=0GoOe5D-hQk) ## 2. Content Block component - better than Rich Text [Content Block](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/core-components/content-block.md) 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. 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. You asked for rich text, here’s something better: **Content Block**. Author long-form content with the **Slash command**. Add **custom templates** to Content Block. Get a **Notion-like authoring experience**. Get more **power than typical editors**. ## 3. Search & Commands The [Search & Commands](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/foundations/commands-and-search.md) is a centralized place to navigate the builder and perform actions such as switching pages and adding components — all with the keyboard. [Commands & Search are here. Plus new shortcuts.](https://www.youtube.com/watch?v=ofUP0Uc_ttY) ## 4. CSS Variables [CSS variables](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/foundations/css-variables.md) 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**](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/foundations/css-variables.md#parent-child-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. 5. **Design and build simultaneously.** Experimenting on the canvas just got a whole lot better. 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](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/craft.md) 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 ## 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](https://github.com/system-fonts/modern-font-stacks). No downloads, no layout shifts, no flashes — just instant renders. ## 7. Publish to staging [Publish to the default subdomain](https://github.com/webstudio-is/webstudio-community/blob/main/docs/university/foundations/publishing-and-custom-domains.md#publish-to-staging) 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 We just added publishing to staging! ## 8. AI Support Hub We partnered with [Hall](https://usehall.com/) 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](https://docs.webstudio.is/) and [blog](/content/blog/index.html). ## 9. Public Templates Marketplace Templates are now available [on the website](/content/marketplace/templates/index.html) and from within the builder. You can filter them by categories. This marketplace is built using Webstudio and [Baserow](https://baserow.io/) as a backend. ## And more - Edit complex CSS values in a larger editor, automatically scroll CSS value inputs when the value is too long. - Redesigned controls and icons. - Floating Panels V2 - Create XML-time component to convert time to ISO string in XML documents - Support multiple emails for webhook form submission. - Preview variable values in autocomplete - Support pasting CSS in advanced section. - 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 ### Last 30 days 206M Requests 5.98 TB Data served 8 Issues closed 62 Merged PRs ## Built to scale ### Total 222.8K Projects 8.5K GitHub stars 5.5K Discord members 130.4K Users