# How to add custom components to custom models

**URL:** <https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619>\
**Category:** Technical Questions\
**Tags:** visual-editor, custom-code, custom-components\
**Created:** [January 25, 2022, 12:37pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619 "2022-01-25T12:37:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 25, 2022, 12:37pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/1 "2022-01-25T12:37:47Z")

</div>

Hey!

I created a custom component using React, and it appears in my Page model editor, although I would like to use this custom component inside one of my custom model. How can I do this?

![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2f69df40ad7f8527be876a97beffe472cf9bfe22.png)  
I want to reuse this navigation dropdown inside my custom model, but I can not find it  
(I tried a workaround to save it as template but nothing, blank)

![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/aca2594e756768803ce3a518692e3db2346b060b.png)

```auto
...
export default NavSubMenu

Builder.registerComponent(NavSubMenu, {
  name: 'Navigation dropdow',
  inputs: [
    {
...

```

I thought It should be visible not only for my page model but for every model

This would be very important, please help and let me know!

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 26, 2022, 6:58am UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/2 "2022-01-26T06:58:44Z")

</div>

@steve @maddy @TimG  
I am building in production, I don’t want to rush you, just maybe my question got out of sight, that’s why I tagged you.

Please let me know how can I see my custom react components inside my custom models.  
Thanks for your great help, we really appreciate it!

---

<div class="post-metadata">

**Author:** ![retim55](https://avatars.discourse-cdn.com/v4/letter/r/49beb7/32.png) [@retim55](https://forum.builder.io/u/retim55)\
**Post date:** [January 26, 2022, 11:16am UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/3 "2022-01-26T11:16:22Z")

</div>

Thanks for the question!  
I would be interested in the resolution as well!

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [January 26, 2022, 3:54pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/4 "2022-01-26T15:54:32Z")

</div>

Hey @radikris - what is the [preview URL](https://www.builder.io/c/docs/guides/preview-url) of the custom model? Is it connected to your codebase on a route that registers those components?

The most common culprit for components not showing up is using the wrong preview URL, e.g. the default one or anything else that doesn’t “see” your component be registered (aka doesn’t register the component or import a file that does)

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 26, 2022, 6:36pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/5 "2022-01-26T18:36:01Z")

</div>

Hey @steve  
For example I have this: [Builder](https://preview.builder.codes?model=section-test&apiKey=29ac5503f46b4b0ea80336edf8478e24)

But in the dropdown lists my custom component not showing up:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2a83cfc624c406308618c05a2db620558aba0686.png)

I made this custom react component eg:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/203791d5138f5a36311c37be74163cbf1800c433.png)

And I would like to use it in later in every single custom model which I will make in the future, I imported in the main index.js

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4099a07a7e1fcde0b3602209806f67ac36ce4e98.png)

But this is only available in my ‘Page’ model, what should I do with my ‘section-test’ preview url that my ‘Code block vercel’ component will be available in there? (shortly, in every custom models as well)  
Please let me know, I think I kind of misunderstand something with this register function.

In the documentation:  
/\*\*

- Passing a list of model names will restrict using the component to only the models listed here, otherwise it’ll be available for all models  
\*/  
That’s why I thought it should be visible in every model by default.  
My public Builder API\_KEY if you want to checkout: 29ac5503f46b4b0ea80336edf8478e24

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [January 26, 2022, 8:02pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/6 "2022-01-26T20:02:06Z")

</div>

Ah yes, so the key thing is you need to make sure you have a way to edit your custom section on your site where your components are available. One common pattern people use us to make a simple page for Builder editing of sections, like

```auto
// Import where you registered Builder components
import './my-builder-registered-components'

// pages/builder-editing.jsx
export default function BuilderEditing() {
  const queryParams = useRouter().query;
  return <BuilderComponent model={queryParams.model) />
}

```

And then set the [preview URL](https://www.builder.io/c/docs/guides/preview-url) for that model to be like

```nohighlight
https://your-site.com?model=test-section

```

So that way when using the Builder editor you are editing on your site where your components are registered

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 26, 2022, 8:34pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/7 "2022-01-26T20:34:36Z")

</div>

Thank you very much for your help, but I think you answered me a different question.

I don’t want to use BuilderComponent in my code, I only want to upload my custom component (MyCustomComponent), which is working but ONLY for the ‘Page’ model. But here it works great, I can see it from the dropdown menu.

I want to create a custom model, a Symbol, and I want to drag and drop my previously created MyCustomComponent with drag and drop, but none of my custom components are showing up in the menu, why is it happening?  
**(How can Custom models editor see custom components, the same as on the ‘Page’ model??**

Hope you can understand my question now.

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [January 26, 2022, 9:17pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/8 "2022-01-26T21:17:25Z")

</div>

Hey @radikris - if you don’t do a setup like my suggestion above, you won’t see your custom components when editing custom models like symbols, custom sections, etc. What is the preview URL you are using for your custom sections, like symbols? E.g. if you go to [builder.io/models](http://builder.io/models) then choose “symbol”, what is the value for “editing URL”?

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 26, 2022, 9:27pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/9 "2022-01-26T21:27:59Z")

</div>

its the default one:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8c2f88785e74eec3c9e475bd7c7f54122943ab34.png)

I guess then it is not the correct approach, can you please tell again what should I do to be able to see my custom components in this custom model as well

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 26, 2022, 9:37pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/10 "2022-01-26T21:37:52Z")

</div>

Okey, I set the preview url: [http://localhost:3000?model=symbol](http://localhost:3000?model=symbol), and it shows me my home page, but I would like to get a simple blank page where I can build a custom symbol from scratch

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [January 26, 2022, 9:42pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/11 "2022-01-26T21:42:48Z")

</div>

Perfect - yeah that is what I am getting at. If Builder is using the default page for editing, it is not connected to your site or components. So Builder needs to point to a page that has a `<BuilderComponent />` on it and your components registered. So, a simpler example would be

1. Create a new file in your project `/pages/edit-builder-symbol.jsx` with:

```auto
import { BuilderComponent } from '@builder.io/react';

// import where your custom components are registered
import './wherever-you-register-builder-components'

// This page is purely for using the Builder.io editor to edit symbols
export default function EditBuilderSymbol() {
  return <BuilderComponent model="symbol" />
}

```

1. Then update your Editing URL for the symbol model to `http://localhost:3000/edit-builder-symbol` and save it

Now, when using the drag + drop editor for symbols, its going to hit your local site where your components are

Lmk if that helps explain ^

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [January 26, 2022, 9:57pm UTC](https://forum.builder.io/t/how-to-add-custom-components-to-custom-models/1619/12 "2022-01-26T21:57:18Z")

</div>

Omg, it works like a charm, thank you very much for your help!  
Very appreciate it @steve , best wishes, keep it up the good work!🙂