LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • 1. Content Mode
  • 2. Content Block component - better than Rich Text
  • 3. Search & Commands
  • 4. CSS Variables
  • 5. Craft - the standard for building with Webstudio.
  • 6. Modern Font Stacks
  • 7. Publish to staging
  • 8. AI Support Hub
  • 9. Public Templates Marketplace
  • And more

Was this helpful?

Edit on GitHub
  1. NEWS

December Update

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

PreviousApril UpdateNextSeptember Update

Last updated 12 days ago

Was this helpful?

1. 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

3. Search & Commands

4. 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. 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.

  5. 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.

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?

7. Publish to staging

  • Test it on different devices

  • Share it with your team

  • Get approval from your client

8. AI Support Hub

9. Public Templates Marketplace

We have also added plenty of new beautiful templates.

And more

  • Floating Panels V2

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

  • Preview variable values in autocomplete

  • 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

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.

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

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.

Create complex . 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!

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.

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

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

We partnered with 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 and .

It uses AI to deliver the specific answers you need when you 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.

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

Edit complex CSS values in a larger editor, automatically scroll CSS value inputs when the value is too long. .

Redesigned controls and icons. .

Support multiple emails for webhook form submission. .

Support pasting CSS in advanced section. .

See and older for a detailed changelog.

🆕
Content Block
Search & Commands
CSS variables
Craft
Modern Font Stacks
Hall
documentation site
blog
search here
on the website
Baserow
See the post on X
See the post on X
See the post on X
See the post on X
Release 0.218.0
micro-interactions
Publish to the default subdomain
Content Mode