Getting Started with Qwik & Builder.io
Tags: lowcode, qwik, builderio, beginners
Published: 2023-04-21 21:34:49

Qwik is the first framework that has similar DX (Developer Experience) as _React, Vue or Svelte_ in authoring components, while delivering Live HTML that is instantly interactive. Qwik applications execute the event handlers on user interaction, without having to bootstrap all the app state, removing the need for hydration completely. This technique is called [Resumability](https://qwik.builder.io/docs/concepts/resumable/). Qwik has instant-on startup performance no matter the application complexity. i.e. Qwik apps deliver the same amount of initial JS regardless of the amount of components. [Qwik is the first open-source O(1) framework](https://www.builder.io/blog/our-current-frameworks-are-on-we-need-o1).

Builder.io, a headless content management system (CMS) and page builder that allows developers and marketers to create and manage dynamic web pages and content without writing any code. It offers a drag-and-drop interface that makes it easy to design and publish pages, while providing a rich set of APIs and integrations for customizing and extending functionality. And developers can easily determine which parts of the storefront are controlled by Builder, who can access them, and what kind of changes they can make. Builder is also compatible with every website or app setup, e-commerce platform, and third-party software, offering [several SDKs](https://github.com/BuilderIO/builder/tree/master/packages) and robust REST and GraphQL APIs.

```bash
pnpm create qwik@latest
pnpm i @builder.io/sdk-qwik
pnpm start
```

Go to the [Models](https://www.builder.io/models) section in Builder.io and create a **Page** model and use `http://localhost:5173/` for Preview URL. Copy the Qwik template to `src/routes/[...index]/index.tsx` so that it renders all of the Builder pages.

```ts
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_PUBLIC_API_KEY; // <-- Add your Public API KEY here
export const BUILDER_MODEL = 'page';

export default component$(() => {
  const location = useLocation();

  const builderContentRsrc = useResource$<any>(() => {
    return getContent({
      model: BUILDER_MODEL,
      apiKey: BUILDER_PUBLIC_API_KEY,
      options: getBuilderSearchParams(location.params),
      userAttributes: {
        urlPath: location.url.pathname || '/',
      },
    });
  });

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

Make sure to replace `YOUR_API_KEY` with your [Public API Key](https://www.builder.io/c/docs/using-your-api-key), which you can find in the [Account Settings](https://builder.io/account/space) section of Builder. Qwik is reaching V1 soon and is evolving faster than the docs) change the template with `options: getBuilderSearchParams(location.params)` and `urlPath: location.url.pathname || ‘/’,`

In the [Content](https://www.builder.io/content) section of Builder, [create a new Test Page](https://www.builder.io/c/docs/create-page) and select page model. Start with a blank template and add a ‘Hello Qwik From Builder.io’ heading and publish it. Now, visit [`http://localhost:5173/test-page`](http://localhost:5173/test-page)


![Qwik app with content loaded from Builder.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3tkfz5g5nr1z4iu2jml.png)

Stripping away all the boilerplate examples in the qwik app, we get this clean slate with the content loaded from Builder. Now, we can begin our low-code / no-code, app /page builder journey.

Follow me on twitter [@prasmalla](https://twitter.com/prasmalla) for updates to this series where we will build everything from static landing pages, adding a blog with Builder.io as headless CMS, and integrating headless e-commerce with [Vendure](https://vendure.io/).