Git Conventional Commit & URL Converter
About Markdown AST Viewer
The Interactive Markdown AST (Syntax Tree) Visualizer renders an expandable, color-coded node tree for Markdown documents, linking AST nodes directly to source line numbers with real-time property inspection.
How to Use Markdown AST Viewer
Step 1
Enter Markdown text into the source editor.
Step 2
Click through the interactive AST tree nodes in the right panel.
Step 3
Inspect highlighted source coordinates corresponding to each selected node.
Step 4
Click "Copy Node Data".
Practical Use Cases for Markdown AST Viewer
Debugging Unified.js / Remark / Contentlayer Pipelines
Visually explore the parsed Markdown syntax tree to troubleshoot why custom unified plugins or Next.js MDX pipelines fail.
Learning Compiler & AST Fundamentals
Explore how lexical tokenizers break down text, code blocks, lists, and inline formatting into structured compiler objects.
Input & Output Examples
Inspecting AST for Blockquote with List
`> * Item A\n> * Item B`
Visual Node Tree: `Root` $\\rightarrow$ `Blockquote` $\\rightarrow$ `List (unordered)` $\\rightarrow$ `[ListItem, ListItem]`
Key Features & Performance
- ✓Expandable/collapsible interactive node hierarchy.
- ✓Click-to-highlight: clicking a node highlights its exact source code span in the Markdown editor.
- ✓Node inspector displaying attributes (`depth`, `url`, `alt`, `lang`, `ordered`).
- ✓100% Client-Side memory execution.
- ✓1-Click Copy node path or full AST.
Key Terminology & Definitions
AST (Abstract Syntax Tree)
A tree representation of the abstract syntactic structure of source code or markup where each node denotes a construct.
Remark Ecosystem
A popular JavaScript ecosystem of tools for parsing, transforming, and compiling Markdown using ASTs.