Qwik API

in beta

Builder's Qwik API is an performance-optimized alternative to the HTML API. It uses Qwik to prerender your content imto optimized HTML that requires no JavaScript to run, even if it has dynamic content.

Tip: The Qwik API has a limited set of features. If you want to build a Qwik app using Builder content, use the fully-featured Qwik SDK instead.

Sample request and response

To experiment with the Qwik API, check out the Builder API Explorer, which works with your own Builder content.

The following is an example of a request and response:

https://cdn.builder.io/api/v1/qwik/YOUR_MODEL_NAME?apiKey=YOUR_API_KEY&url=PAGE_URL

# Example response
# {
#   "id": "c923kd89",
#   "name": "About page",
#   "data: {
#     "html": "<div data-builder-component="banner-ad"><div class="builder-blocks"><h1>Hello!</h1></div></builder-div>"
#   }
# }

The Qwik framework

Qwik is a framework designed for extremely fast site startup, which it achieves in two ways:

Pure HTML delivery: Qwik delivers content in pure HTML, which is the fastest way to load content.
Transparent lazy loading: Qwik lazy loads JavaScript behavior as needed, enhancing interactivity.

Integrating and fetching content

To integrate Qwik into your site, you need to perform two steps:

1. Integrate qwikloader.js by including the following script tag in your HTML:

<script async src="https://cdn.builder.io/js/qwik/qwikloader.js"></script>

The Qwik REST API delivers static HTML. So to make the HTML interactive, Qwik requires this small—less than 1kb—library.

2. Fetch your content. As an example, suppose you have a container, <div id="my-content"></div>, where you want to load the content. You'd use the following code snippet to fetch and inline the content into the HTML:

(async () => {
  const qwikUrl = 
        new URL('https://cdn.builder.io/api/v1/qwik/YOUR_MODEL_NAME');
  qwikUrl.searchParams.set('apiKey', 'YOUR_API_KEY');
  qwikUrl.searchParams.set('url', location.href);

  const response = await fetch(qwikURL);
  const { html } = await response.json();
  document.querySelector('#my-content').innerHTML = html;
})();

Repeat the above code for each content entry if multiple content entries need to be retrieved.

SSR StackBlitz example

Qwik works best with Server-Side Rendering (SSR). You can cache the Qwik REST API response in a CDN and include it in your SSR content. Qwik automatically downloads additional JavaScript as needed for user interactions.

The following example, available in StackBlitz, uses the Qwik API to fetch content: