Separate components into custom sections on Qwik

[justine04]

Hello

Code stack you are integrating Builder with
Qwik

What are you trying to accomplish
I want to separate components into custom sections like in this article. It works on NextJs, but the code snippet doesn’t work on Qwik. I get the message: Cannot find name ‘Builder’

May someone please advise on how I can edit the code below so it works on Qwik?
Thank you.

export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
  {
    component: MyComponent,
    name: 'MyComponent',
    builtIn: true,
    inputs: [
      {
        name: 'text',
        type: 'string',
        defaultValue: 'Hello world',
      },
    ],
  },
];

Builder.register('insertMenu', {
  name: 'New Section',
  items: [
    { name: 'MyComponent' },
  ],
}) 

[manish-sharma]

Hi @justine04,

For Qwik, there are two options you have at builder, either using the Qwik API, which it sounds like you have explored, or the actual Qwik framework itself. With the Qwik framework, we have a full SDK just like many of our other frameworks, and that supports custom components out of the box.

The QWIK API, however, takes your inputs and parameters and then generates some HTML, JS, CSS etc using Qwik on Builder’s servers before sending the output as an API response. Because the HTML and any logic associated is generated on our servers, there isn’t really a way to include custom components, as our servers would never have access to the context of your app to really understand what a given custom component is/should look like.

So because of that, the QWIK API won’t ever really support custom components. But it is very powerful for generic builder-components! Meanwhile, the Qwik framework and SDK already does support custom components, and so might be worth exploring for you!

Hope this distinction helped clarify a few things, as always let me know if you still have more questions!

[justine04]

Hi @manish-sharma

Thank you so much for the comprehensive response.

I’m still a bit lost about how to add new component sections like the ones in the screenshot on Qwik.

Is it possible on Qwik?
If yes, how do I edit the code below to work on Qwik?

Builder.register("insertMenu", {
  name: "General Components",
  items: [
    { name: "Heading" },
    { name: "Button" },
    { name: "Card" },
    { name: "Accordion" },
  ],
});