Welcome to Markdown Input Renderer

This playground demonstrates the custom markdown processing pipeline used in this project.

Processing Pipeline

text

1Markdown String
2  ↓ gray-matter (extract frontmatter)
3Markdown Content
4  ↓ remark-parse (unified)
5Markdown AST (mdast)
6  ↓ remark-gfm
7Enhanced Markdown AST (tables, strikethrough, etc.)
8  ↓ remark-rehype
9HTML AST (hast)
10  ↓ rehype-raw (parse raw HTML nodes)
11  ↓ rehype-unwrap-images (cleanup <p> wrappers)
12Processed HTML AST
13  ↓ rehype-react (with custom component mappings)
14React Elements (JSX)
15  ↓ <Prose> wrapper
16Final Rendered Output
17

Features

GitHub Flavored Markdown support (tables, strikethrough, task lists)
Custom component mappings (Next.js Image, Link, CodeBlock)
Syntax highlighting for code blocks
Security: URL sanitization and XSS prevention
Automatic image dimension detection

Try it out!

Edit this text and see the preview update in real-time.

Code Example

typescript

1import md from "@/lib/md";
2
3const parsed = await md.parse(markdown);
4const rendered = md.render(parsed);
5

Images

Tables

Header	Header	Header
Item	Item	Item
Item	Item	Item

Note: This preview uses the exact same pipeline as the blog system.

Processing Pipeline

text

1Markdown String
2  ↓ gray-matter (extract frontmatter)
3Markdown Content
4  ↓ remark-parse (unified)
5Markdown AST (mdast)
6  ↓ remark-gfm
7Enhanced Markdown AST (tables, strikethrough, etc.)
8  ↓ remark-rehype
9HTML AST (hast)
10  ↓ rehype-raw (parse raw HTML nodes)
11  ↓ rehype-unwrap-images (cleanup <p> wrappers)
12Processed HTML AST
13  ↓ rehype-react (with custom component mappings)
14React Elements (JSX)
15  ↓ <Prose> wrapper
16Final Rendered Output
17

Try it out!

Edit this text and see the preview update in real-time.

Code Example

typescript

1import md from "@/lib/md";
2
3const parsed = await md.parse(markdown);
4const rendered = md.render(parsed);
5

Links

Images

Tables

Header

Item

Note: This preview uses the exact same pipeline as the blog system.