[New Feature] Opening the Element Plugin builder to everyone

We’re excited to announce that we’re now in public beta for Element Plugins. This lets you build your own elements in Javascript (Disclaimer: you should be familiar with web development to make the best our of this).

You can start building elements in the Plugin Editor, clicking on Elements. You can find a documentation for creating plugins here, and in the Plugin Editor itself. A contextual reference will show you how the API works and to which objects you have access when you’re coding an element. The general spirit is that you start by defining the different fields users will need to fill in the Property Editor in edit mode, the events and the actions that apply to your element, and then start implementing the code.

Elements can trigger workflows, have some actions modify their behavior, and expose some data to other elements. In other words, you can now build an entirely new UX element for your apps (or others’ apps).

You can see a read-only, very simple example of a plugin here.

As usual, let us know how this goes!

26 Likes

First!!! Yes!!!
Dont plan on sleeping tonight anymore

4 Likes

Time to learn javascript now. Can’t wait.

4 Likes

HELLO DEVELOPMENT BAZOOKA!
This makes Bubble exponentially more powerful.

If you need to brush up on js after being spoiled by Bubble-codelessness, check out Kahn Academy. Free edu.

2 Likes

Excellent - great news, Emmanuel!

Hi @emmanuel, can you please clarify the conditions of being in beta? Is publishing a plugin now available?

Hi-5!

Beta now means there may be some bugs that we’ll fix, but it’s safe to publish, yes.

The announcement as a pdf. I like to scribble notes in margins. Here’s a clean version.

1 Like

That is amazing and exciting news!! Thank you team Bubble!

Looking forward to see this in action!

Thanks Bubble Team. Hurray!!!

Absolutely, amazing! API Connector…and now this…the world is ours!

Thank you guys for your incredible work and commitment to building tools for us to create with. I have recently been experimenting with native compilers and ‘mixing’ my own JS as a UI wrapper ontop of Bubble. This builder couldn’t have come at a better time. Well done!

1 Like

Hey guys,

Where do I add JS files?

I hope to see a powerful chart plugin soon people;)

5 Likes

Working on this internally, but if someone wants to split cost on hiring a JS guy to get solid BI visualization capabilities, DM me.

Could this be used to build a better music player?

@emmanuel – really excited about this for obvious reasons. Three questions:

  1. Is there a way to expose the JS for the elements we’re already using but would like to make adjustments to? For example, I’d like to make height and color fields of a visual text element dynamic. Based on the construct of the Plugin Editor, this would seem to be a much simpler exercise than hiring a dev to learn Bubble basics/write the JS from sratch.

  2. Will we have the ability to eventually create Container elements also? Related to the above, I’d like to be able to make a group height, color, etc. dynamic where it isn’t possible today.

  3. If we wanted to make a mass element change – is there a way to do this? For example, an action that replaces all selected elements of a certain type with a new type of element.

You may be able to tell that I want to make what I’m currently using more dynamic =).

Yes, that would be a typical use case.

  1. Unfortunately no, as the API is different (internal vs external). But as the plugin base grows, we’ll have more examples for people.

  2. Maybe one day. You can already use instance.setHeight to modify the height of an element.

  3. We don’t currently have this, but you can replace elements one by one. If that becomes an issue for many people, we can look into it.

1 Like

On 2) Re your suggestion on using instance.height – this only applies for visual or input elements, though correct? As we aren’t able to create a group element in the editor I believe.

That’s correct, we don’t let users built containers as they work in Bubble.