Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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.

LocationExample

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, refer to Builder's campaign plugin example.

Use the following toggles to further customize the Visual Editor:

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
  disableTargetingFields: [], // Array of targeting fields to disable
  // disableTargetingFields can be any targeting, like
  // ['url', 'urlPath', 'device', 'yourCustomTargetingField']
  disableOverflowButtons: [], // Disables buttons in the overflow menu next to Publish
  // disableOverflowButtons can be one of 
  // ['archive', 'duplicate', 'move', 'copy', 'globalSymbol', 'share', 'exportToPdf', 'getCode', 'fiddle', 'delete']
})

Builder's open source examples uses this pattern, demonstrate a pattern that provides access to application state, including the current editing document and API access.

Visit 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?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Visual Copilot

Visual Headless CMS

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Ebook

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Headless Commerce Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get StartedLog In
© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences