👋 Hey Dev. I'm diving into Qwik and Builder.io, and I hit a strange problem that had no clear answers online. If you’re working with custom components and multiple slots in Builder, read this before you lose time.

🧩 The Problem: Named Slots Don’t Work in Builder

Qwik supports named slots like this:

// MyLayout.tsx
import { Slot } from '@builder.io/qwik';

export const MyLayout = () => {
  return (
    <div>
      <header><Slot name="header" /></header>
      <main><Slot /></main> {/* default slot */}
      <footer><Slot name="footer" /></footer>
    </div>
  );
};

And you’d use it like this:

<MyLayout>
  <div q:slot="header">Header content</div>
  <div>Main content (default slot)</div>
  <div q:slot="footer">Footer content</div>
</MyLayout>

❌ The Catch

When using Builder.io’s visual editor, there’s no way to assign content to named slots like q:slot="header" or q:slot="footer". It only supports the default unnamed slot.

This means your <Slot name="..."> content won’t show up as intended.

✅ The Solution: Use Custom Props Instead of Slots

Builder.io does support custom @input props. So instead of relying on slots, pass content directly via props:

🔧 Refactored MyLayout Component

// MyLayout.tsx
export interface MyLayoutProps {
  headerContent?: JSX.Element;
  footerContent?: JSX.Element;
  children?: JSX.Element;
}

export const MyLayout = (props: MyLayoutProps) => {
  return (
    <div>
      <header>{props.headerContent}</header>
      <main>{props.children}</main>
      <footer>{props.footerContent}</footer>
    </div>
  );
};

Now your component still renders cleanly with isolated regions, but it works perfectly inside Builder.io.

🧠 How to Use It in Builder

In the Builder visual editor:

1. Add your MyLayout component from the components panel
2. In the side panel, you’ll see headerContent and footerContent as assignable props
3. Drag and drop elements or bind other components into those fields
4. The default children (main) still go in the regular content area

It just works™ — no slot syntax needed.

✨ Why This Matters

When building design systems or reusing layouts in Builder, relying on Slot name="..." will break your components inside the visual editor.

Using custom input props gives you full control, better integration, and a cleaner editing experience.

💬 Final Thoughts

I think Qwik is amazing, and Builder.io is incredibly powerful. But small gaps like this can frustrate newcomers or slow down production teams.

If this post helped you — or if you’ve solved this another way — let me know in the comments.

Thanks for reading! 🧡

Follow me for more Qwik + Builder tips soon — I’m just getting started!