Welcome

This is a live demo of MDXEditor with all default features on.

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

Daring Fireball

Supported markdown elements:

• Headings
• Lists
  • Unordered
  • Ordered
  • Check lists
  • Nested
• Links
• Bold, italic, and underline formatting
• Tables
• Code block editors
• Math and diagrams

The editor content is styled using the @tailwindcss/typography plugin.

Test editor features

Use this space to test markdown rendering and editing behavior. Switch to source mode using the toggle in the top right, paste markdown content, and toggle back to rich text mode.

Things you can try:

1. Add your own code sample
2. Change heading levels
3. Insert a table and add rows or columns
4. Switch to raw markdown source to inspect output
5. Test the diff feature to see changes
6. Add frontmatter properties

Code sample

MDXEditor embeds CodeMirror for code editing:

1
export default function App() {
2
  return (<div>Hello world</div>)
3
}

Live component example

The block below is a live React component. You can configure multiple live code presets that specify available npm packages and default imports:

1
export default function App() {
2
  return (
3
    <div>
4
      <p>This is a React JSX in action</p>
5
    </div>
6
  )
7
}

Tables and math

Play with the table below: add rows, columns, and change column alignment. Navigate cells with Enter, Shift+Enter, Tab, and Shift+Tab.

LaTeX is supported with KaTeX:

To solve the cubic equation $t^3 + pt + q = 0$ (where the real numbers $p, q$ satisfy ${4p^3 + 27q^2} > 0$) one can use Cardano’s formula:

$$\sqrt[{3}]{ -\frac{q}{2} +\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}} }+ \sqrt[{3}]{ -\frac{q}{2} -\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}} }$$

For any $u_1, \dots, u_n \in \mathbb{C}$ and $v_1, \dots, v_n \in \mathbb{C}$, the Cauchy-Bunyakovsky-Schwarz inequality can be written as follows:

$$\left| \sum_{k=1}^n {u_k \bar{v_k}} \right|^2 \leq { \left( \sum_{k=1}^n {|u_k|} \right)^2 \left( \sum_{k=1}^n {|v_k|} \right)^2 }$$

Finally, the determinant of a Vandermonde matrix can be calculated using the following expression:

$$\begin{vmatrix} 1 & x_1 & x_1^2 & \dots & x_1^{n-1} \\ 1 & x_2 & x_2^2 & \dots & x_2^{n-1} \\ 1 & x_3 & x_3^2 & \dots & x_3^{n-1} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & x_n & x_n^2 & \dots & x_n^{n-1} \\ \end{vmatrix} = {\prod_{1 \leq {i,j} \leq n} {(x_i - x_j)}}$$Three famous mathematical formulas on MDN

Mermaid diagrams

Here is a test of Mermaid diagram support:

graph TD
    A[Start Development] --> B(Write Code)
    B --> C{Verify with typecheck?}
    C -->|Yes| D[Run Astro Build]
    C -->|No| E[Fix Errors]
    E --> B
    D --> F[Deploy to Hosting]

GitHub-style callouts

Here are tests for GitHub-style blockquote alerts:

[!NOTE] This is a useful note detailing background context or general information.

[!TIP] This is a helpful tip or optimization suggestion for improved performance.

[!IMPORTANT] This represents essential requirements or key steps critical for completion.

[!WARNING] This warning alerts you to potential breaking changes or security issues.

[!CAUTION] This caution represents high-risk actions that could cause data loss or bugs.

Emojis and task lists

Test emojis and checkboxes:

• 🎉 Emojis are enabled.
• 🚀 Fast loading times.

• Check icon maps updated
• Tested devicon integration
• Deploy production build

Syntax highlighting with Expressive Code

This code block demonstrates line highlighting, focus states, and collapsible sections:

1
// Highlight lines 1 and 5-7
2
import { getTechIconClass } from '@/lib/tech-icons';
3

4
export function demonstrateIcons() {
5
  const reactIcon = getTechIconClass('react');
6
  const tailwindIcon = getTechIconClass('tailwind');
7
  const gcpIcon = getTechIconClass('gcp');
8

4 collapsed lines
9
  // This section is collapsed by default
10
  console.log('React icon class:', reactIcon);
11
  console.log('Tailwind icon class:', tailwindIcon);
12
  console.log('GCP icon class:', gcpIcon);
13

14
  return { reactIcon, tailwindIcon, gcpIcon };
15
}

HTML details element