Annoying little things about builder ux that need fixing.

I will go first:

When dragging a new component, I want to be able to position it in the navigator, not only on canvas

My Nr. 1: Missing Multiselection on Canvas and in Navigator.

👍 for #6 (finding element with variables)

A “nice to have” would be the ability to use some Radix items with Collection. For example, I create Accordion using Radix component. To add Accordion items, I need to clone Accordion items. With Collection I could iterate over the Accordion items. Right now it doesn’t work properly because the items are rendered but they share the same ws id so clicking one item will toggle all the items. Similar thing happens with Nav Links.

It actually already works. What you missed is binding item "value" to some unique value in the list to distinct items. We might need to record a tutorial for this.

Adding a link inline. You have to back out of it after creating it then re-click into to add the link

Hey Bogdan thanks so much! It works! You're right I need to assign something to the "value" as well.

Repost (as @Oleg Isonen request it) :

1. To be able to add component thanks to shortcuts => Cmd+K to open the search bar, ability to search an element and add it to the canvas (like Webflow, I find it very useful). I know you will work on this feature.

Some ideas / suggestions

Let me know if it's not clear!

Thanks a lot for your work guys 🙂

@Luis I find that is not a problem to have a Style Guide Page. The problem is the Style Guide is published. I would be better to have a "Draft Page" which is not published (like Webflow), so you don't need to have an another icon. I think it's maybe less complicated to dev a draft page feature than an another icon navigator. Don't not, Maybe I'm wrong...

i want to be able to group things using command + g. the extra clicks to add a box and then put things in it adds up overtime.

not sure I understand this, you can delete the binding, its the trash button

This combined with multi select would be killer. Webflow has wrap in box and wrap in link commands but no multi select

already fixed https://github.com/webstudio-is/webstudio/pull/3419 releasing tomorrow

do you mean where variables are defined or where variables are bound?

Sorry I didn't see it... My bad! thanks

The two informations are important to my mind. On body you define variables but you use them in other element. Maybe differents colors could be interesting in order to distinguish between them. For example:

• Where variables are defined : green
• Where variables are bound : purple

Maybe iterate on that...

you can already see in settings which are defined on this instance

Yes of course. But I'd find it useful to see on which element types there are binded variables or not.

to get back to my question, you seem to want to know both, where variables are used and where they are defined?

yes 🙂

What's a typical question you are asking yourself when you want to know for each? just trying to better understand the specific situation

Yes all right I gonna try to be more precise.

When I'm on a page, the first thing I'm watching is the Navigator. On the Navigator, I have to understand :

• Is the element static or dynamic?
• Where are defined the variables? On body? On collection? On an another element?

when I'm building the page, it's not a problem, I know where are the variables and what is static or dynamic. But it is really useful to have that kind of information for theses uses cases:

• When you come back to a project in order be more productive ;
• When you didn't build the project (an another freelancer did for example) but you have to debug the project or need to rebuild on it ;
• When the project is big and has a lot of variables inside (for example, it would be possible to build a complexe dashboard with Webstudio thanks to biding and it could be hard to manage the project if you have to clic on each element in the Navigator to inspect them one by one)

Is it clearer?

sort of, I was mostly interested in concrete workflow and concretely what problem you would be trying to solve, e.,g. "Is the element static or dynamic?" doesn't answer why you need to know, why does this matter, understanding this is important before making any UI decision

On a Webstudio project you can handle multiples variables related to different element on a page, and it could be visually better to determine on Navigator if the element is static or if the value comes from an API or CMS.

I know you already can do it if you go to on each element and see if there are variables or not, but I find that it could be better... For example, on Webflow (sorry it's my background), you can see on Navigator is the element is a CMS Collection (it's purple) and if the element is static is not colored. For my point of view, it's easier to differenciate static element from dynamic :

• it's more clearer because I can see what element are more important than other (dynamic element are element which are more important to monitor because there's more possible bugs)
• It's easier to maintain if the page is big with a lot of variables

Make senses? 🧐

not really, you are describing what you want to have, but you don't explain exactly why

Sorry Oleg…

Maybe it’s not a use cases for other or it doesn’t make sense. For me it make sense.

Because, it is more clearer on the Navigator
Because it’s easier to maintain to make some difference between static / dynamic.

Maybe someone has the same feeling or understand what I mean and can have a better explanation than me. Or maybe it’s not good feature! 🤗

Well I understand what you want, but you haven' verbalised "why it matters". A good example is: I was looking to debug an error in runtime and needed to turn off all bindings to figure it out which one is causing an error, so I needed to find all bound instances - that's a "why". I was hoping you have some new "why" for me to better understand situations in which you need to identify bound instances, if not - its ok. Though I am acting only on things that I fully understand.

Additionally it seems like you don't really need to know where the variable is defined upfront, you only need to know where the variable is defined once you identified an instance that has a binding to a variable. Showing both bindings and variable definitions might overload the UI and isn't that easy to solve, but I think it isn't necessary in the first place.

Here's a couple of things that are mildly annoying to me.

1. Not being able to reorder my projects in the dashboard

1. Needing to navigate to individual settings to see if a heading is an h1, h2, etc. (same with if something is an <aside>, <main>, <div>, <header>, etc.)

I had a few other things that I'd find annoying, but you guys have fixed many of them already.

This is already a thing. There is button you can click on the bottom right to resize the modal and you can drag the header to move it around

Oh this is a bad bug. The sitemap lastmods should only reflect the page's last updated time, not the entire site. I'll add an issue

how long has that been there? I never noticed it before.

And we use drupal so I see that pattern every single day. haha

Maybe two months ago?

Google will stop trusting lastmod if it's not accurate so yeah need to fix that

This is already there, check it out lol

Yeah, I looked after John told me. I've somehow missed it for months. 😛

Any ideas what you expect to happen in that case?

Google: I am once again asking for an accurate date, one more false date and I am gonna stop crawling you

Hmmm... I don't know if this is possible:

• If the breakpoints are the same, it would function exactly as it currently does
• If it's bringing in new breakpoints, you'd get a model where you can accept all the new breakpoints or bind them to what you have set up.

So you would want a merge resolution UI to decide for each element for each new breakpoint to decide how new breakpoint should map to an existing one?

Or just generally ask how new breakpoint should be treated

No matter on which imstance

I think a UI would be super cool, but I assume it's a bunch of work (and I have no idea how the backend logic would work). There's probably a more simple solution.

Maybe a notification, "You're adding breakpoints to this project." Then, the user would need to tweak things manually, which wouldn't solve any of the tokens copied in when applied to the breakpoints.

@Oleg Isonen, would you consider this an issue for the majority of your customer base even?

I think for majority and will be critical with growing amount of clonables

I found another annoying little thing. The HTML comment is a light grey, which is difficult to see. Would it be possible to have it in green? Something like this: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_comment

Green is often used to highlight something while comments is neutral thing and does not affect code behavior. Though I agree light grey does not look good. We need darker tone.

Another item from the code editor. If I try to copy out of it (expression editor) into a different application it doesn't copy as expected.

Variables paste as hash?

This is how it needs to work to maintain proper references I believe. Although @TrySound I'll make the argument that since the unambiguous logic was added, it would be nice to copy system variables as plain text instead of their IDs (I want to do this between projects often, but can't). Good idea or no?

Realized I’m making the same suggestion as you Jeremy. Last week the ability to paste plain text vars was added. Mainly wanted this so I can add tutorials and say paste system.params.slug but copying would be nice too

@MagicalPrism can you separate the items into individual comments so people can vote on them.

GLOBAL colors and fonts. Using the tokens is super annoying for this.

oh! I thought of another one - this might just be a preference but it would be sooooo nice if the "Custom Code" area in project settings was a code field (so it formatted a bit better).