MDX Example

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

internal-link

external-link

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

const x = 1;

export default function() {
  return <div>{x}</div>;
}

x = 1

def some_function(**args)
  args[:foo]
end

$ cat $(find . -name "*.js" | grep -v "bundle") | esbuild --bundle --minify > bundle.js

console.log("Hello, world");

Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the clickable button below.

More Links

• MDX Syntax Documentation
• Astro Usage Documentation
• Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.