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:

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

A code sample

MDXEditor embeds CodeMirror for code editing.

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

A code example

The block below is an editable React code sample.

export default function App() {
  return (<div>
  <p>This is an editable React component. </p>
  <p>Editing it will update the fenced codeblock in the markdown.</p>
  </div>)
}

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.

Item	In Stock	Price
Python Hat	True	23.99
SQL Hat	True	23.99
Codecademy Tee	False	19.99
Codecademy Hoodie	False	42.99

Click to view common myths about Chickenpox

Myth 1
Myth 2
Myth 3

💡 Tip

Drink plenty of fluids.

ℹ️Information

Chickenpox is caused by the varicella-zoster virus.

⚠️ Warning

Avoid scratching the blisters.

🚨Danger

Never give aspirin to children with suspected chickenpox unless advised by a doctor.

✅Success

Most healthy children recover completely within 1–2 weeks.

📝Note

Symptoms usually appear 10–21 days after exposure.

MDX Cheatsheet for Mackrov

This file contains every commonly used Markdown/MDX feature available without writing custom React components.

Headings

# Heading 1
 
#### Heading 4
 
##### Heading 5
 
###### Heading 6

Paragraph

This is paragraph one.
 
This is paragraph two.

Bold

**Bold Text**

Italic

*Italic Text*

Bold + Italic

***Bold Italic***

Strikethrough

~~Deleted Text~~

Horizontal Line

---

***

Inline Code

Use `npm install`

Code Block

```tsx
function App() {
  return <div>Hello</div>
}
```

Supports

JavaScript
TypeScript
React
HTML
CSS
JSON
Bash
Go
Python
Java
C#
SQL
YAML
Dockerfile

and many more.

Block Quote

> This is a quote.

Nested

> Level 1
>
>> Level 2

Unordered List

- Apple
- Orange
- Banana

Alternative

* Apple
* Orange
* Banana

Ordered List

1. First
 
2. Second
 
3. Third

Nested Lists

- Fruits
 
  - Apple
 
  - Mango
 
- Vegetables
 
  - Potato

Task Lists

- [x] Completed
 
- [ ] Pending
 
- [ ] Review

Tables

| Name | Age | City |
|------|----:|------|
| Yash | 26 | Bangalore |
| John | 30 | London |

Center

| Name | Age |
|:----:|:---:|
| A | 10 |

Left

| Name |
|:-----|

Right

| Price |
|------:|

Links

[Google](https://google.com)

Open in new tab (HTML)

<a href="https://google.com" target="_blank">
 
Google
 
</a>

Email

<example@gmail.com>

Automatic URL

<https://google.com>

Images (Your Component)

<Image
  src="/images/articles/my-post/image.webp"
  alt="Description"
/>

Emoji

Simply type

😀
 
🚀
 
📌
 
⚠️
 
✅
 
❌
 
💡
 
🔥
 
🎉

Escaping Characters

\#
 
\*
 
\`
 
\[

Footnotes (remark-gfm)

Chickenpox is contagious.[^1]
 
[^1]: WHO reference.

Definition Lists (HTML)

<dl>
 
<dt>Chickenpox</dt>
 
<dd>A viral disease.</dd>
 
</dl>

Keyboard Keys

<kbd>Ctrl</kbd>
 
<kbd>Shift</kbd>
 
<kbd>Enter</kbd>

Highlight

<mark>
 
Important
 
</mark>

Underline

<u>
 
Underline
 
</u>

Small Text

<small>
 
Copyright 2026
 
</small>

Superscript

x<sup>2</sup>

Subscript

H<sub>2</sub>O

Details / Accordion

<details>
 
<summary>
 
Click here
 
</summary>
 
Hidden content
 
</details>

HTML Line Break

<br />

Divider

<hr />

Center Content

<div align="center">
 
Centered Text
 
</div>

Right Align

<div align="right">
 
Right Text
 
</div>

Left Align

<div align="left">
 
Left Text
 
</div>

Inline HTML

<span style="color:red">
 
Hello
 
</span>

(Prefer CSS instead of inline styles.)

Video

<video
controls
width="100%">
 
<source
src="/videos/demo.mp4"
type="video/mp4"/>
 
</video>

Audio

<audio controls>
 
<source
src="/audio/song.mp3"/>
 
</audio>

YouTube (iframe)

<iframe
width="100%"
height="500"
src="https://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
 
</iframe>

Google Maps

<iframe
src="https://www.google.com/maps/embed?...">
 
</iframe>

PDF

<iframe
src="/files/file.pdf"
width="100%"
height="700">
 
</iframe>

SVG

<img
src="/images/logo.svg" />

HTML Comments

<!-- Hidden -->

Markdown Comments

Not supported.

Use HTML comments.

Check if Markdown supports...

Feature	Supported
Headings	✅
Lists	✅
Nested Lists	✅
Checklists	✅
Tables	✅
Code Blocks	✅
Images	✅
HTML	✅
Videos	✅
Audio	✅
iframe	✅
Details	✅
Footnotes	✅
Links	✅
Blockquotes	✅
Emoji	✅
Superscript	HTML
Subscript	HTML
Highlight	HTML
Underline	HTML

Things requiring custom React components

<Tip />
 
<Warning />
 
<Info />
 
<Note />
 
<Danger />
 
<Success />
 
<Accordion />
 
<Gallery />
 
<Tabs />
 
<Steps />
 
<FileTree />
 
<Terminal />
 
<GitHub />
 
<Tweet />
 
<YouTube />
 
<Mermaid />
 
<Math />
 
<Badge />
 
<Card />
 
<Callout />

These are powered by React, not Markdown.

Writing Style Recommendation

Use H2 for main sections.
Use H3 for subsections.
Keep paragraphs 2–5 lines.
Prefer images over long explanations.
Use tables for comparisons.
Use blockquotes for references.
Use code blocks for commands.
Use <details> for optional content.
Use custom callouts (<Tip>, <Warning>) for important notes.

MDX Cheatsheet

Everything that works out-of-the-box in Mackrov.