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 UI
editor.mainTab: top bar of the Visual Editor
editor.editTab: the panel of the UI that contains the Insert, Options, Style, Layers, Animate, and Data tabs.
editor.insertMenu: the Insert tab
editor.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
`appTab`	Make an app-wide tab that displays and edits content in unique ways using our read and write APIs. For example, make a content calendar so you can view your scheduled content on a calendar that shows when content will go live when, and give the user the ability to drag to reschedule. `import { Builder } from '@builder.io/react'; function CalendarView(props) { return <>{/* Read content and display on a calendar */}</>; } Builder.register('appTab', { name: 'Calendar', path: 'calendar', icon: 'https:/...', component: CalendarView, })`
`editor.mainTab`	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. `import { Builder } from '@builder.io/react'; import { useObserver } from 'mobx-react' const context = require('@builder.io/app-context').default; function NotesTab(props) { const { data } = context.designerState.editingContentModel; return useObserver(() => <textarea value={data.get('notes')} onChange={e => data.set('notes', e.target.value)} /> ); } Builder.register('editor.mainTab', { name: 'Notes', component: NotesTab, })`
`editor.editTab`	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. import { Builder } from '@builder.io/react'; import { useObserver } from 'mobx-react' const context = require('@builder.io/app-context').default; function TailwindTab(props) { const { selection } = context.designerState; return useObserver(() => <input title="color" type="number" onChange={e => { selection.forEach(el => { let value = e.target.value; el.properties.set('class', `text-gray-${value}`) }) } /> ); } Builder.register('editor.editTab', { name: 'Tailwind', component: TailwindTab, })
`editor.insertMenu`	Override the Insert menu and display custom components. `import { Builder } from '@builder.io/react'; const { designerState } = require('@builder.io/app-context').default; function InsertTab(props) { return <> <div onClick={() => designerState.draggingInItem = 'Custom component 1' } /> <div onClick={() => designerState.draggingInItem = 'Custom component 2' } /> </> } Builder.register('editor.insertMenu', { component: InsertTab, })`
`editor.toolbarButton`	Add a toolbar button. For example, create a workflow status button for custom workflows. `import { Builder } from '@builder.io/react'; const { designerState } = require('@builder.io/app-context').default; function WorkflowButton(props) { return <div onClick={launchApprovalModal}> Pending approval </div> } Builder.register('editor.toolbarButton', { component: WorkflowButton, })`

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:

import { Builder } from '@builder.io/sdk'

Builder.register('editor.settings', {
  hideStyleTab: false,      // Hide the style tab
  hideMainTabs: false,      // Hide all main tabs
  hideDataTab: false ,      // Hide the data tab
  hideOptionsTab: false,    // Hide the options tab
  hideToolbar: false,       // Hide the main toolbar
  hideHeatMap: false,       // Hide the heatmap button
  hidePageUrlEditor: false, // Hide the page URL editor
  hideAnimateTab: false,    // Hide the animate tab
  hideInsertTab: false,     // Hide the insert tab
  hideTargeting: false,     // Hide the targeting UI
  hideHelpWidget: false,    // Hide help widget
})

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.

Was this article helpful?