[Experimental Feature]: New Design Canvas

Announcements New features
1

We just released a revamp of the editor canvas as an experimental feature. This is an under-the-hood code improvement to improve performance. You should notice a speedup if you have a large page with a lot of elements.

[Technical explanation] The change is a code rewrite from an imperative system (using JQuery) to a reactive, declarative system (using SolidJS). This allows fine-grained reactivity, which reduces the amount of re-rendering. This change also creates an Expandable Elements Tree.

In the near future, we will release this to everybody. If you find any bugs in the updated canvas, please fill out a bug report and note that you have the feature enabled. To enable it, go to your app editor Settings → Versions → Experimental Features. You can enable and disable it as many times as you’d like. The description:

Refactored editor design canvas code under the hood for smoother interactions and significant editor performance improvement. Larger apps or Single Page Apps with thousands of elements will notice the biggest performance improvements. This update does not affect your app in runmode. Note: this update removes Element Templates from the elements panel as these are replaced by the Component Library.

45 Likes
4

Awww yeah. I don’t build hugemongous pages, however, in the existing editor I note that sometimes my plugin property inspector interfaces take a long time to load. The new engine seems to overcome this. Good stuff!

3 Likes
5

Preliminary analysis as a frequent Bubbler – Looks and feels good. Overall, less laggy. Nice upgrade!

Also, maybe mention the expandable element tree :wink: I’m sure that’ll please the masses.

5 Likes
6

Holy mother bear! I missed that! Niiiiiiiiice! And I agree - noticeable performance improvement.

:smiley: :+1:

2 Likes
7

Totally forgot to mention that, thanks.

2 Likes
8

:relaxed: :popcorn: :popcorn: :popcorn:

1 Like
9

Nice!

10

Best feature !!!

11

This is a godsend… thank you!

12

Loving these quality of life updates :sweat_smile:

Anyone also running into a bug where their text looks left aligned in the Bubble editor, but looks fine in their app preview? Submitting a bug report…

2 Likes
13

I do see some bugs here in terms of hideable elements in RG’s, but it’s very complex to reproduce. You Bubble kids go hunt that down.

Specifically the image uploader, if made visible toggle will not show in preview (by which I mean editor mode). Possibly other elements.

But mostly the new shiny works.

5 Likes
15

It seems it ignore minimum height in the editor but runs with it live - possibly related to style padding - maybe text vertical alignment

16

Yeah, @philip2… I flagged at least another bug to the Bubble team after making the original post.

I’d suggest filing a bug report: bubble.io/bug_report. Sofia from the bug investigations team has been replying to all my bug reports and escalating them all to engineering to patch

17

This is :fire: :fire: :fire:. Just saw instantaneous improvements to a big dashboard page after turning it on. Way to go engineering team!!!

18

The Element Tree doesn’t seem to be selecting an item.

  1. turn on the experimental feature
  2. refresh the editor
  3. select something in the elements tree
  4. click on the Edit menu on top
  5. the copy option doesn’t work
  6. turn off the feature
  7. the copying works
4 Likes
19

I’m excited to try this! I’ll let the earliest adopters find all the bugs for a week or so first :rofl:

4 Likes
20

Always felt performance is one of the area bubble should work on. Super excited to check this.

1 Like
21

Yeah… I’m having issues dropping elements into the Canvas now. I’ve spotted and reported about 4 bugs now, downgrading for the time being until they’re fixed :sweat_smile:

2 Likes
22

Left align on text elements is cucked.