Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Qwik API

Beta

Our Qwik API is our new, ultra performance optimized alternative to our HTML API. It uses Qwik to prerender your content to optimized HTML that requires 0 JS to run (even if it has dynamic content!)

Status

This API is in beta. Please report issues in our forum. Current features not yet supported are custom components, impression and click tracking, and A/B testing.

Sample Request and Response

Try Out the Interactive API Explorer

What is Qwik

Qwik is a framework for rendering content that is focused on extremely fast site startup. Qwik achieves this in two parts:

  1. By delivering pure HTML of your content (nothing is faster than HTML)
  2. By transparently lazy loading the behavior (JavaScript) on an as-needed basis

Integration

To integrate Qwik into your site, you will need to do two things:

  1. Integrate qwikloader.js
  2. Integrate content fetching code.

Qwikloader

Qwik REST API delivers static HTML. To make the HTML interactive, Qwik requires a small (less than 1kb) library which needs to be included in your site.

Content Fetching

The next step is to download and inline the content into the HTML

Assume you have a <div id="my-content"></div> into which you would like to load the content.


If more than one content needs to be retrieved, repeat the above code for each content.

NOTE: The above code is vanilla JavaScript by design. The goal of Qwik is to be as lightweight as possible, and therefore, there are no expectations of existing libraries on your page.

Server Side Rendering

Qwik shines best with Server Side Rendering (SSR). Qwik REST API response can be cached in CDN and can be included in your SSR content. Qwik will automatically download additional JavaScript as needed to satisfy user interactions.

Example

You can try the above in StackBlitz.

Beta Limitations

Qwik is in beta and therefore comes with limitations. Below is a list of features that are not yet implemented but coming soon:

  • Support for registering components
  • Support for editing Builder content on the same URL as content served
  • Support for a/b testing
  • Support for insights/tracking

Development Preview

During page creation time it is useful to be able to preview the page without publishing or waiting for the CDN cache to renew. To achieve this, add additional parameters to the Qwik URL to bypass the cache and to retrieve content that is not yet published. The parameters to add are:

  • includeUnpublished=true
  • preview=true
  • overrides.page=<content-id> (can be found in the URL of the content that you are editing in Builder editor)

Example of a URL that bypasses the cache and always returns the latest (unpublished) version: ...&includeUnpublished=true&preview=true&overrides.page=...

API Query Parameters

NameRequiredDescription

apiKey

Yes

Your API key

url

Yes

The current URL of the visitor on your site, e.g. ?url=https://your-site.com/about?foo=bar

includeUnpublished

No

Set to true to include unpublished content in your API response (e.g. for testing)

query.*

No

Mongodb style query of your data. E.g.:

fields

No

Only include these fields. E.g.

omit

No

Omit only these fields, E.g.:

userAttributes.*

No

Optionally use this to send targeting attributes, e.g.:

cacheSeconds

No

Seconds to cache content (sets the max-age of the cache-control header response header). Make higher for better performance, and lower for content that will change more frequently


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?