[Feature enhancement] New elements tree with more powerful interactions and shortcuts

[kate.mcnally]

Hey everyone,

I’m Kate, a product manager at Bubble focused on modernizing our editor interface. Today, we’re rolling out a new elements tree to improve your experience interacting with, managing, and building your app’s UI. With this new experience, you’ll spend less time on repetitive tasks and more time building the critical features that make your app unique.

The new elements tree includes:

Improved organization and a new search bar

• Two new collapsable sections for overlays and layers: The overlays section contains popups, floating groups, group focus, alerts (if the property is set), and reusable elements (if they are of type popup or floating group) that live on your page, while the layers section contains are all other elements.
• New drag-and-drop functionality: Place elements directly from the element palette into the elements tree in the exact place you want them. Especially when you’re building responsively, this will help speed up your development time and avoid misplacement on the canvas.
• New search bar: At the top of the elements tree, you can search by element name or element type.

New visual indicators

• New icons associated with each element: Each icon maps to the icon used in the element palette and in the canvas.
• Auto-reveal of elements upon click: When you click an element on the canvas, it will auto-reveal itself in the elements tree. Conversely, when you click an element in the elements tree, it will auto-reveal itself on the canvas.

New interactions via icons

In the header of the elements tree, there are two icons with new interactions:

• The eye icon allows you to toggle between Show only hidden on page load and Show all elements. Toggling back and forth will hide and reveal elements where you have unchecked the This element is visible on page load setting.
  
• The arrow icons next to the eye icon allow you to collapse or expand all the groups in the tree.

Next to each element, there are two icons with new interactions:

• The eye icon allows you to show or hide the element on the canvas.
• The lock icon allows you to lock the element in place on the canvas.

New keyboard shortcuts

A few of these command key shortcuts include:

• Cmd+C: Copy the selected element.
• Cmd+X: Cut the selected element.
• Cmd+V: Paste the selected element.
• Cmd+Click: Select multiple elements.
• Shift+Click: Select multiple elements in a row.

If you want to see the new elements tree in action, check out the latest Getting Started series that dropped earlier today on YouTube.

Up next on our editor modernization roadmap is a refresh of the workflow tab, so stay tuned for UI improvements to building logic on Bubble. In the meantime, we’d love to hear your thoughts on the new elements tree in the comments below. Thanks!

[TipLister]

hi just wanna say awesome first look/feel is great.
thanks for launching something that draws me more to bubble again.

[gregoryjohn]

Fantastic work @kate.mcnally - some of the new functionality is a godsend. I especially like the auto reveal feature, it saves a lot of time.

[artemzheg]

At first glance, I like the new look and features

@kate.mcnally

• The lock icon allows you to lock the element in place on the canvas.

The difference between locked/unlocked icon is hard to see for people with poor eyesight ():

Maybe, using a solid fill would be better for “locked” state icon.

@kate.mcnally

• Cmd+Click: Select multiple elements.

Not sure if it is supposed to work this way, but cmd+click allows to select multiple elements in the element tree while not allowing to do the same on the canvas.

[w.fly]

@kate.mcnally

The arrow icons next to the eye icon allow you to collapse or expand all the groups in the tree.

Cannot see these

Overall, this is quite an improvement!

[austin3]

Takes some adjusting, but I like the idea. This is a MAJOR problem though:

The old text was small, but at least it meant I could see deeply nested element names. With this new larger text in the same amount of width, I can’t read them or operate their controls.

Please either give us the option to use the smaller text size or allow us to expand the sidebar width

EDIT: Nevermind, I realize now you can adjust the width. I had tried earlier and wans’t able to because I was hovering over the bar to the left of the collapse icon, not the right. I would still like the option to reduce the text size to save screen real-estate

EDIT 2: The up-down resize is also nice, but the tolerance as to what counts as the resize is too small. It seems like we have to hover over a 1px tall border to resize. It would be nice to have the same tolerance as width resize.

[emir.ozgun]

Hey guys good work , just please increase the contrast

[hoke]

@austin3

EDIT: Nevermind, I realize now you can adjust the width. I had tried earlier and wans’t able to because I was hovering over the bar to the left of the collapse icon, not the right. I would still like the option to reduce the text size to save screen real-estate

Even if you can adjust the width now you have less space to work into the canvas. We will have to constantly shrink and expand the sidebar! Too much space between the tree items

[artemzheg]

@w.fly

Cannot see these

This icon:

[nur.ibrayev]

Btw, locking layer sometimes doesn’t work, still able to move around child elements.

[emir.ozgun]

Question about this . Why do I need to click the little eye icon to see the content , if I click to see the content and after I click sub element It 90% means I want to see it no ?

[YourFavFreelancer]

These are really nice updates!

[hoke]

@emir.ozgun

Question about this . Why do I need to click the little eye icon to see the content , if I click to see the content and after I click sub element It 90% means I want to see it no ?

agree. as before

[Sergiofojr]

Actually, I’ve not enjoyed it. The tree is too big and it is quite confusing.
I’m having a serious trouble with this change.

Please guys, just make this tree smaller as it used to be. It’s nice the idea to use icons, however, use them a in a smaller way.

In addition, when I just select an element (in old version) even if it was hidden, it will appear. In this new way, all my elements are hidden, so I need to click EVERY TIME in the “eye icon” to show. It’s annoying. Please, check it out.

In addition, look at it. It’s disturbing:

[w.fly]

Dang… Was hoping that would show them all.

And “Show All Children” has been removed.

Ugh. I just need one button that shows ALL of my hidden layers (not overlays).

[DjackLowCode]

Great new feature! Really enjoying it

[bonjour_17]

Well done Bubble

[georgecollier]

Good design updates - one little thing is annoying me!

If the element inspector is not open, clicking the element tree item will not open the element inspector. I swear it used to be the case that if we clicked an element in the sidebar, the inspector would always open. Now, I need to click on a random element, then click the element I want to inspect in the sidebar.

[adm]

a) why is it so hard for you guys to detach the Visual Elements in another bar to the right side??? (like Codux) lots of people use ultrawide screens in 2024…
(I actually coded a chrome extension just for me for this basic thing, took me 30 mins to do)

b) give me back the ability (slider) to change color opacity and font size with 1 click instead of 5, this is freaking annoying/slower.
If Im mousing, dont make me move my other hand just to type in 16px
it shows you dont hire or talk to power users.

c) where is dark mode, my EYES BURN. there is a lot of competitors using dark mode as default. this is another feature you gave up/sunset because… why?? finish what you start geez

d) the expression composer is just… is just faster to wait 3 months, pay gpt5 and ask for a React app, instead of the dense copy paste if you need to change anything at all…

e) overall, i hate most “enhancements” you guys tried to make. you just made it convoluted. slower. added more clicks to things that were working just fine. been bubbling for 5+ years.

d) why 16px is not a default Font Size option after 654564 years? same goes for 100% border radius (corners) to make a simple circle. it goes 0, 1, 2, 5, 10, 20 , JUST FREAKING ADD 100 for crying out loud, how many added hours we all wasted on this little thing ffs. did you EVER used bubble?

x) Home page/apps page. You added a popup just for “launching the editor”, IN ANOTHER TAB, this was stupid. We all mostly work on 1 app at a time, just let me get to it as fast as possible. so dumb. like the several horrible shades of blue options. dumb, lame, ugly. only outlamed by the furry animals on front page, that was… something else really

I swear I could save a billion hours just by editing your bubble default config for 5 minutes.

alternatively, also fire your whole team of interns.
why every feature is “oh, almost there …its 85% usable” ???

doofus hipster parrot for no reason for you too

[austin3]

Another note: Can you please pin the “Search assets” bar at the top of the list, so that we can still use it after scrolling? My natural use case seems to be to start scrolling, not find it quickly, then go to search, meaning I have to scroll all the way back up.