What do you think about my Bubble editor sidebar revamp?

Showcase
1

Hey Bubblers!

It’s time for me to gather some feedback.

For the past few months, I’ve been working on something for my fellow Bubble developers, and I’d love to show you what I’ve been building so far. The project is called Elemium.

It’s a chrome extension, bringing new features and assets to the Bubble editor.

I’ve shared a bit of it on LinkedIn, and already have a few beta users, but I’m still looking for more in-depth feedback.

This may be a bit late, especially after the exciting announcements at BubbleCon about the editor UX revamp, but I hope you’ll still find some value in the ideas I’ve been working on.

The project started from my own struggles to follow best practices when it came to styling while building apps. I wanted a tool that would help me stick to a (pretty) design system with ease.
Templates never really convinced me—they felt too rigid and heavy for my needs. I wanted something more flexible and lightweight. So I began creating a library of assets, styles, and components. However, it quickly became clear that without a way to access and use these assets, they would be difficult to use. So, I started building an interface for it, adding at the same time some features I always wanted.

Here’s a sneak peek of what I’ve built so far:

  • Revamped Sidebar: A full-height element tree, with separated tabs for elements, and the ability to preview and select styles before drag & drop.

sidebar1

  • Style Previews: A way to preview and choose styles for existing elements.

sidebar2

The sidebar is just the beginning. It’s designed to fully support, and give full power to the following - still in development - features:

  1. One-click styleset import: A collection of handcrafted styles for all elements, including some basic plugins’ styles, based on a documented Bubble-compatible Design System.
  2. Drag & Drop Component Library: A full library of components, from simple to complex, all linked to the previous imported style set, drag&droppable as easy as an element.
  3. Advanced Visual Elements Plugins: Enhanced versions of basic elements like buttons, fully customizable checkboxes, toggles, and more.

Right now, only the sidebar is live, and I’m focused on the component library. I plan to release the first 100+ components in the next two weeks, with some of my plugins included. The one-click styleset import will follow shortly after.

Here is the link if you want to try it:

I plan to make a more official release post when everything is ready, but for now, I’d love to hear your thoughts on this sidebar. Given that Bubble is rolling out a full editor redesign, it may be already obsolete, but I’m excited to see how my ideas, if you like them, can complement or enhance the new editor. Some features may overlap, but I think there’s still plenty of room to add value - I have so many more ideas.

So, what do you think ?

7 Likes
2

Here’s a sneak peek of what the component UX will look like:

sidebar3

Still eager to hear your thoughts on all of this!

1 Like
3

Perhaps consider sending your CV to @missy.kelley - watch her speak at BubbleCon recordings and look at this job posting | Bubble

Just a thought :slight_smile:

6 Likes
4

Not sure to match this one but, at least I will have this project to put on my CV for the next offer :wink:

1 Like
5

That looks amazing!!!

6

If you care this much about the Bubble editing experience to go to this amount of effort you would likely be an asset to Bubble. At least think about it :slightly_smiling_face:

5 Likes
7

Thanks ! Official Bask developed plugins will be out at the same time as the library, so you already helped a lot with this project :wink:

2 Likes
8

If you need help porting to Firefox, let me know! :slight_smile:

**Avid Firefox user.

1 Like
9

Man I hope Bubble at least takes inspiration from work if they don’t just outright get you into the team. I really like that UX.

4 Likes
10

@thomas.mey that looks super exciting!!!

I have a few ideas already in mind:

  1. Will it be possible to add components by the user?
  2. Can these components already have logic/properties attached to them or the properties filled out?
  3. How would the style import work precisely? Can you import external libraries to the app or styles from app A to app B?
2 Likes
11

The sidebar looks sick! I want it now :joy: great job, man!

1 Like
12

Thanks for these feedback !

For the styleset import, in summary, I am developing the entire Elemium component library according to a design system composed of rules, variables, and styles. This set of styles and variables can be imported with a single click. Once imported, all components from the library that the user drags and drops will be automatically linked to these styles. This also means that if the user modifies certain variables or styles after the import, these changes will apply to all components in the library, whether they have already been inserted or not.

So, if you change colors, fonts, padding, roundness, or any other style properties, the components in the library will follow these new choices, even those you drag and drop later.

This way, there’s no need to restyle components after each drag and drop, while still allowing you to customize the styleset as you wish.

Additionally, thanks to this styleset, building or modifying new components while maintaining visual consistency will be much faster.

As for saving user-created components, including their workflows and styles, this is planned but will come after the implementation of the styleset and Elemium library. User styleset saving will also be possible.

I’ll definitely keep that in mind, but it’s a big undertaking, so I hope you understand if I wait to see how the community receives Elemium and its features first :wink:

2 Likes
13

Very cool - I will give it a try!

1 Like
14

Hey guys, Library is out !

Only the begining, I started with essential components, but there’s a lot more coming soon!

At least, you can have an idea of what it will be with a full UI kit + saving you own components feature. Just drag&drop them.

library

I’ve also documented each component, so you can view them all Live in the documentation:

docs

Take a look :arrow_right: https://docs.elemium.io

Would love to hear your thoughts!