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.

In here, you can find the following markdown elements:

• Headings
• Lists
  • Unordered
  • Ordered
  • Check lists
  • And nested ;)
• Links
• Bold/Italic/Underline formatting
• Tables
• Code block editors
• And much more.

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

What can you do here?

This is a great location for you to test how editing markdown feels. If you have an existing markdown source, you can switch to source mode using the toggle group in the top right, paste it in there, and go back to rich text mode.

If you need a few ideas, here’s what you can try:

1. Add your own code sample
2. Change the type of the headings
3. Insert a table, add a few rows and columns
4. Switch back to source markdown to see what you’re going to get as an output
5. Test the diff feature to see how the markdown has changed
6. Add a frontmatter block through the toolbar button

A code sample

MDXEditor embeds CodeMirror for code editing.

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

A live code example

The block below is a live React component. You can configure multiple live code presets that specify the available npm packages and the default imports. You can also specify a default component that will be rendered in the live code block.

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

A table

Play with the table below - add rows, columns, change column alignment. When editing, you can navigate the cells with enter, shift+enter, tab and shift+tab.

$\LaTeX$ is fully 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 (Mozilla Docs)

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 / Alerts

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 & Checklists

Let’s test emojis and checkboxes:

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

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

Advanced Code Highlighting (Expressive Code)

This code block showcases 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 & Summary