Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Pricing

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

Creating Custom Types and Custom Type Editors with Plugins

You can create custom types in a plugin, providing rich data types that you can use across the Visual Editor. For example, you can:

  • Create custom component inputs that accept structured data fields.
  • Target content based on products in a customer's cart.
  • Model fields that store multimedia content.
  • Enable Symbol inputs to accept externally hosted documents.

Each custom type has a custom type editor, which provides a user interface for selecting values for your custom type fields. For example, editors can fetch external resources and present the user with a browsable list of items or provide menus and fields for data entry.

With custom types and custom type editors, your users can create and update nearly any kind of data structure beyond the basic types provided by Builder, all from within the Visual Editor.

Registering custom type editors

You can create a custom type as a side effect of registering a custom type editor.

A custom type editor is a React component that provides a user interface within the Visual Editor for modifying the value of a field that has your custom type. All editor components take two props:

  • value: the current value of the field
  • onChange: a callback function that accepts one parameter, which is the field's new value after the user changes that value within the editor

Editors are registered using the JavaScript (JS) SDK's Builder.registerEditor method, which also creates the editor's corresponding custom type. registerEditor accepts one parameter: an options object with three properties:

  • name: a string, typically camel-cased, representing the custom type's name
  • component: the editor component
  • options (optional): an object

Example

The example below demonstrates registering React Quill, a rich text editor component provided by a third-party library, as a custom type editor for the custom type myRichText. Click on the Usage tab to see an example of how to use myRichText as a custom component input.

Custom Editor

Usage

In the example above:

  • The editor component wraps ReactQuill, which itself takes onChange and value as props. Refer to the react-quill documentation for more information.
  • props.onChange and props.value are passed to the editor component by the Visual Editor, which controls the editor's state (refer to Controlled Components in the React documentation).
  • When the user updates the text area provided by ReactQuill in the editor, ReactQuill calls onChange, which updates the editor's state within the editor's parent component.
  • Updating the editor's state also updates props.value, which is passed down to ReactQuill to update that component's internal state.
  • Registering the editor component with Builder.registerEditor creates the myRichText custom type as a side effect. Nothing else is required to create the custom type.

Using your custom type and custom type editor

After installing the plugin that registers your custom type editor, the corresponding custom type is available across the Visual Editor, specifically when using the following features:

  • Custom component inputs.
  • Targeting content.
  • Model fields.
  • Symbol inputs.

Your custom type editor will appear whenever a Visual Editor user attempts to edit a field that has your custom type.

Next steps

Read the Overview of e-commerce plugins for more insight into plugins in Builder.


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?