Using MDX

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

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.

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

Example

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.

Embedded component in MDX

Líneas: datos medidos

A line chart accepts numeric { x, y } values. Hover a line or its legend item to isolate it.

Visualizaciones semanales

Líneas: sin puntos ni cuadrícula

Use showPoints={false} and showGrid={false} for a quieter chart.

Tiempo de renderizado optimizado

Líneas: toggle de dos estados

A line chart can optionally cycle between two states with one toggle.

Calidad de imagen

Curvas: funciones

A curve chart samples a JavaScript function across xDomain, which is useful for benchmarks and projections.

Tiempo de renderizado

Curvas: funciones matemáticas

Functions can also describe waves, thresholds, or other models.

Modelos de señal

Barras: comparar categorías

Use bar for grouped vertical bars. Each point’s x value becomes a category label.

Coste del proyecto

Torre: una serie de costes

tower is a compact alias for a single-series vertical cost graph.

Coste mensual

Rendimiento por vatio: GPUs modernas

Cada punto representa una GPU en un juego concreto. El eje X muestra el consumo en vatios y el eje Y los FPS medios; al pasar por encima de un punto aparece el juego y el resultado exacto.

Rendimiento por vatio en GPUs

Log picture profiles