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

Using Custom Components in the Visual Editor

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:

Prerequisites

To get the most our of this tutorial, you should have already done the following:

Finding your custom components in the Visual Editor

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.

For more detail on registering Insert tab menus, refer to Interface: Insert Menu Config readme on GitHub and a complete builder-settings.js config.

Developing and testing locally

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.

Next steps

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.


Need Expert help?

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

Submit a project

Was this article helpful?