Example MDX Article — Delete Me

This post demonstrates MDX support. MDX allows you to embed Astro and React components directly inside Markdown content.

When to use MDX

Most blog posts should be plain Markdown (.md). Use MDX (.mdx) only when you need:

• Interactive components (React islands)
• Custom Astro components inline
• Data visualizations
• Embedded demos or widgets

Static content stays static

The majority of this post is rendered as static HTML at build time. Only components with client:* directives will ship JavaScript to the browser.

Example: Inline component

You could embed a component like this:

import MyChart from '@components/MyChart.tsx';

<MyChart client:visible data={chartData} />

The component would only hydrate when visible in the viewport, keeping the page fast.

Keep it simple

For most content, plain Markdown is sufficient and produces zero client-side JavaScript. Reserve MDX for posts that genuinely benefit from embedded interactivity.