Astro integrations add new functionality and behaviors for your project with only a few lines of code. You can use an official integration, integrations built by the community or even build a custom integration yourself.

Integrations can…

• Unlock React, Vue, Svelte, Solid, and other popular UI frameworks with a renderer.
• Enable on-demand rendering with an SSR adapter.
• Integrate tools like MDX, and Partytown with a few lines of code.
• Add new features to your project, like automatic sitemap generation.
• Write custom code that hooks into the build process, dev server, and more.

The following integrations are maintained by Astro.

Front-end frameworks

Adapters

Other integrations

Astro includes an astro add command to automate the setup of official integrations. Several community plugins can also be added using this command. Please check each integration’s own documentation to see whether astro add is supported, or whether you must install manually.

Run the astro add command using the package manager of your choice and our automatic integration wizard will update your configuration file and install any necessary dependencies.

npx astro add react

pnpm astro add react

yarn astro add react

It’s even possible to add multiple integrations at the same time!

npx astro add react sitemap partytown

pnpm astro add react sitemap partytown

yarn astro add react sitemap partytown

Astro integrations are always added through the integrations property in your astro.config.mjs file.

There are three common ways to import an integration into your Astro project:

1. Install an npm package integration.

2. Import your own integration from a local file inside your project.

3. Write your integration inline, directly in your config file.

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import installedIntegration from '@astrojs/vue';
   import localIntegration from './my-integration.js';
   
   
   export default defineConfig({
     integrations: [
       // 1. Imported from an installed npm package
       installedIntegration(),
       // 2. Imported from a local JS file
       localIntegration(),
       // 3. An inline object
       {name: 'namespace:id', hooks: { /* ... */ }},
     ]
   });

Check out the Integration API reference to learn all of the different ways that you can write an integration.

Install an NPM package integration using a package manager, and then update astro.config.mjs manually.

For example, to install the @astrojs/sitemap integration:

1. Install the integration to your project dependencies using your preferred package manager:

   • npm
   • pnpm
   • Yarn
   Terminal window

   npm install @astrojs/sitemap

2. Import the integration to your astro.config.mjs file, and add it to your integrations[] array, along with any configuration options:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import sitemap from '@astrojs/sitemap';
   
   
   export default defineConfig({
     // ...
     integrations: [sitemap()],
     // ...
   });

   Note that different integrations may have different configuration settings. Read each integration’s documentation, and apply any necessary config options to your chosen integration in astro.config.mjs.

Integrations are almost always authored as factory functions that return the actual integration object. This lets you pass arguments and options to the factory function that customize the integration for your project.

integrations: [
  // Example: Customize your integration with function arguments
  sitemap({filter: true})
]

Falsy integrations are ignored, so you can toggle integrations on & off without worrying about left-behind undefined and boolean values.

integrations: [
  // Example: Skip building a sitemap on Windows
  process.platform !== 'win32' && sitemap()
]

To upgrade all official integrations at once, run the @astrojs/upgrade command. This will upgrade both Astro and all official integrations to their latest versions.

# Upgrade Astro and official integrations together to latest
npx @astrojs/upgrade

# Upgrade Astro and official integrations together to latest
pnpm dlx @astrojs/upgrade

# Upgrade Astro and official integrations together to latest
yarn dlx @astrojs/upgrade

To upgrade one or more integrations manually, use the appropriate command for your package manager.

# Example: upgrade React and Partytown integrations
npm install @astrojs/react@latest @astrojs/partytown@latest

# Example: upgrade React and Partytown integrations
pnpm add @astrojs/react@latest @astrojs/partytown@latest

# Example: upgrade React and Partytown integrations
yarn add @astrojs/react@latest @astrojs/partytown@latest

1. To remove an integration, first uninstall the integration from your project.

   • npm
   • pnpm
   • Yarn
   Terminal window

   npm uninstall @astrojs/react

2. Next, remove the integration from your astro.config.* file:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   
   
   import react from '@astrojs/react';
   
   
   export default defineConfig({
     integrations: [
       react()
     ]
   });

You can find many integrations developed by the community in the Astro Integrations Directory. Follow links there for detailed usage and configuration instructions.

Astro’s Integration API is inspired by Rollup and Vite, and designed to feel familiar to anyone who has ever written a Rollup or Vite plugin before.

Check out the Integration API reference to learn what integrations can do and how to write one yourself.