Rendering custom components with Builder HTML API

Technical Questions
1

I have created a custom component using the React framework (Using Your React Components in Builder.io - Builder.io). The custom component itself works perfectly fine in the visual editor when I change the preview URL to either localhost:3000 (when nextjs is running locally) or a publicly accessible server (404: This page could not be foundbuilder_editing=true&builder.overrides.development=6ce08af50c774990a5fb1b9670454e70&builder.overrides.6ce08af50c774990a5fb1b9670454e70=6ce08af50c774990a5fb1b9670454e70).

If you access that amplifyapp URL you’ll see an image of some chairs with a little circle on the left. The content model is Development and the ID is 6ce08af50c774990a5fb1b9670454e70. If you open that in the visual editor you’ll see the Shoppable Image component works totally fine. You can add a new one, upload an image, and then add as many hotspots as you want (in the options of the component). This all works perfectly.

My question is related to the HTML API, IE (https://cdn.builder.io/api/v1/html/development/6ce08af50c774990a5fb1b9670454e70?apiKey={{apiKey}}).

It does not appear to be rendering the custom component. It completely skips it. Is there a place where i can “import” the component so the Builder HTML API renders it server side just like all the default components (Text, Image, Columns, etc). Without the ability to do this I don’t really see the value of custom components unless your entire website is a react app, which ours is not.

We would like to develop these custom components, use them just like the out-of-the-box Builder components, and have them render server side through the HTML API just like normal components.

2

Hi @davidwebber you are correct, the way custom component rendering works is that any component will need to be registered and imported on the same context where the SDK is rendering the content. For example within a React App, like you mentioned.

Our HTML API will return what we render on our servers, meaning that we will not have a user’s custom components available within the same context. So, if you are using custom components, your best bet is to use one of our SDK or starter apps.

That being said, if that isn’t an option, there are ways for you to create custom components within Builder that you could access from the HTML API. For example, you could create a symbol with any child elements, classes, CSS and JS you need and then use the HTML API to access that. Or similarly, that symbol placed on a page will be accessible as well.

The example component you made seems fairly straight forward, so I think you should be able to easily translate it to a symbol, but even more complicated components are definitely possible depending on how you implement it.

Try it out and let me know if you get stuck or have further questions!