---
title: Builder.io | Integrations
keywords: 'visual cms, headless cms, builder.io'
contributors:
  - manucorporat
  - mhevery
  - Benny-Nottonson
  - mrhoodz
  - steve8708
  - aendel
updated_at: '2023-09-28T17:30:02Z'
created_at: '2023-05-02T09:18:30Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';

# Builder.io

[Builder.io](https://builder.io/) 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.

## Setup

You can add builder.io easily by using the following `add` script:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run qwik add builder.io
```
</span>
<span q:slot="npm">
```shell
npm run qwik add builder.io
```
</span>
<span q:slot="yarn">
```shell
yarn run qwik add builder.io
```
</span>
<span q:slot="bun">
```shell
bun run qwik add builder.io
```
</span>
</PackageManagerTabs>

After running the command, `@builder.io/sdk-qwik` will be installed, and a new sample component and catchall route will be created in `src/components` and `src/routes` respectively.

Create a free [Builder.io account](https://builder.io/signup) (only takes a couple minutes), and paste your [public API key](https://www.builder.io/c/docs/using-your-api-key) into `.env`

```diff
- BUILDER_PUBLIC_API_KEY=YOUR_API_KEY
+ BUILDER_PUBLIC_API_KEY=abc123
```

Then run the development server:

<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run dev
```
</span>
<span q:slot="npm">
```shell
npm run dev
```
</span>
<span q:slot="yarn">
```shell
yarn run dev
```
</span>
<span q:slot="bun">
```shell
bun run dev
```
</span>
</PackageManagerTabs>

Now, go set your [preview URL](https://www.builder.io/c/docs/guides/preview-url) to `http://localhost:5173/`

1. Go to [https://builder.io/models](https://builder.io/models)
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 Builder.io and see it live in Qwik!

1. Go to [https://builder.io/content](https://builder.io/content)
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](https://www.builder.io/c/docs/guides/components-only-mode).

## Register your components

One of the killer features of a Visual Headless CMS, is that you can [expose your components](https://www.builder.io/c/docs/custom-components-setup) to the CMS, ie, your Qwik components can be used as blocks in Builder.io.

```tsx
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 (
    <RenderContent
      customComponents={CUSTOM_COMPONENTS}
    />
  );
});
```

## Next Steps

See our full integration guides [here](https://www.builder.io/c/docs/developers)

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](https://www.builder.io/c/docs/integrate-cms-data)

