MDX

MDX lets you use JavaScript and JSX components inside your Markdown files.

Prerequisites

Use .mdx instead of .md for the file extension.

Configuration

Reference MDX files the same way as Markdown files:

// scalar.config.json
{
  "$schema": "https://cdn.scalar.com/schema/scalar-config-next.json",
  "scalar": "2.0.0",
  "navigation": {
    "routes": {
      "/example": {
        "title": "Example",
        "type": "page",
        "filepath": "docs/content/example.mdx" // .mdx extension
      }
    }
  }
}

Frontmatter

Add metadata at the top of your MDX files:

---
title: "Page Title"
description: "Page description for SEO"
---

# Content

This is the content of the page.

Importing Components

Import and use other MDX files as components:

// Import MDX from other files
import Intro from './intro.mdx'

<Intro />

# Example

This is **Markdown**.

And this how the other

# Introduction

This MDX file serves as an imported component in another MDX document.

You can include any Markdown or JSX content here to be reused elsewhere.

JSX Elements

Use JSX directly in your content:

<div style={{ padding: "16px", border: "3px dashed #ccc", borderRadius: "8px", margin: "16px 0" }}>
  Custom styled content
</div>

Custom Styles

Interactive elements work too:

<button onClick={() => alert("Hello!")}>
  Click me
</button>

Expressions

Embed JavaScript expressions using curly braces:

The current year is {new Date().getFullYear()}.

The current year is 2026.

HTML/CSS/JS

Markdown Support