# Astro with MDX

import DocButton from '~/components/webkit/DocButton.vue';
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
import Container from '~/components/webkit/Container.vue';

<SectionBasicContent
    titleTag="h2"
    description="The Astro with MDX template deploys a new application based on Astro, using @astrojs/mdx to author content using MDX. This template combines the power of Markdown with the flexibility of JSX, allowing you to create dynamic, interactive content while maintaining the simplicity of Markdown syntax."
    buttons={[
      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-mdx", outlined: false, icon: "ai ai-azion", iconPos: "left" },
      { label: "View demo", link: "https://xue4sl944m.map.azionedge.net/", severity: "secondary", target:"_blank" }
    ]}
  >
    <Fragment slot="content">
        <div style="flex: 1; min-width: 300px;">
    | Item | Details |
    |:----------|:------|
    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-mdx) |
    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
    | Use Case | General |
  </div>
  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
    <img src="/assets/docs/images/uploads/template-showcase/astro/astro-mdx.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
  </div>
    </Fragment>
  </SectionBasicContent>

## About this template

This template is built with [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) and the @astrojs/mdx integration, which lets you author content in MDX. MDX blends Markdown with JSX, so you can drop interactive components straight into your prose while keeping the simplicity of Markdown for everyday writing. Running on Azion, the compiled pages are delivered via a distributed architecture for fast, globally distributed access.

## Key features

- Content authored in MDX, mixing Markdown with embedded components.
- @astrojs/mdx integration configured and ready to use out of the box.
- Interactive islands inside documents, with static rendering by default.
- One-click deployment to Azion's globally distributed global network.