Builder.io example with Qwik

An exaple of using Builder.io's drag and drop headless CMS with Qwik.

See src/routes[...index]/index.tsx for the integration code.

How to use

Clone and install:

git clone https://github.com/BuilderIO/builder-qwik-example.git
cd builder-qwik-example

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

- BUILDER_PUBLIC_API_KEY=YOUR_API_KEY
+ BUILDER_PUBLIC_API_KEY=abc123

Then run the development server:

npm run dev

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

1. Go to 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
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 choose to limit visual editing to only your custom components with components-only mode.

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 visuall create content in your Qwik app!

Also, to integrate structured data, see this guide