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!