🎨 The color picker just leveled up.
Webstudio now supports all modern CSS color spaces - HSL, HWB, OKLab, OKLCH and more.
Plus: colors with CSS variable (e.g. rgb(r g b / var(--opacity))) are now fully parsed and preserved.
CSS Grid is here in Webstudio. Pick a preset layout, add rows and columns, define areas, and control every grid child - all visually.
Clone any site in Inception - sneak peek, still a work in progress.
Now you can auto-generate design tokens in Webstudio. Paste any HTML with a <style> tag and your CSS classes are instantly converted into Webstudio Design Tokens.
We upgraded Inception to Claude Sonnet 4.6 and added a fast verification model that checks and fixes the output before it reaches you.
This should significantly reduce the blank or white frames some of you have been seeing.
Give it a try and let us know if you run into any issues! 🚀
Redirects in Webstudio just got a major upgrade 🔀
• Import from any platform (CSV, JSON, htaccess, Netlify)
• Loop detection so you can't break your site
• Wildcard patterns: /old/* → /new/*
• Non-latin characters support
Migrate sites without losing traffic ✨
🛡️ Introducing Safe Mode in Webstudio
Accidentally introduced an infinite loop that froze your project? Safe Mode is your escape hatch.
Open any project with scripts disabled, fix the issue, and get back to work.
Dashboard → Project menu → "Open in safe mode"
🔧 QoL improvement: Copy-pasting from Inception or Tailwind templates? We now skip breakpoints you're not using. Cleaner projects, less clutter.
🔄 New in Webstudio: You can now unpublish your site directly from the publish dialog. Unpublish removes your site from the web and allows you to rename your domain. Works for both your Webstudio domain and custom domains.
🔄 New in Webstudio: Collection component now accepts objects in addition to arrays. Iterate directly over API responses like {key: value} without converting them first. A new "key" variable gives you access to array indexes or object keys while iterating.
🎨 New in Webstudio: Style pseudo elements like ::before and ::after directly in the Style panel. Add decorative content, custom markers, and more without writing CSS.
Its not for password protection of individual sites, its for protection of the staging domains against phishing sites. They can't publish now and spread phishing sites without having to tell each visitor the password, which defeats the purpose of phishing sites.
Nice example of a well-architected site 👇
Good Goods is built with Webstudio on the frontend, Sanity as the CMS, and Cloudflare Workers handling Portable Text at the edge.
Lighthouse performance is very strong.
👉 goodgoods.ooo/
Breakpoints just got a lot more powerful 🚀
You can now define custom conditions like orientation, prefers-color-scheme, prefers-reduced-motion, mouse and pointer detection, and more — all directly in breakpoints.
Learn how to access asset URLs and other metadata via the asset resource, bind the data to properties and attributes, and make it available to JavaScript.
Big update for assets 📂✨
✅ More file types supported (PDF, ZIP, short videos & more)
✅ New filters & sorting in the asset panel
✅ Share files via a simple download link
You can now see how many instances, variables, tokens, and pages are in your project.
Update: you can now search all instances directly from the command panel.
To improve security, we’ve added password protection to staging sites.
This protects against phishing attacks from the Webstudio staging domain.
👉 Find the login details in the Publish dialog.
Announcing new design token merge and management tools.
Working with multiple libraries, pasting tokens from different projects, resolving conflicts, and finding duplicates — all of it just became easy.
Converting and wrapping instances just got much faster ⚡
Meet 3 new commands: Wrap, Unwrap, Convert.
Access them directly from the context menu or the commands panel and work faster with elements —
no retyping properties, attributes, or bindings. Ever.
🛠️ Project settings are now fully accessible from the dashboard — including restore from backup, even if your project won’t open!
Right-click lovers, rejoice 🎉
We’ve added context menus everywhere — Navigator, Pages, and even the Canvas.
Navigator and Assets sidebar feeling too tight?
We've just rolled out a fix - enjoy the extra space! 🚀
Oh, and btw… Cyber Week ends today webstudio.is/cyber-week
We’ve added 3 new options to the animation engine: Duration, Delay, and Iterations.
With these, you can now create infinite animations like marquee and build time-based sequential animations.
You can now find all shortcuts by hitting "shift+?" in the Builder
Tokens and variables management has now become easy with the updated Search & Commands panel 🚀
• Find any variable or token
• See where it’s used, delete all unused
• Rename or delete with one command
• Search + rename CSS variables across style panel and HTML embeds
Dashboard improvements just landed in Webstudio:
• Sorting controls
• New list view
• Date created, modified, and published
• Custom domains shown on cards and in the list
• Clear “Not published” status for unpublished sites
Also final days of Cyber Week sales: webstudio.is/cyber-week
youtu.be/2f0gXI_r5zs
New in Webstudio: Full Gradient Controls!
CSS gradients are incredibly powerful — and now you can craft them visually, directly inside Webstudio Builder.
• Linear gradients
• Radial gradients
• Conic gradients
• Blend modes
• Clip to border & text
• CSS variables inside gradi
How many landing pages did you not launch this year because of design bottlenecks?
Use this Black Friday to remove that bottleneck for 2026.
webstudio.is/black-friday
