# Builder Qwik API
https://www.builder.io/c/docs/qwik-api
https://builder.io/content/bf739f7d004a4f058f114a716369bc20
https://builder.io/content/d0e39097357245b2802bd61d40330e3f
https://github.com/bridgeproject/builder-internal/pull/2112
https://stackblitz.com/edit/builderio-rest-qwik-example-1
## Usage
With the Qwik API you can have Builder prerender your components server-side with highly optimized HTML powered by Qwik. This makes it a breeze to integrate Builder into pretty much any setup you might have. The best way to get familiar with the API is to explore it using your personalized API explorer, which you can find by clicking the blue button below.
## 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.
## What is Qwik
[Qwik](https://github.com/builderio/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.
```html
<script async src="https://cdn.builder.io/js/qwik/qwikloader.js"></scritps>
```
NOTE: because the `qwikloader` is so small, we recommend that you directly inline the library into your page to save on round-trip requests.
### 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.
```javascript=
(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;
})();
```
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.
### SSR
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
```htmlembedded=
<html>
<head>
<script async src="https://cdn.builder.io/js/qwik/qwikloader.js"></script>
</head>
<body>
Add your header content as needed...
<div id="my-content"></div>
Add your footer content as needed...
<script>
(async () => {
const qwikUrl = new URL('https://cdn.builder.io/api/v1/qwik/page');
// Demo API key for demonstration only. Please replace with your key
qwikUrl.searchParams.set('apiKey', '5b8073f890b043be81574f96cfd1250b');
let targetUrl = location.href;
// For pages served out of `file://` assume `/`
targetUrl = targetUrl.replace(/^file:.*/, '/');
qwikUrl.searchParams.set('userAttributes.urlPath', targetUrl);
const response = await fetch(qwikUrl);
const { html } = await response.json();
document.querySelector('#my-content').innerHTML = html;
})();
</script>
</body>
</html>
```
If you cut and paste the above HTML into a local file and open it in a browser, you should see:
## 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
Sign in with Wallet
Connect another wallet