Getting Started with Qwik & Builder.io

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. 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.

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 and robust REST and GraphQL APIs.

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

Go to the 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.

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, which you can find in the Account Settings 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 section of Builder, create a new Test 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

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 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.