Framework integrations

The framework integration packages teach Astro how to render and hydrate components from a specific UI library. They share a common shape: a server.js exporting check and renderToStaticMarkup, a client.js for hydration entry, and an integration default export that registers them as a renderer.

Common shape

// packages/integrations/<name>/src/index.ts
import type { AstroIntegration } from 'astro';

export default function (): AstroIntegration {
  return {
    name: '@astrojs/<name>',
    hooks: {
      'astro:config:setup': ({ addRenderer, updateConfig }) => {
        addRenderer({
          name: '@astrojs/<name>',
          clientEntrypoint: '@astrojs/<name>/client.js',
          serverEntrypoint: '@astrojs/<name>/server.js',
        });
        updateConfig({
          vite: {
            /* framework Vite plugin */
          },
        });
      },
    },
  };
}

The framework's server entry receives a component and props from packages/astro/src/runtime/server/render/component.ts and returns a string of HTML plus directive metadata. The client entry is loaded by the client:* runtime in the browser; it receives the rendered host element and hydrates the component.

React (@astrojs/react)

packages/integrations/react/ ships the react and react-dom integration. Notable details:

• Supports React 18 and 19 (via peer deps with wide ranges; root pnpm config allows-any for these).
• Uses the new renderToString/renderToReadableStream API path.
• Recent optimization: feat: Optimize StaticHtml component for React js (769265b) — bypasses hydration markers for purely static React subtrees.
• Identifies itself among multiple JSX frameworks via feat: identify different JSX frameworks during SSR (4e7f3e8), which lets a project mix React, Preact, and Solid with each correctly hydrating its own components.

Preact (@astrojs/preact)

packages/integrations/preact/ is the lightweight cousin of React. Uses preact/compat for components imported from react-style libraries, and ships its own renderer config.

Vue (@astrojs/vue)

packages/integrations/vue/ integrates Vue 3 with the official @vitejs/plugin-vue and provides an appEntrypoint option for users who need to bootstrap Vue with custom plugins (Vue Router, Pinia, …).

Svelte (@astrojs/svelte)

packages/integrations/svelte/ integrates Svelte 5 (the Runes era). Uses @sveltejs/vite-plugin-svelte. The pnpm-workspace.yaml carve-out for svelte@5.53.5 covers a recent security update.

Solid (@astrojs/solid-js)

packages/integrations/solid/ integrates SolidJS via vite-plugin-solid.

Alpine.js (@astrojs/alpinejs)

packages/integrations/alpinejs/ is the simplest renderer in the bunch — Alpine has no SSR component model. The integration injects the Alpine runtime into the client bundle and registers a no-op server renderer that simply emits the markup.

Multiple frameworks at once

examples/framework-multiple/ demonstrates wiring React, Preact, Vue, Svelte, and Solid into the same Astro app. The renderers are tried in order via vite-plugin-renderers, which picks the right one based on the imported component's file extension and the astro:jsx import attribute (react, preact, solid).

Related pages

• packages / integrations
• features / islands