Design tokens app update: preview styleguide for all your tokens or select to filter any group.

Design Token app is coming together. All tokens now have somewhat usable value editors, and the prototype is nearly complete. Watch a quick tour.

Sneak peak of my design tokens app

Looking for a remote full-time or contract job. Let me know if you have a frontend or fullstack role in startup or a small company. Can do web apps, build tools, visual editors.

2025 is the year we finally render the current date correctly. Apparently, it’s been an unsolved problem since 1988, when ISO 8601 was first published. 🔁 Auto-updating 🗄️ Server-rendered — no flash of wrong/empty dates 🕒 Semantic HTML using <time> youtu.be/EznQsyS5M5A

Have you ever struggled to create a filter form for directories without a submit button — where every checkbox or input instantly updates the results? We’ve updated the @baserow example in the marketplace to include a form with auto-submission.

1. In your copyright text, include a placeholder for the year. Anything will do. 2. Wrap the year placeholder in a span. 3. Give the span an ID (e.g., 𝚢𝚎𝚊𝚛) so we can target it with a script... 👉 2/3

Simpler yet, use the getElementById() method in the script to target the placeholder.

Real world examples of string and array operators in @webstudio.is youtu.be/E-t8fdah1JM

New in the Expression Editor docs.webstudio.is/university/f...: You can now use safe JavaScript Array and String methods! Search, manipulate, and compare data from your variables or APIs — all directly inside your expressions.

Fetching data in Webstudio just got 3× better, thanks to all the feedback from the community. 🙏 1. You can create bindings for each search parameter This means you can pass data from other variables as search parameters — including JSON values. 2. You can define Cache Max Age This means your

2. You can define Cache Max Age This means your API response will be cached at the edge, making your site faster, reducing API workload, and potentially lowering costs.

A discussion on the future roadmap of Webstudio is happening on Reddit. Please add your comments or simply upvote things you want to see happen! www.reddit.com/r/webstudio/...

Announcing “Where is this image used?” 🙃 Ever wanted to delete or update an image but had to visit every page to find where it’s used? Now you can see a complete list of everywhere each asset appears.

Announcing image descriptions! If you: 1. Add an asset 2. Describe what’s in the image then every image that uses the asset will automatically include an alt attribute, so people using screen readers get the context. A huge win for accessibility!

Announcing "asset renaming"! It’s like MacOS Finder - just for renaming images. Don’t like a name? Change the name!

Announcing "Black Dot" ⚫ It’s like a black hole - but for cleaning up unused assets. See a dot on an image? That image is unused. 1. Click it 2. Delete the image 3. Enjoy

Great news! You can now self-host sites featuring scroll-driven animations powered by the Webstudio Animation Engine. webstudio.is/scroll-drive...

Announcing native SVG support in Webstudio: now every SVG element can be edited visually. 🚀

sneak peek — a Chrome extension is in the works to make styling in @webstudio.is easy

working on a small, free utility for @webstudio.is — this could potentially boost productivity

I've added several layouts to the Onx Library collection for @webstudio.is You can now also preview layouts ... 240+ layouts and counting

Introducing “Element” - this smart new component improves the UX while giving you the ability to use any HTML tag and attribute. - Tag auto-detection - Tag-aware attributes and states - Paste any HTML from anywhere - Quick access via commands webstudio.is/blog/the-new...

We're incredibly proud to receive such a huge shout-out from the #GoogleIO stage for our work on scroll-driven animations! @una.im ❤️🙏 youtube.com/watch?v=XASR...

See some of these animations in action here: webstudio.is/scroll-drive... Watch the 101 playlist that guides you through scroll-driven animations: wstd.us/animations

@penpot.app now supports design tokens, also exporting of them. youtu.be/zxZ-ZsDHA88 Would be awesome to have a design tokens json import in @webstudio.is

Horizontal scrolling images with parallax built using the unreleased animations engine

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! Demos below 😉

No hosting lock-in 🔓 with this setup: Webstudio, Hetzner, Coolify 🔥 Webstudio 👉 Full site export Hetzner 👉 Cost-effective servers Coolify 👉 Deployment management Watch the tutorial 👇

Look! No more var() This frees up a lot of space. When you click the input, var() will appear.