Property editor redesign (beta) is here!

[mike.alvarez]

Hi everyone,

I’m Mike, a product manager at Bubble.

As we shared in our property editor sneak peek, we’re rolling out our redesigned property editor (beta) in phases starting today.

Over the next few weeks, more of you will see these changes in your apps as we gradually roll it out to 100% of users. When you see it in your editor, use our migration guide to learn about what changed and get up to speed on the new property editor as quickly as possible.

Huge thank you to the alpha testers who have tested it and given us helpful feedback so far! Your input has been invaluable in identifying bugs, improving the UX, and starting the process of making the property editor as user-friendly as possible. We’re committed to continuing this throughout the beta and beyond.

Why we rebuilt the property editor

We’ve rearchitected the property editor’s frontend and backend from the ground up. In addition to a visual refresh, we’ve modernized the underlying codebase to address limitations from the original backend and set the foundation for future improvements.

Specifically:

• Improved backend for long-term success: We’ve migrated to SolidJS and updated our design system, making it significantly easier for our team to triage bugs, ship updates, and maintain the editor going forward.

• Redesigned UX: Properties are now reorganized to reduce unnecessary tab-switching.

• Set foundation for future AI integrations: The new architecture sets the stage for deeper AI integration in the property editor.

How to toggle between versions

Existing users have complete flexibility to switch between the old and new property editor anytime. The default for 25% of new users will be the new property editor.

For existing users, you can toggle it on or off at the top of the editor by clicking Beta > Switch it off or head to Settings > Versions > Beta features in your editor.

We recommend exploring the new version whenever the pace of your projects allows you to get familiar with the new layout and where things have moved and using the old version only when you need to work fast on active projects.

To help you become as fast with the redesigned property editor as you were with the old one as soon as possible, we’ve created a comprehensive migration guide that shows exactly where everything moved and what changed.

Share your thoughts and feedback

We’ll be monitoring feedback closely during this beta period. You can share your thoughts here.

We understand any change to your daily workflow takes adjustment, especially when you’ve built muscle memory over years. We hope the migration guide helps you learn the new editor quickly and get back to your normal editing speed.

We’ll continue to iterate and build in public to make sure this works well for our users. Your feedback is essential to making this the best version it can be.

Thanks for your patience as we roll this out. We’re excited for you to try it.

— Mike and the Bubble team

[jo1]

it’s finally here, great job!

Edit 1:

So after a day with the new property editor, here are my hot takes:

1 - Performance is pretty solid and things feels snappy.

2 - New custom states view is much better and beautiful.

2 - They are migrating to this new UI framework for the last couple of months now, and looks good so far. Some issues are typography, spacings and color contrast.

3 - Light mode is eye straining because a lot of the layout background is just white, inefficient contrast hierarchy. Hopefully dark mode comes soon too.

4 - Empty spaces are sufficient but some parts of the editor could cost less space if compacted.

5 - Primary font should be Inter Tight kind which more readable and space saving. Open sans is not suitable for GUI usage. Monospace font for dynamic expressions makes sense but it is so hard to distinguish section of the expression, so maybe reduce the kerning and increase the spacing between expression parts?

6 - Click count is skyrocketed over the board. Some actions are taking 8-10 clicks to complete, which was 3-4 previously. I think team is trying to make the whole UI modular for future features and additions, but there should be a middle ground between modularity and ease of use.

[J805]

Looking forward to divining in.

[devs1]

Looks great, I would rather have it on the left side next to the elements tree and keep version control to the right, maybe even have the option to switch between both sides.

[genstate]

Two things. First of all - I can’t read the properties of worflows when in LIVE mode. It says “Read only” but I can’t actually read what the details are. Second - I can’t turn off the new UX. The Beta toggle button does not appear to work.

[greg7]

It’s a Christmas miracle! The Workflow tab (showing all the attached workflows) is exactly what I needed today! Also, pinning it to the right was about 6 years overdue. So far, I feel like I just got a new car.

[fede.bubble]

@genstate flagging these things to the team

Also, does Settings > Versions > Beta Features and turn it off there work?

[alves.nig]

Still getting used to it, but it looks solid! I liked the ability to move actions in the workflow. Previously, I used to number the fields so they’d match the database order.

[genstate]

Thanks. I’d like to be able to switch it off for now and learn the new UX at my leisure. Too many deadlines today (and too old a dog to learn new tricks quickly) make the changes aggravating.

You have to uncheck the versions on the main branch. I’m not ready to move dev to live to make that work. Maybe using a Hotfix?

[genstate]

Turning off beta features in Hotfix did it. Thanks for the suggestion.

[tarasmuzon]

This is not a good update. Anyone who’s built anything somewhat serious in Bubble will find this update kills productivity. What used to take 1 click now takes 4-5 clicks.

Example 1: things are hidden/collapsed by default and require extra clicks to see

Example 2: Because of the smaller font size and texts being the same colour it is impossible to see at a glance what’s filled in and what’s not

There are many more examples like above. This UX is not good at all.

[emir.ozgun]

Feedback time:

1. I cant put min height to a page after making it fill why ? Normally when I start a new page I make it min height 1200, then do my stuff then remove that min height. Either make us have that again or add default builder height.

2. Your UI designer finally figure out the concept of hidden group on top of a small icon. For example icon is very small 24px-24px, For good UX you put a 40px-40px group on top of it so that users can click. That is good, but why I always close the dropdown lets say I am changing layout, when I try to click column I click the hidden close group of layout thus dropdown closes.

3. Try that 24px-24px idea to the groups , border, background, shadow sections, or better when those groups click I would like to open those sections not that very small plus icon.

4. Right margin, left margin auto applies same, when you type it lets say 12px, left-right becomes 12px-12px, and when I expanded I can see right and left, very bad I don’t know what to say to that.

5. When adjusting layout I see 9 dots, 3 of them is clickable, I should only see 3 or some sort of border or highlight which ones I can click

6. I can’t drag an element from tree inside of a group, very bad

7. this is row you say I say his is close to aa row “···”, same applies to the column , this is not a column

8. Again min height max height is why on expand

9. Workflows tab should be open

10. When I click add workflow, there is a little small Icon that forwards me to workflows page, I don’t know why

11. Custome state change is good only the page part, and the workflows associated with items how it looks good, but still hidden.

12. Adding conditional, again “then properties” section, why I again click 20px icon again for this, and why turning off a condition is bigger than removing the conditions.

My conclusions, I wanted to tested it due to I never wanted for beginners to figure out exclamation mark navigates to custom states, it was really bad, but now I only find more important stuff is hidden.

In general this editor team, likes to hide more important stuff each day. It is like what users mostly use ? and find it, yes users use min height often lets hide it. Or something like when a user clicks add workflow, it automatically goes to workflow editor, no lets put it in a small icon. They dont use autobinding so we put it on second item.

[georgecollier]

Whilst it’s definitely a necessary update to enable faster iteration in future and make it easier for new users, I can’t help but feel like there’s so many missed opportunities.

Like, why not give states their place as a primary data store rather than being in the tiny icon so they’re just as invisible as they’ve always been?

Or let expressions wrap like before so I can see what we’re actually setting our expressions to? Can you tell what the list parameter in this app’s workflow is? You can in the old editor, because it’s wrapped around.

[mitchbaylis]

I really shouldn’t be surprised at this point but I am. How consistently can bubble flop on every feature release.

The intention here is good. The execution is terrible.

Same question as always… Was this even tested by QA before being rolled out? Was there a sanity test because so many simple things - like not wrapping the conditionals is insane and should have been flagged by a QA team as making this redesign unusable for real users.

I used this for all of 5 minutes before I rolled back to the old version. I’m sure it’ll be quickly patched but it’s betas like this that eat away at the confidence and trust in the platform.

The other change I noticed was the deploy sheet now showing on the left? That now requires me to move the mouse from the far right to the far left to deploy where before I just moved the mouse down a little…

Every change just feels like bubble design team are seriously lacking UX QA.

I’m glad that I’m no longer using bubble for new projects so I’m far less annoyed at these bad decisions. I can work around the degrading experience for minor maintenance but this new editor will make it much harder for power users to be productive.

[Jici]

@mitchbaylis

Was this even tested by QA before being rolled out

From what I know, it was! But like a lot of other past features (like beta expression composer that is now removed) Bubble probably do small fix without really listening to Alpha test users before going live (too fast). This happening on almost any new features that are tested with a small group of “power users”. However, this could also be because theses users doesn’t provide enough feedback. But this is not the first time we see this happening…

@fede.bubble I don’t have access to this Beta option actually.

[rahulnope]

Can’t stress this enough.

[tarasmuzon]

@Jici

Bubble probably do small fix without really listening to Alpha test users before going live (too fast)

This is exactly right. We tried telling them over and over again for about a month:

They just don’t listen. Or only respond to bug fixes and positive feedback. Numerous UX issues we raised were never addressed.

[tarasmuzon]

The thing that is utterly bewildering to me is that Bubble has a huge and a super passionate community. Thousands of members who’ve spent years in the editor and hundreds of coaches who know beginners’ needs. Why not let them design the functionality?

Those people built serious apps in Bubble and know exactly where beginners stumble. They are the perfect people to design that functionality.

Instead, those designing the functionality are those who’ve never built serious apps on Bubble. Of course, it will be hard to understand why custom states should be in their own tab, etc…

[randomanon]

I have been a hardcore defender of Bubble for the last 2 years, but I actually think it’s over.

A year ago I said “the designers have no idea what they’re doing and all Bubble employees should be REQUIRED to build a Bubble app so they understand the product.” Clearly this never happened.

Why does it take a 3rd party Chrome extension to add a necessary enhancement, and why was this not included in the new property editor? Why must I highlight each part of an expression 1 by 1 and carefully study the order of AND/ORs in order to know what the expression means?

I think the below excerpt from the manual says it all.