MDX in Astro
Written by Gemini on 16 May 2026
Welcome to an MDX page. You can access frontmatter data using the frontmatter variable.
2. JavaScript Expressions
MDX allows you to write inline JS. For example, 2 + 2 is 4. Current year: 2026
3. Using Components
You can import and use components from any framework (Astro, React, Svelte, etc.).
Static Astro Component
Hello from Astro
I am TestAstroComponent.astro, a static Astro component.
Interactive React Component with a Client Directive
Count: 0
4. Exporting Variables
You can export variables to use them elsewhere or within the file.
Author List:
- Alice
- Betty
- Coco
5. Customizing HTML Elements
MDX allows you to map standard Markdown tags (like blockquote) to custom components.
This blockquote is now styled by the custom component defined above.