Web components wit react

Technical Questions Shopify
, , ,
1

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

2

Hi @almas,

You can develop your 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.
<!-- 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()

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

Hope this helps!

1 Like
3

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?

4

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:

    <script src="https://cdn.builder.io/webcomponents"></script>
<script src="https://your-cdn.com/your-bundle.js"></script>
<builder-component model="page" api-key="YOUR_API_KEY"></builder-component>

    This ensures the visual editor knows how to render the registered components.

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

    import { Builder } from "@builder.io/react";
import { MyComponent } from "./components/MyComponent";

Builder.registerComponent(MyComponent, {
  name: "MyComponent",
  inputs: [{ name: "title", type: "string" }],
});

  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.

Thanks,

5

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

6

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

image
image800×1082 150 KB

image
image1014×524 33.1 KB

7

@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?