> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/withastro/astro/llms.txt
> Use this file to discover all available pages before exploring further.

# Official Integrations

> MDX, Sitemap, Partytown, Markdoc, and other official Astro integrations

Astro provides several official integrations beyond UI frameworks and adapters to enhance your site's functionality.

## Content Integrations

<CardGroup cols={2}>
  <Card title="MDX" icon="markdown">
    Use JSX components in Markdown files
  </Card>

  <Card title="Markdoc">
    Use Markdoc for content-driven sites
  </Card>
</CardGroup>

## MDX

The MDX integration allows you to use JSX components and import statements in Markdown files.

### Installation

```bash theme={null}
npx astro add mdx
```

Or manually:

```bash theme={null}
npm install @astrojs/mdx
```

### Configuration

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});
```

### Options

```ts theme={null}
mdx({
  // Extend frontmatter with additional properties
  extendMarkdownConfig: true,
  
  // Remark plugins
  remarkPlugins: [],
  
  // Rehype plugins
  rehypePlugins: [],
  
  // Custom recma plugins
  recmaPlugins: [],
  
  // Optimize for production
  optimize: false,
})
```

### Usage Example

Create an MDX page:

```mdx title="src/pages/blog/post.mdx" theme={null}
---
title: My First MDX Post
author: Astro Learner
---

import { Code } from 'astro:components';
import CustomComponent from '../../components/CustomComponent.astro';

# {frontmatter.title}

By {frontmatter.author}

Here's some content with a custom component:

<CustomComponent />

And here's some code:

<Code code={`const hello = 'world';`} lang="js" />

export const metadata = {
  published: new Date('2024-03-15'),
};
```

### Using MDX with Components

You can import and use any framework component in MDX:

```mdx title="src/content/blog/interactive-post.mdx" theme={null}
---
title: Interactive Tutorial
---

import Counter from '../../components/Counter.tsx';
import Chart from '../../components/Chart.vue';

# Interactive Content

Try this counter:

<Counter client:load count={0} />

And here's a chart:

<Chart client:visible data={chartData} />
```

### Frontmatter in MDX

Access frontmatter in your MDX:

```mdx theme={null}
---
layout: ../../layouts/BlogLayout.astro
title: Post Title
tags: ['astro', 'mdx']
---

# {frontmatter.title}

Tags: {frontmatter.tags.join(', ')}
```

## Markdoc

Markdoc is a powerful, flexible content authoring format from Stripe.

<Note>
  The Markdoc integration is currently experimental.
</Note>

### Installation

```bash theme={null}
npx astro add markdoc
```

### Configuration

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import markdoc from '@astrojs/markdoc';

export default defineConfig({
  integrations: [markdoc()],
});
```

### Custom Tags and Nodes

Create custom Markdoc tags:

```js title="markdoc.config.mjs" theme={null}
import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';

export default defineMarkdocConfig({
  tags: {
    callout: {
      render: component('./src/components/Callout.astro'),
      attributes: {
        type: { type: String, default: 'info' },
      },
    },
  },
});
```

Use in Markdoc:

```markdoc theme={null}
{% callout type="warning" %}
This is a warning!
{% /callout %}
```

## Utility Integrations

<CardGroup cols={2}>
  <Card title="Sitemap" icon="sitemap">
    Automatically generate a sitemap.xml
  </Card>

  <Card title="Partytown">
    Relocate scripts to a web worker for better performance
  </Card>
</CardGroup>

## Sitemap

The Sitemap integration automatically generates a `sitemap.xml` file for your site.

### Installation

```bash theme={null}
npx astro add sitemap
```

### Configuration

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap(),
  ],
});
```

<Warning>
  You must set the `site` option in your Astro config for the sitemap to work.
</Warning>

### Options

```ts theme={null}
sitemap({
  // Filter pages to include
  filter: (page) => !page.includes('/admin/'),
  
  // Customize URLs
  customPages: [
    'https://example.com/custom-page',
  ],
  
  // Change priority and frequency
  changefreq: 'weekly',
  priority: 0.7,
  
  // i18n configuration
  i18n: {
    defaultLocale: 'en',
    locales: {
      en: 'en-US',
      es: 'es-ES',
    },
  },
  
  // Serialize each entry
  serialize: (item) => {
    if (item.url.includes('/blog/')) {
      item.changefreq = 'daily';
      item.priority = 0.9;
    }
    return item;
  },
})
```

### Generated Output

The sitemap will be generated at `/sitemap-index.xml` and includes all static routes:

```xml theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
  </url>
  <url>
    <loc>https://example.com/about/</loc>
  </url>
  <url>
    <loc>https://example.com/blog/post-1/</loc>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
  </url>
</urlset>
```

## Partytown

Partytown relocates resource-intensive scripts into a web worker, freeing up the main thread.

### Installation

```bash theme={null}
npx astro add partytown
```

### Configuration

```js title="astro.config.mjs" theme={null}
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  integrations: [
    partytown({
      // Configure which scripts to move to web worker
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});
```

### Options

```ts theme={null}
partytown({
  config: {
    // Forward specific methods to main thread
    forward: ['dataLayer.push', 'gtag'],
    
    // Debug mode
    debug: false,
    
    // Resolve URLs
    resolveUrl: (url) => {
      if (url.hostname === 'example.com') {
        const proxyUrl = new URL('https://my-proxy.com');
        proxyUrl.searchParams.append('url', url.href);
        return proxyUrl;
      }
      return url;
    },
  },
})
```

### Usage Example

Add the `type="text/partytown"` attribute to scripts you want to run in a web worker:

```astro title="src/pages/index.astro" theme={null}
---
// ...
---

<html>
  <head>
    <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js"></script>
    <script type="text/partytown">
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_MEASUREMENT_ID');
    </script>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>
```

### Common Use Cases

* Google Analytics / Google Tag Manager
* Facebook Pixel
* Third-party analytics scripts
* Heavy third-party libraries

## DB (Database)

Astro DB provides a fully-managed SQL database designed for Astro.

<Info>
  Astro DB is available in Astro 4.5 and later.
</Info>

### Installation

```bash theme={null}
npx astro add db
```

### Define Your Schema

```ts title="db/config.ts" theme={null}
import { defineDb, defineTable, column } from 'astro:db';

const Author = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    name: column.text(),
    email: column.text({ unique: true }),
  },
});

const Post = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    title: column.text(),
    body: column.text(),
    authorId: column.number({ references: () => Author.columns.id }),
    published: column.date(),
  },
});

export default defineDb({
  tables: { Author, Post },
});
```

### Query Your Database

```astro title="src/pages/blog.astro" theme={null}
---
import { db, Post, Author } from 'astro:db';

const posts = await db
  .select()
  .from(Post)
  .innerJoin(Author, eq(Post.authorId, Author.id));
---

<ul>
  {posts.map(post => (
    <li>
      <h2>{post.title}</h2>
      <p>By {post.Author.name}</p>
    </li>
  ))}
</ul>
```

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Frameworks" href="/integrations/ui-frameworks">
    Add React, Vue, Svelte, and other UI frameworks
  </Card>

  <Card title="SSR Adapters" href="/integrations/adapters">
    Deploy with server-side rendering
  </Card>
</CardGroup>