# Web components wit react

**URL:** <https://forum.builder.io/t/web-components-wit-react/15110>\
**Category:** Shopify\
**Tags:** visual-editor, react, shopify, custom-components\
**Created:** [June 10, 2025, 1:41pm UTC](https://forum.builder.io/t/web-components-wit-react/15110 "2025-06-10T13:41:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![almas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/almas/32/5044_2.png) [@almas](https://forum.builder.io/u/almas)\
**Post date:** [June 10, 2025, 1:41pm UTC](https://forum.builder.io/t/web-components-wit-react/15110/1 "2025-06-10T13:41:58Z")

</div>

is what i am trying to do possible?

i am using builder webcomponents api to build custom widgets on other shopify stores by passing \<builder-component id=“id” ..etc\>, but developing via vanilla js slows dev speed, can i use react?

in liquid i just add script tag to enable builder web components

I have checked registered components but where would they live? how to access them? would i need to register all components in same file where minified builder web components live?

i searched docs but they only cover nextjs apps

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [June 13, 2025, 9:22am UTC](https://forum.builder.io/t/web-components-wit-react/15110/2 "2025-06-13T09:22:40Z")

</div>

Hi @almas,

You _can_ develop your [Builder.io](http://Builder.io) components in React, but you’ll need to bundle and expose them as JavaScript that runs on the Shopify store. Here’s a high-level overview of how to do this:

1. Build components in React using `@builder.io/react`.
2. Register them with `Builder.registerComponent(...)`.
3. Bundle your registration code using Webpack, Vite, or another bundler.
4. Host the resulting JavaScript file on a CDN or Shopify’s asset pipeline.
5. Include that script on the Shopify page after loading Builder’s Web Components SDK.

```liquid
<!-- Load Builder Web Components SDK -->
<script src="https://cdn.builder.io/webcomponents"></script>

<!-- Load your custom React component registrations -->
<script src="https://your-cdn.com/my-builder-components.js"></script>

<!-- Render Builder content -->
<builder-component model="page" api-key="YOUR_API_KEY"></builder-component>

```

* * *

**Where Do Registered Components Live?**

All components must be registered in the same JavaScript context where Builder runs. So yes, you should register all components in the bundle that’s included in Shopify. This allows Builder’s runtime to recognize and render them properly.

**Optional: Wrap React as Web Components**

If you want true encapsulation or need to use the components outside Builder too, you can wrap your React components as Web Components using:

- `react-to-webcomponent`
- `@lit-labs/react`
- Or a manual wrapper with `ReactDOM.render()`

> **[Builder.io: Visual Development Platform](https://www.builder.io/c/docs/webcomponents)**
>
> Builder is the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor, and an enterprise CMS.

Let me know if anyone wants a boilerplate setup using Vite + React for this. I’m happy to share.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![almas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/almas/32/5044_2.png) [@almas](https://forum.builder.io/u/almas)\
**Post date:** [June 13, 2025, 10:37am UTC](https://forum.builder.io/t/web-components-wit-react/15110/3 "2025-06-13T10:37:19Z")

</div>

Huge thanks @manish-sharma!

But i have one little question. Once i registered all the required components how to use in builder-component? I loaded visual editor with my app preview and placed demo component there. But upon loading i could not see it

i could probably make webcomponent and manually add it in builder but is there way to just make it work inside builder to?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [June 13, 2025, 10:51am UTC](https://forum.builder.io/t/web-components-wit-react/15110/4 "2025-06-13T10:51:32Z")

</div>

Hello @almas,

To address your question — once you’ve registered your custom components (either using `Builder.registerComponent()` for React or `builderWcLoadCallbacks` for Web Components), you can absolutely use them inside `<builder-component>`. However, for them to render correctly in the Builder visual editor, there are a few important steps to ensure everything works as expected.

1. **Your Preview Page Must Load the Component Bundle**  
The preview page (loaded inside Builder’s editor iframe) must include:

2. **Confirm the Bundle Contains Registration Logic**  
Make sure your bundle explicitly imports and registers your components. For React:

3. **Check the Browser Console**  
Open dev tools in the preview iframe and check for errors. If your component isn’t listed in `Builder.registry.components`, that means the registration hasn’t executed in the preview context.

4. **Publishing and Rendering**  
After placing your component in Builder, ensure the content is saved and published. Then reload the preview URL to confirm it renders correctly.

If you’d prefer framework-agnostic components, wrapping your logic in Web Components and registering them using `builderWcLoadCallbacks` is a great alternative. This avoids the need for React or Vue in the preview and works seamlessly if configured properly.

> **[Web Components API](https://www.builder.io/c/docs/webcomponents-api#registering-custom-elements)**
>
> Builder is the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor, and an enterprise CMS.

Thanks,

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [June 13, 2025, 10:54am UTC](https://forum.builder.io/t/web-components-wit-react/15110/5 "2025-06-13T10:54:31Z")

</div>

Additionally, you can refer to the following forum post that might help [Regstering web components for use in Builder's Visual Editor - #10 by TimG](https://forum.builder.io/t/regstering-web-components-for-use-in-builders-visual-editor/1082/10)

---

<div class="post-metadata">

**Author:** ![almas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/almas/32/5044_2.png) [@almas](https://forum.builder.io/u/almas)\
**Post date:** [June 13, 2025, 12:17pm UTC](https://forum.builder.io/t/web-components-wit-react/15110/6 "2025-06-13T12:17:35Z")

</div>

> [@manish-sharma](#):
>
> Builder.registry.components

hmm this object appears to be empty but Builder.components has it  
(App)

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [June 17, 2025, 5:33pm UTC](https://forum.builder.io/t/web-components-wit-react/15110/7 "2025-06-17T17:33:27Z")

</div>

@almas

Just wanted to follow up and check if this is still an issue on your end, are components still not rendering in the editor?