The Radix Select Item elements (Select > Select Content > Select Viewport > Select Item) have default hover and focus styling in the browser. They get a very light grey background colour when you hover over them or change focus to them with the keyboard. However, I can't see any way to change this style in the Webstudio style panel. See screenshot below - the dropdown menu on the "Local" tag doesn't display any additional states you can style.

I'd like to be able to style the different states of these elements, the same way you can with buttons or links.

I didn't realise there was a limit of 200 assets per project until I hit the limit.

If I was working on a client project and had a legitimate need for over 200 assets, I would've been in a real pickle. I probably would've already spent days building the site in Webstudio at this point, only to find out I would have to start again on a different platform.

I would suggest showing the user how close they are to this limit, and any other per-project limits, in the Project Settings panel, so they don't get caught off-guard.

https://www.w3.org/WAI/tutorials/images/decorative/

According to the W3C, if an image on the page is decorative and doesn't add information to the content of the page, it should have an empty alt property. i.e.:
<img alt="">

This isn't possible in the Webstudio properties panel at the moment. If you leave the "alt" property blank, it doesn't get rendered in the HTML.

Putting a space in the "alt" property doesn't seem to be a suitable workaround, as the WAVE accessibility audit tool flags it as "suspicious alt text" and likely to be insufficient.

In Webflow, they have a setting for images to say whether they are decorative or not. If set to decorative, the image element has alt="" added to it. If the image is not set to decorative and has alt text, alt="[alt text here]" gets added to the element. If not decorative and no alt text is specified, no alt attribute is added to the element.

I'd be keen to see something similar implemented in Webstudio.

It would be nice if the breakpoints could be set in rem units. This would make it easier for the site to adapt to users who modified their default browser font size.

E.g. When the browser base font size is 16px and I'm on a 13" laptop, a 3-column layout of text elements might look great. But when my browser base font size is scaled to 48px, on the same screen, a 3-column layout would be very difficult to read, with only 1 or 2 words per line. Switching to the tablet (or mobile) breakpoint in this case (thanks to setting the breakpoints in rem units) and showing a 2- or 1-column layout would be more appropriate.

This would make it easier for us developers to accommodate users with poor vision who use a large base font size in their browser.

Thanks!

I'd love to have an accessible slider component I could use in my Webstudio projects.

At the moment, I'm using Splide JS as it's the most accessible slider I could find, lightweight, and has lots of customisation options (e.g. can display multiple slides at once; can change the slider settings at different breakpoints; can customise the appearance of the next / prev buttons and pagination dots).

It would save me a lot of time if something similar was baked into Webstudio. This is because using Splide involves setting several Class Names on elements, and involves writing custom code to override Splide's built-in styles using more specific selectors.

Thanks!

Morning! Is there any way to password protect certain pages in Webstudio?

I'd love to build my new UX portfolio in Webstudio but I need to be able to restrict access to sensitive case studies. It's the only thing stopping me from moving from Webflow