Home App Docs Blog Github

Custom React Component

Hi, I’ve made a custom React Component in my NextJs project following this tutorial: Using Your React Components in Builder.io
When I set the preview URL as http://localhost:3000/ it works, I can see my custom component in the builder and can modify options, etc., but I want to show it to my client, who hasn’t local development ran. How to achieve this?

When working with custom react components, keep in mind that your code is hosted by you, not by Builder, so you’ll want to push them somewhere (ie Netlify) so they can be publicly accessible. From there, you’ll need to set up the preview URL so it’s pointing to your Netlify setup. After that, you’ll be able to click the ‘eye’ icon in the top right of your Builder page, open the “view live page” and share that url with your client.

Let us know if you have any questions!

Is it possible to set the preview URL permanently? Now after each builder page refresh, the preview URL becomes empty.

Have you set an editing url for the model? If you head over to models: Builder: Drag and Drop Page Building for Any Site, you can add an editing url for your page model, which will remain the preview for all page models.