Registering Custom Components with Builder
To use your custom components in the Builder Visual Editor, you need to take a couple of minimal steps in your codebase. This document guides you through the following:
Prerequisites
To get the most our of this tutorial, you should have the following:
Tip: This tutorial is for custom components in all Builder's supported frameworks except for the HTML API.
Setting up your code
To use your custom component with Builder, you need to let Builder know about it by registering your component. Registering your component makes the component appear in the Visual Editor as a custom block. Follow the steps according to framework.
Using your component in Builder's Visual Editor
Now your component should show up in the Visual Editor with no further configuration in the code.
The following video shows the Custom Thing block in the Custom Components section of the Insert tab.
CustomThing has an input
registered with Builder called name
. To use a registered component's input, do the following:
- Drag and drop your custom component into the work area.
- Select your component by clicking on it.
- Click the Edit button.
- Add a value for the the
input
, in this example, theinput
is calledname
, and the value added is the text, "Sunshine".
Setting component options
When you register a component, you must provide a name
. Optionally, you can also specify:
- component default styling
- whether Builder wraps the component in a
<div>
- whether the component displays in the Insert tab
The following table describes each of the additional component options:
Name | Type | Description |
---|---|---|
|
| Use for showing an example value in the input form when creating a new instance of this component, to users understand its purpose. Users in the Visual Editor can edit these styles. |
|
| Hide your component from the Insert tab within Builder's Visual Editor. Use this feature for deprecating a component when you want to reduce its use, but still need the component registered with Builder so that older content that uses the component continues to function properly. For more information on versioning, refer to Overriding and Versioning Custom Components. |
|
| By default, Builder wraps your components in a You can opt out of this wrapping by using the The following example shows Tip: When using |
The following code snippet features all component options in the context of registerComponent()
:
Next steps
To learn how to test and customize how your component appears in the Visual Editor, continue on to Using Your Custom Components in the Visual Editor.
To limit visual editing to only your custom components, use Components-only mode.
Need Expert help?
Submit a project to our partners, BuildQuick, and be matched with a Builder expert.