Qwik & Firebase Integration Help

Hello I am new to builder.io, I love the concept and would really like to use it. However I want to work with Qwik and firebase. I have looked through the doc and I can not find anything on getting custom components to work with Qwik (I’ve seen Next.js, React And a few others) and I am un aware how to connect firebase to my builder. if anyone could point me in the right direction with document pages that would me much appreciated.

See this code example:

import { component$, Resource, useResource$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";
import {
} from "@builder.io/sdk-qwik";

export const BUILDER_PUBLIC_API_KEY = "KEY"; // ggignore
export const MODEL = "content-page";
export default component$(() => {
  const location = useLocation();
  const builderContentRsrc = useResource$<any>(() => {
    return getContent({
      model: MODEL,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: "/",
    }).then((v) => {
      return v;

  return (
      <h1 dangerouslySetInnerHTML={"0"}></h1>
        onPending={() => <div>Loading...</div>}
        onResolved={(content) => (

export const Greeter = component$(() => {
  return <span>Hello World</span>;

export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
    name: "greeter",
    component: Greeter,
    builtIn: true,

As far as using firebase goes, I think you should just follow firebase documentation. I don’t believe Builder.io has firebase-specific instructions.

1 Like

2 things.

  1. I meant more of like I’m not sure how to see the data in builder. I have Firebase attached to my project. My goal was to instead of hard coding a component that has data already attached to it I would expose the data and allow the front end to decide where they want the data to go.
    For example if I have a button that has an image and a text along with a link it should send the users instead of me hard coding that I want to expose the data (from Firebase) so they could choose the image and text from a collection or document from Firebase. When I’m look at my app and I click on connect data it just says builder it doesn’t show me my Firebase data.
  2. I’m not home right now so I thank you in advanced for how I expose my custom Qwik component.

You can expose any date (including ones which come from Firestor) using the data property

            data={{ foo: 'bar' }}
1 Like