Integrations

The packages under packages/integrations/ plug into the framework via the AstroIntegration interface declared in packages/astro/src/types/public/integrations.ts. They split into three rough groups.

Frameworks (UI rendering)

Renderers for each supported UI framework. They register a server renderer (used during SSR) and a client entrypoint (used by client:* directives).

Package	Path
@astrojs/react	packages/integrations/react/
@astrojs/preact	packages/integrations/preact/
@astrojs/vue	packages/integrations/vue/
@astrojs/svelte	packages/integrations/svelte/
@astrojs/solid-js	packages/integrations/solid/
@astrojs/alpinejs	packages/integrations/alpinejs/

See frameworks.

Server adapters (deployment targets)

Adapters wrap the Astro App runtime for a specific platform.

Package	Path
@astrojs/node	packages/integrations/node/
@astrojs/vercel	packages/integrations/vercel/
@astrojs/netlify	packages/integrations/netlify/
@astrojs/cloudflare	packages/integrations/cloudflare/
@astrojs/deno	packages/integrations/deno/ (stub README pointing to the externally-maintained version)

See adapters.

Content & build helpers

Package	Path	Purpose
@astrojs/mdx	packages/integrations/mdx/	.mdx route support
@astrojs/markdoc	packages/integrations/markdoc/	.mdoc route support
@astrojs/sitemap	packages/integrations/sitemap/	Generate sitemap-index.xml
@astrojs/partytown	packages/integrations/partytown/	Off-main-thread third-party scripts
@astrojs/web-vitals	packages/integrations/web-vitals/	Real-user web-vital reporting (uses @astrojs/db)
@astrojs/tailwind	packages/integrations/tailwind/	Stub (Tailwind v4 is recommended via Vite)

See content & build.

How an integration plugs in

Every integration exports a default function that returns an AstroIntegration:

export default function () {
  return {
    name: '@astrojs/my-integration',
    hooks: {
      'astro:config:setup': ({ updateConfig, addRenderer }) => {
        /* … */
      },
      'astro:config:done': ({ config, setAdapter }) => {
        /* … */
      },
      'astro:server:setup': ({ server, logger }) => {
        /* … */
      },
      'astro:build:start': ({ logger }) => {
        /* … */
      },
      'astro:build:done': ({ pages, dir, routes }) => {
        /* … */
      },
    },
  };
}

The hook implementations call back into core APIs declared in packages/astro/src/integrations/index.ts and the public types in packages/astro/src/types/public/integrations.ts.

Related pages

• packages / astro for how core wires hooks together.
• systems / build pipeline for which hooks fire when.