After you've set up your code base to use your custom components within Builder, you can test it out and organize your components in the Visual Editor. This document guides you through the following:
To get the most our of this tutorial, you should have already done the following:
When you've successfully registered your custom components with Builder, you'll find your components in the Insert tab in the Custom Components section.
The following image shows the Custom Components section expanded within the Visual Editor for this page. In this example, within the Custom Components section, are eleven custom components that Builder developers have registered. The contents of your Custom Components section depends on which components you've registered, so yours might look different than this screenshot.
Organizing your components in custom sections
You can create a section in the Visual Editor Insert tab just for your custom components. The following image shows a custom section in the Insert Tab called Our Components, which contains four custom components; a hero, double columns, triple columns, and dynamic columns.
The following image shows an example of a custom section in the Insert tab called Our Components, which contains four custom components; a hero, double columns, triple columns, and dynamic columns.
To add your custom section to the Insert tab, specify insertMenu as an argument in Builder.register(). Give your section a name and list the items you'd like include in that section as in the following example.
import { Builder } from '@builder.io/sdk';
Builder.register('insertMenu', {
name: 'Our components',
items: [
{ name: 'Hero' },
{ name: 'Double Columns' },
{ name: 'Triple Columns' },
{ name: 'Dynamic Columns' },
],
}) For more detail on registering Insert tab menus, refer to Interface: Insert Menu Config readme on GitHub and a complete builder-settings.js config.
Before your team starts using your custom component, you can test it out in the Visual Editor. When developing locally, update the preview URL in the top right corner of the preview from your production URL to your local development URL.
Tip: When developing locally, you are mostly likely developing on a non-ssl http:// url within Builder, which is an https:// site. Browsers don't allow https:// sites to make insecure http:// requests unless you explicitly allow it. To allow access to your local http URL in Chrome, click the shield icon on the right side of the address bar, and choose load unsafe scripts. The page will reload and you might have to enter your local URL a second time for Chrome to allow its content to load.
The following video shows you how to set your preview URL by clicking the URL setting and typing in your local URL for development. This URL is temporary and does not persist when you leave the page, which makes it ideal for testing out your new component.
Now that you've integrated custom components with Builder, you can go further by even limiting page building to only your custom code components. For more information, refer to components-only mode.
Looking to hire a 3rd party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.