Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

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

Making a Plugin

You can extend and customize Builder by making your own plugin. This document covers making a minimal plugin to add a custom type for use in a Data model.

Prerequisites

To get the most out of this document, make sure you are familiar with the following:

Step 1: Create project and install dependencies

Create a directory for your plugin and open the new director with the following command:

Initialize the project to use npm:

Press Enter through the prompts and respond yes to the proposed package.json.

Use npm install to install the dependencies for this project. You can use --save-dev because Builder provides these dependencies for you later. The dependencies are:

  • @builder.io/app-context: exposes certain APIs to interact with APIs to interact with Builder
  • @builder.io/react: enables you to use React to create your plugin
  • webpack: module bundler for JavaScript
  • webpack-dev-server: development server with live reloading
  • @babel/preset-react: supports JSX
  • babel-loader: transpiles modern and superset JavaScript, such as JSX using Babel with webpack

Paste the following command, which includes all these dependencies, at the command line:

Install react-quill for the Rich Text editor that this plugin uses:

Step 2: Set up the files

This section guides you through creating the project infrastructure by creating the key files and pasting in the contents for each.

Replace the contents of package.json with the following:

At the root of your project, create a file called .babelrc and paste in the following:

Again at the root of your project, create a file called webpack.config.js and paste in the following:

This file establishes these key configurations:

  • The location of the entry point, or where webpack starts when bundling. Here, it's plugin.jsx.
  • The externals are dependencies that you don't need to bundle. You don't need to bundle them because when your plugin is ready, Builder provides these dependencies for you.
  • resolve.extensions specifies that you're using JavaScript and JSX files. If you're using other file extensions, add them here.
  • The module settings specify that you're using JSX files, not bundling node_modules, and using babel-loader to work with JSX.
  • With devServer, configures your plugin to run locally on localhost:1268, serve from the ./dist directory, and provides headers for local development with Builder.

Step 3: Create the plugin

Create a folder called src with a file called plugin.jsx and paste in the following:

The key points in the example above are:

  • The editor component wraps ReactQuill, which in turn 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, which controls the editor's state. For more information, see Controlled Components in the React documentation.
  • When the user updates the text area provided by ReactQuill, ReactQuill calls onChange, which updates the editor's state.
  • Updating the editor's state 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 MyText custom type.

For more information on input types, see Input Types for Custom Components.

Step 4: Add your plugin to Builder

  1. Go to Account Settings.
  2. Click the pencil icon for Plugins to add the plugin.
  3. Enter the local address for this example plugin: http://localhost:1268/plugin.system.js.
  4. Click the Save button.

The following video shows these steps:

Step 5: Use your plugin in Builder

  1. Go to Models.
  2. Select a model to edit or create a new one.
  3. In the model, click the + New Field button.
  4. To confirm that your plugin is working, click the Type dropdown and scroll down to select the type MyText. Notice that when you select MyText, the Default value input changes to a Rich Text input that includes text formatting options.

MyText comes from the name you provided in plugin.jsx. to Builder.registerEditor(). The following video shows these steps:

Next steps

This tutorial showed you how to create a minimal plugin and use it locally. The next step is to get your unique plugin creations added to Builder.

  • Come say hi on GitHub and submit a PR with your plugin on the Builder.io repo.

Need Expert help?

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

Submit a project

Was this article helpful?