• Created:2026/02/09
• Updated:2026/02/09
• Author:
  Takeshi Takatsudo

MDX / JSX

The formatter preserves MDX-specific syntax including JSX components, import/export statements, and expressions. Several configurable options control JSX formatting — see the Options section.

Rules

• JSX components are preserved
• Import/export statements are maintained
• Self-closing tags remain self-closing
• Blank lines are inserted between consecutive JSX components
• Multi-line JSX formatting is handled by the formatMultiLineJsx option

Examples

Self-closing JSX component

Before:

<Youtube url="https://example.com" />

After (unchanged):

<Youtube url="https://example.com" />

Import statements

Before:

import { Component } from "./component";

# Content

After (unchanged — imports preserved):

import { Component } from "./component";

# Content

Export statements

Before:

export const meta = { title: "Test" };

# Content

After (unchanged — exports preserved):

export const meta = { title: "Test" };

# Content

Blank lines between consecutive JSX components

Before:

<Youtube url="https://youtu.be/59CxE076HDM" />
<Youtube url="https://youtu.be/MsfVwQ3i4xg" />
<Youtube url="https://youtu.be/-0dyIu5RekY" />

After:

<Youtube url="https://youtu.be/59CxE076HDM" />

<Youtube url="https://youtu.be/MsfVwQ3i4xg" />

<Youtube url="https://youtu.be/-0dyIu5RekY" />

JSX after text

Before:

そんなわけで、以下がVol.1の内容となります。
<ExImg src="/images/p/hero" extraWide alt="メルマガ写真" />

After:

そんなわけで、以下がVol.1の内容となります。

<ExImg src="/images/p/hero" extraWide alt="メルマガ写真" />

Multi-line JSX formatting

Controlled by the formatMultiLineJsx option:

Before:

<ExImg src="/images/p/oxi-one-display" className="mx-auto md:ml-0" restrictedWidth="500"
  alt="Display: Sequencer Mode"
/>

After:

<ExImg
  src="/images/p/oxi-one-display"
  className="mx-auto md:ml-0"
  restrictedWidth="500"
  alt="Display: Sequencer Mode" />