Home App Docs Blog Github

Custom react components not registering in editor

I am trying to register a custom react component in the builder visual editor. I have successfully connected my landing pages to builder, but for whatever reason I can’t get custom react components to show up.

I don’t have any errors and my website works. I just can’t get my new components to show up so I can use them.

My website is built on gatsbyjs.

Builder content link

Builder public api key
41ceb140685144bfa92a885ec0dd1e59

** Public Repo **
Here is a link to my public repo GitHub - cmcollin41/grazed

Hi @cmcollin41! To see your custom components in the visual editor you first need to “register” them with Builder which you can read more about here. As an example, take a look at the custom Hero component. You can set up your other custom components similarly and add them to your builder-settings.js file which gets imported into your layout component, making them available in the visual editor globally.

Using Custom React Components in Builder

Hey, thanks for the reply.

I thought I was registering my components in the Hero.builder.js file? Is that not set up correctly?

You did set it up correctly! And it looks like it is available in the visual editor for your about page (see below). You should be able to see it in your landing-page model as well if you update the preview URL to match that of the about page.
Screen Shot 2021-11-23 at 6.02.42 PM

1 Like

Ah, that fixed it! Thank you. I had to change the root domain on the preview URL to my website’s domain. It was set to a builder preview domain and that wasn’t working.

1 Like