Registering components in plugins

Technical Questions CMS
1

Hey

Is it possible to register a component in a plugin to be used in different sites?

Similarly to the out of the box components “text”/“button”/“forms”/… I would like to implement a component and install it in every site without having to register in each individual FE site.

Thanks in advance

2

Yes, you can register a component in a plugin to be used across different sites in Builder. This way, you don’t have to register the component individually for each site. Builder.io allows you to create custom plugins that can include custom components, which can then be shared and reused across multiple Builder instances.

Here’s how you can create and register a custom component within a plugin:

  1. Create a Plugin:
  • You will create a new plugin using Builder’s plugin system. This plugin will include the code for your custom component.
  1. Register the Component:
  • Inside the plugin, you will register the custom component so it becomes available in the Builder Visual Editor.

Example of Registering a Component in a Plugin

Below is an example of how you can create a plugin and register a custom component within it.

1. Create the Plugin

Create a new JavaScript file for your plugin (e.g., my-custom-plugin.js ).

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

Builder.registerPlugin({
name: 'My Custom Plugin',
init: (builder) => {
// Register your custom component here
builder.registerComponent(MyCustomComponent, {
name: 'MyCustomComponent',
inputs: [
{
name: 'text',
type: 'string',
defaultValue: 'Hello, world!'
}
]
});
}
});

const MyCustomComponent = ({ text }) => {
return (

{text}

);
};

2. Use the Plugin

Once you have your plugin file (my-custom-plugin.js ), you can use it in your Builder instances by including the plugin script in each site.
You can host this script on a CDN or a static server and then include it in the Builder Editor settings for each site.
To include the plugin script in Builder:

  1. Go to your Builder.io account.
  2. Navigate to Account Settings > Plugins.
  3. Add the URL of your hosted plugin script (e.g., https://mycdn.com/my-custom-plugin.js).

3. Register the Plugin Across Sites

Once the plugin is included in the Builder Editor settings, the custom component defined in your plugin will be available in the Visual Editor for all sites that load the plugin.

Using the Component

Now, when you or your team members go to the Builder Visual Editor, you should see MyCustomComponent available for use just like any other built-in component.
For more detailed information, you can refer to Builder’s documentation on Creating Plugins and Registering Custom Components.
This approach allows you to maintain a centralized custom component library that can be reused across multiple sites without the need to register each component individually on each site.

3

Hello @SandraT,

Just to clarify, you cannot register components inside plugins; you can only register within your site.

To reuse components across sites, you can create an NPM package with those components and the code to register them and import them across multiple sites.

You can refer to the below links for reference