Building elements

Building elements is one of the main things Bubble plugins let you do. You write the element's code, and the people using your plugin add it to their pages through the visual editor, display dynamic data with it, and so on. Web elements are written in JavaScript, and mobile elements in React Native.

Building an element means being comfortable with how elements work in Bubble and the different field types they can use, along with some coding knowledge: JavaScript and web development for web elements, React Native for mobile. If you need guidance, it's worth asking on the forum. You can see a simple implementation here.

A plugin can offer any number of elements. Click New to add one, and switch between elements by selecting the relevant element or subsection in the left panel.

When you add an element, you choose its platform: web or mobile. A single plugin can contain both web and mobile elements, but each individual element is one platform only, since the two are built on different underlying code. Your choice here determines which code editor you'll use further down, covered in the Code section below.

Test your elements in both the editor and run mode. You'll use edit mode to see how the element property editor renders, and mostly run mode to test your code.

To test a plugin, add an app to your plugin, then click the test button. If the plugin isn't already installed in your test app, it's added automatically. It's a good habit to keep the test app open. Clicking Go to test app refreshes the existing tab and fetches the latest version of your plugin.

The first thing to do when building an element is define the edit mode properties that control how it behaves in the editor. You'll pick a name, a category, an icon, and a placeholder image. (The element's code can't run in the editor, so the placeholder image is what represents it there.)

Next, you'll choose the properties that apply to the element and define the fields the user fills in when they use it. You can start with Bubble's standard properties for simple CSS options: background, dimensions, borders, and so on, which apply to the outer div. These are optional, and you can build an element without them, with one exception: if you want the element to be resizable, you'll need to select the Resizable option.

A field is a property the user fills in through the element property editor. Each field has a name, a caption, and an editor type.

You have several choices for the editor type:

A field can be optional, so it isn't flagged as missing in the element property editor. A field can also be marked In style: when checked, it's included when a user defines a style for your element in the Bubble editor. Styling options like colors typically go in styles, while data sources don't.

States let you expose data from your element to other elements and actions in the application editor. An input can have a value, a map can have a selected marker, and so on. Your code is responsible for keeping each state set to the right value, but you need to declare the states you want to expose. For each one, you define its data type so Bubble knows how to interpret the value in the editor.

Events and actions are how your element triggers a workflow and how the user's workflows modify it.

Events are triggered by your element. For your element to trigger a workflow, like a click, you declare the events it can trigger so Bubble can populate the relevant list in the Workflow tab. Your code is then responsible for triggering the event.

Actions are applied to your element, such as resetting a map to hide all markers. As with events, the action itself is defined in code, but you declare the action names and the fields that apply to each one. Defining these fields works the same way as defining the element's fields.

Once these pieces are defined, you can write the element's code at the bottom of the editor. For each function, you'll see a code editor alongside contextual documentation showing the objects you can access. The instance object represents the element, while the context object gives you access to utilities like the current user and a function to upload files.

How you write the code depends on the element's platform.

When testing your functions, you can add a debugger point so execution stops when you run it with the debugger on and the web inspector open. This lets you step through your custom code click by click.