Qwik + Astro

Qwik + Astro is a boilerplate and integration template for building Astro sites with Qwik components that require zero hydration for instant interactivity.

What is Qwik + Astro?

Qwik + Astro is an open-source integration that lets you render Qwik components inside Astro projects. It provides a CLI that scaffolds a new Astro app with Qwik preconfigured or adds Qwik to an existing Astro project. The integration is maintained on GitHub by Jack Shelton and Sigui Kessé Emmanuel, and it supports the current Qwik v2 and Astro 6+ under the package name @qwik.dev/astro, with the older @qwikdev/astro (no dot) available for Astro versions below 5 or Qwik v1. The core benefit is that Qwik components ship as static HTML and only load JavaScript when a user interacts with them.

Key Features

• Zero-hydration rendering — Qwik components are resumable, meaning the page is interactive without executing hydration scripts on load.
• Multi-package-manager CLI — The create command works with npm, pnpm, yarn, and bun to generate a new project.
• Add to existing projects — The add subcommand targets the current directory or a specified path and works with official Astro templates and many community starters and themes.
• Automatic upgrade script — The upgrade command migrates projects from @qwikdev/astro to @qwik.dev/astro, swapping packages and rewriting imports automatically.
• Explicit client router config — The integration requires a clientRouter: true | false property in astro.config, replacing the old ViewTransitions component with ClientRouter.
• Official documentation and support — Docs are hosted at astro.qwik.dev, with a dedicated #qwik-astro Discord channel for help.

Who is it for?

• Astro developers who want to add interactive islands powered by Qwik while keeping the rest of the site static.
• Qwik developers building content-heavy sites in Astro who need isolated interactive widgets.
• Teams upgrading from Qwik v1 to v2 or Astro 5 to 6, using the built-in upgrade script to automate package and import changes.

Use cases

• Interactive UI components — Embed a Qwik component like a search bar or a counter into Astro pages without shipping unnecessary JavaScript.
• Gradual framework adoption — Introduce Qwik into an existing Astro project by running the add command, then building components one by one.
• Cross-framework experiments — Combine Astro's static generation with Qwik's resumability for performance-focused applications.

How does it work?

To get started, run npm create @qwik.dev/astro@latest (or the equivalent for pnpm, yarn, or bun). The CLI scaffolds a new Astro project with the Qwik integration already configured. For an existing project, run the same command with the add subcommand. The integration requires setting clientRouter: true or false in the Astro config, and you can migrate older projects with the upgrade subcommand.