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. Native scroll-driven animations
  • 2. Global data variables
  • 3. Docker support for sites
  • 4. YouTube component
  • 5. Head Slot component
  • 6. Dashboard redesign
  • 7. Advanced and focused mode in style panel
  • 8. Context menus
  • 9. All Pro features accessible from a free plan for testing

Was this helpful?

Edit on GitHub
  1. NEWS

April Update

Things we made happen since January 2025

PreviousFAQsNextDecember Update

Last updated 17 days ago

Was this helpful?

1. Native scroll-driven animations

Webstudio leverages the new Scroll Timeline API, allowing browsers to synchronize scrolling with content at native performance levels. For browsers that don't support this feature, we use a polyfill which provides standard performance. However, the native implementation can achieve up to 120 FPS.

It's super important that scroll-driven animations run smoothly and don’t get interrupted because "JavaScript is busy" doing who knows what.\

2. Global data variables

Want to reuse an email 📧, phone number, or CMS connection data throughout your site?

Now you can with Global Data Variables!

🌎 Define reusable data globally 📦 Access the variables anywhere… including inside Slots! 👌 Maintain consistency 🫰 Easier CMS setup!

When integrating a CMS, different pages need access to the same variables, such as the API key. Now with Global Data Variables, they only need to be defined once, significantly improving the setup time and maintenance of a CMS.

Want to define a data variable outside of a Slot and use it within? Now you can! Useful for defining emails, resources, languages, and more outside of the slot but using them in footers, navs, and more.

3. Docker support for sites

Export your dynamic site, and deploy it just about anywhere. Get total control over your hosting, cost, and compliance.

4. YouTube component

5. Head Slot component

The Head Slot component allows the creation of various head tags and can dynamically generate them based on remote data.

6. Dashboard redesign

The new dashboard includes search functionality, separates projects and starter templates, and is the first step towards workspaces.

7. Advanced and focused mode in style panel

We added a focus mode that allows you to see only one section at a time, as well as an advanced mode that makes the advanced section a full-height experience with search and autocompletion. Much of the UX is inspired by chrome dev tools, enabling advanced users to change styles quickly without moving the mouse.

8. Context menus

We started adding more and more context menus, staring with advanced section in style panel and animations

9. All Pro features accessible from a free plan for testing

We have made all Pro features available on a free plan so that everyone can test these features without paying. Additionally, we added checks on publishing and exporting if Pro features are used.


Learn how to deploy the site to AWS via

Learn how to deploy the site to Hetzner via

And more, see and older for a detailed changelog.

🆕
Flightcontrol
Coolify
Release 0.218.0
Clonable examples
Landing page with demos
Full animations playlist
Cover

Copy-paste animations

Cover

Copy-paste CSS declarations