is a Visual Headless CMS. Think about it as a drag-and-drop CMS that integrates into your existing Qwik codebase, allowing you and your team to edit content without having to write code.


You can add easily by using the following add script:

npm run qwik add

After running the command, will be installed, and a new sample component and catchall route will be created in src/components and src/routes respectively.

Create a free account (only takes a couple minutes), and paste your public API key into .env


Then run the development server:

npm run dev

Now, go set your preview URL to http://localhost:5173/

  1. Go to
  2. Choose the page model
  3. Set the preview URL to http://localhost:5173/ and click save in the top right

Now, let's create a page in and see it live in Qwik!

  1. Go to
  2. Click + New and choose Page
  3. Give it a name and click Create

Now, try out the visual editor! You can find a custom Qwik components in the Custom Components section of the insert tab.

You may also limit visual editing to only your custom components with components-only mode.

Register your components

One of the killer features of a Visual Headless CMS, is that you can expose your components to the CMS, ie, your Qwik components can be used as blocks in

import { MyFunComponent } from './fun/fun';
export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
    component: MyFunComponent,
    name: 'MyFunComponent',
    inputs: [
        name: 'text',
        type: 'string',
        defaultValue: 'Hello world',
export default component$(() => {
  const content = useBuilderContent();
  return (

Next Steps

See our full integration guides here

Also, when you push your integration to production, go back and update your preview URL to your production URL so now anyone on your team can visually create content in your Qwik app!

Also, to integrate structured data, see this guide


Thanks to all the contributors who have helped make this documentation better!

  • manucorporat
  • mhevery
  • Benny-Nottonson
  • mrhoodz
  • steve8708
  • aendel