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.
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!
@emmanuel – really excited about this for obvious reasons. Three questions:
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.
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.
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 =).
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.