Render Qwik components in Astro.
Zero hydration. Instant interactivity. HTML until users care.

Documentation · Report an Issue · Discord

npm

npm create @qwik.dev/astro@latest

pnpm

pnpm create @qwik.dev/astro@latest

yarn

yarn create @qwik.dev/astro

bun

bun create @qwik.dev/astro

npm

npm create @qwik.dev/astro@latest add

pnpm

pnpm create @qwik.dev/astro@latest add

yarn

yarn create @qwik.dev/astro add

bun

bun create @qwik.dev/astro add

The add command targets the current directory by default. Pass a path such as npm create @qwik.dev/astro@latest add ./my-project to add Qwik to a different Astro app. Supports official Astro templates and many community starters/themes

See the CLI documentation for all available commands and options.

For full installation instructions, guides, and API reference, visit qwik.dev/astro.

This is the v2 branch (build/v2), which supports Qwik v2 and Astro 6+ under the new @qwik.dev/astro package name. If you need Astro <5 or Qwik v1, use the @qwikdev/astro package (without the dot).

Run the upgrade script from your project directory:

npm create @qwik.dev/astro@latest upgrade

Pass a path such as npm create @qwik.dev/astro@latest upgrade ./my-project to upgrade a different project directory.

The upgrade script handles package swaps and import rewrites automatically. However, it does not cover Astro-specific breaking changes:

• <ViewTransitions /> renamed to <ClientRouter /> — Astro renamed this component. Update your layouts accordingly.

• clientRouter is now required in the integration config — @qwik.dev/astro requires a clientRouter: true | false property in your astro.config:

  import qwik from "@qwik.dev/astro";
  
  export default defineConfig({
    integrations: [qwik({ clientRouter: true })],
  });

If the script doesn't work for your setup, follow the manual upgrade guide.

See our Contributing Guide to get started.

Reach out in the Qwik Discord, there's a dedicated #qwik-astro channel. You can also open an issue.

• Jack Shelton
• Sigui Kessé Emmanuel