Extending Builder with Plugins
You can create plugins to customize Builder and the Visual Editor to meet your team's needs. This document covers the areas you can customize with Builder.register(<some-key>):
appTab:the left sidebar of the Builder UIeditor.mainTab: top bar of the Visual Editoreditor.editTab: the panel of the UI that contains the Insert, Options, Style, Layers, Animate, and Data tabs.editor.insertMenu: the Insert tabeditor.toolbarButton: the topmost section of the Visual Editor that displays features such as the icons for targeting, scheduling, alerts, code, preview, and the Publish button.
The table in the next section provides a screenshot of which part of Builder each of these keys refer to and example of how you might customize it.
Table of plugin options you can customize
| Location | Example |
|---|---|
| |
| Add a new tab located at the top of the preview window to view or edit the current document. For example, create a notes tab so people can post and view notes to collaborate. |
| Add a new tab located on the left sidebar to edit the currently selected element(s). For example, create a Tailwind UI tab that applies Tailwind classes to elements. |
| Override the Insert menu and display custom components. |
| Add a toolbar button. For example, create a workflow status button for custom workflows. |
Tip: For an example plugin with multiple options, check out Builder's campaign plugin example.
Editor settings
You can also update various editor settings with the following toggles:
App Context
Builder's open source examples uses this pattern, which gives access to application state, including the current editing document and API access.
See builder/packages/app-context/index.d.ts on GitHub for more information and type definitions that are available in app state.
Looking to hire a 3rd party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.