Extending Builder with Plugins
While we put a lot of effort into making Builder come with great defaults, you can customize nearly every part of the CMS and editor using custom React code with our plugin system.
Possible examples include an image management plugin, a plugin to integrate with Shopify, or a plugin to customize the look and feel of the Builder editor.
👉Tip: If you want to dive in head first and start coding, jump over to our examples in Github to get hacking
What can you modify
With Builder plugins, there are two main customization areas. One if registering custom types, which are used in many places in the Builder UIs, and the other is to modify the editor UI itself
Custom type editors
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.
You also have the option of passing data into your plugin when registering it
as an input type. This is useful if you have things like api keys or settings
that you want to control in your own codebase, but want to be able to pass
into the plugin whenever it is used. To do this, use the
options property when registering an input for a component. See
this
example
for more details, as well as the code example below.
Plugins execute inside the Builder web application, so they need to be developed separately from your web application. Take a look at the sample code below for a simplified example of how to build and use a custom editor. For a more detailed and in depth example, see the example plugin for instructions on how to build, deploy, and connect your plugin to your Builder.io account.
Custom Editor
Usage
Modifying the editor and CMS
Below are some of the possible parts of the editor that you are able to modify via Builder.register(<some-key>) .
👉Tip: See our campaign plugin example for a kitchen sink app highlighting nearly all of the features below
| Location | Example |
|---|---|
| |
| Add a new tab located at the top of the preview window to view or edit the current document E.g. create a notes tab that let's people post and view notes to collaborate |
| Add a new tab located on the left sidebar to edit the currently selected element(s) E.g. create a Tailwind UI tab that applies tailwind classes to elements |
| Override the insert menu displaying components you can drop in custom |
| Add a toolbar button E.g. create a workflow status button for custom workflows |
Editor settings
You can also update various editor settings:
App Context
You may notice the example above, and our open source examples, use this. It gives access to application state, including the current editing document, API access, etc.
See here for docs and type definitions for what is available in app state.
