Custom Qwik Components

Hi @domcogan ! Thank you for the feedback on our documentation with Qwik, this is definitely something we are looking to improve. How are you integrating your custom component? You can see some examples in the links below:

But essentially within your <RenderContent/> component, you just pass your custom components as an array of objects the define input fields for Builder, something like this:

export const MyCustomComponent = component$((props) => {

  return (
    <div>{props?.text}</div>
  );
});

export const CUSTOM_COMPONENTS = [
  {
    component: MyCustomComponent, //the name of your component in code
    name: 'My Custom Component', //the name of component that will display in Builder
    inputs: [{name: 'text', type: 'string'}] //definition of the various inputs for your component
  }
]
...

<RenderContent
  model={MODEL}
  content={content}
  apiKey={BUILDER_PUBLIC_API_KEY}
  customComponents={CUSTOM_COMPONENTS}
/>

Hope this helps, let me know if you have any questions or if you’d like to share a code snippet where you are having trouble we can look into it