Builder.io plugins are JavaScript bundles that run side by side with Builder’s code, with access to a list of supplied objects, most important of which is the appState which gives the developer a way to interact with the app through a defined interface:
import appState from "@builder.io/app-context"The appState interface is documented in the helper library:
npm install --save-dev @builder.io/app-contextThe easiest way to start is to pick a starting point from the list of plugin types below based on the use case
With e-commerce plugins, users can search and link selected products and categories from their E-Commerce backend to structured data entries, sections, and pages built within the visual editor. This allows teams to easily enrich content for selected products and build landing pages or custom sections with elements linked directly to their E-Commerce backend, for e.g product cards, product galleries, add to cart buttons, list of product recommendations, and much more.
Resources:
- Utility library that makes connecting e-commerce backends easier
- Forum post details how to use the utils library
- Good starting point and/or a reference implementation https://github.com/BuilderIO/builder/tree/main/plugins/swell
Data connector plugins are a way to enrich the data available in the editor sections and pages from external sources, once linked a data source users will be able to pick and choose entries or query that source and bind to the results of those queries directly in builder. Resources:
- Utility library that makes creating Data Connectors easier
- Reference implementation: Contentful data connector
Action shortcuts in Builder are a great way to simplify some of the tasks that would otherwise require developer involvement, using action shortcuts a user can trigger tracking events, set up conditional values, or set specific values on state without having to write code.
For example in the screenshot below, the action Track Event with Google Analytics comes from a plugin that defines what this action does for the bounded element: for example when the button is clicked , send event addToCart to Google Analytics.
| pick action | configure action parameters |
|---|---|
 |
 |
Resources: A good starting point here is : https://github.com/BuilderIO/builder/tree/main/plugins/example-action-plugin
Custom editor plugins allow you to register custom field types for your Builder model custom fields and inputs for your custom components, custom targeting or symbols. To create a custom editor, you will need to build a react component that takes a value prop and an onChange prop. Then within your custom editor component you simply call the passed in onChange function when the value is updated (example). The value you set can be any type serializable to JSON (e.g. string, number, null, array, object, etc) and be as deeply nested as you need. Resources:
See this doc for more info
When you have any of the examples running locally, you'd want to tell Builder.io to load the plugin code from localhost, to do so: sign in to Builder open the javascript console in your browser's dev tools and run.
// Adds the plugin
builder.plugins.replace(['http://localhost:1268/plugin.system.js']);
// Saves for all in your organization and reloads the browser
builder.savePlugins().then(() => location.reload());NOTE: Loading http:// content on an https:// website will give you a warning. Be sure to click the shield in the top right of your browser and choose "load unsafe scripts" to allow the http content on Builder's https site when devloping locally
Now as you develop you can restart Builder to see the latest version of your plugin.
To uninstall your plugin run
// Removes all plugins
builder.plugins.replace([]);
// Saves for all in your organization and reloads the browser
builder.savePlugins().then(() => location.reload());