MDX

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://registry.scalar.com/@scalar/schemas/config",
  "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 is 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>

Click me

Expressions#

Embed JavaScript expressions using curly braces:

Code

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

Preview

The current year is 2026.

Updated Sep 24, 2026