# Builder.io SDK for Qwik

Use Qwik SDK to connect your Qwik application to Builder.io.

## Installation

Installing the Qwik SDK is done in two steps:

1. Set up Qwik-city project.
2. Install the Qwik SDK into your Qwik-city project.

### Set up Qwik-city project

1. Follow the instructions on [Qwik-city](https://qwik.builder.io/qwikcity/overview)

```bash
npm init qwik@latest
```

Follow instructions for setting up Qwik-city project.

### Install the Qwik SDK into your Qwik-city project

Add `@builder.io/sdk-qwik` to your `package.json` file:

```bash
npm add --save @builder.io/sdk-qwik
```

Add Qwik SDK code to a particular route (such as `src/routes/index.tsx`)

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

export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
export default component$(() => {
  const location = useLocation();
  const builderContentRsrc = useResource$<any>(() => {
    return getContent({
      model: "page",
      apiKey: BUILDER_PUBLIC_API_KEY,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: location.pathname || "/",
      },
    });
  });

  return (
    <Resource
      resource={builderContentRsrc}
      onPending={() => <div>Loading...</div>}
      onResolved={(content) => (
        <RenderContent
          model="page"
          content={content}
          apiKey={BUILDER_PUBLIC_API_KEY}
        />
      )}
    />
  );
});
```

## Mitosis

This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src).
