Markdown Heading Hierarchy Visualizer Online

Markdown Heading Hierarchy Visualizer

See how your Markdown document is structured at a glance.

Markdown Heading Hierarchy Visualizer

Paste Markdown and this tool parses every # heading into an interactive, collapsible tree.
It detect skipped levels, see the nesting, and count H1–H6 headings.

Load an example

Upload a file

Input

Output

No headings found yet. Paste Markdown with # headings and click "Visualize Hierarchy".

1. Tree display

Expand all nodes

Expand the whole tree, or start collapsed and drill in.

Initial expansion depth: Auto-collapse nodes nested deeper than this level

2. Heading Statistics

Click "Visualize Hierarchy" to see the H1–H6 counts here.

Copy Outline Download Outline

Ready to visualize the heading hierarchy.

Overview

This Markdown Heading Hierarchy Visualizer is a free, browser-based tool that reads your Markdown and shows its heading structure as an interactive, collapsible tree. It turns the flat text of a document into a visual outline you can expand, collapse, and inspect: a # Title, ## Section, ### Subsection, and so on.

What it does: It parses every ATX heading (# to ######) in your text, nests each heading under the nearest preceding heading of a lower level, and renders the result as a tree. It also counts how many H1–H6 headings your document contains, so skipped levels and lopsided sectioning become obvious at a glance.

Why it is useful: A clean heading hierarchy is the backbone of readable documents. Screen readers and assistive technology rely on well-ordered headings to let users navigate, search engines use them to understand your content, and a good outline helps you (or your collaborators) keep a long post organized. Because everything runs locally in your browser, your Markdown never leaves your device.

How it is built: Under the hood it uses a straightforward stack-based nesting algorithm, a classic "build a tree from flat lines" technique. Each heading in sequence becomes a node; as long as a new heading is deeper than the current one, the previous heading stays open as its parent, and the tree closes branch levels as headings return to a shallower depth. This is the same technique used to convert a list of headings into an outline or table of contents.

How to Use This Tool

1. Add your Markdown: Paste or type it into the "Input" field, click "Upload a file" to load a .md or .txt file, or use "Load an example" to try a sample.

2. Set the tree options: "Expand all nodes" renders the tree fully open by default; switch it off to start collapsed. "Initial expansion depth" auto-collapses headings deeper than the number you choose, so a very long document shows its big-picture outline first.

3. Visualize: Click the "Visualize Hierarchy" button. The interactive tree appears in the "Output" panel, and the heading counts populate the statistics box.

4. Explore and use: Click any node’s toggle to collapse or expand just that branch, then copy or download the flattened outline with the Copy/Download links, or press "Clear & Reset" to start over.

Examples

Every example loads its own Markdown - click "Try it", then press "Visualize Hierarchy".

1. A well-nested document outline

A correctly structured cookbook page: one H1 title, H2 for the main parts, and H3 subsections nested under them.

Input

# Weeknight Pasta Cookbook

## Why Fresh Pasta Wins

### Time and effort
### Ingredients to stock

## Core Recipes

### Classic Tomato Sauce
### Creamy Alfredo

## Meal Planning

### Freezer-friendly batches
### Quick one-pan dinners

Flat outline

H1  Weeknight Pasta Cookbook
  H2  Why Fresh Pasta Wins
    H3  Time and effort
    H3  Ingredients to stock
  H2  Core Recipes
    H3  Classic Tomato Sauce
    H3  Creamy Alfredo
  H2  Meal Planning
    H3  Freezer-friendly batches
    H3  Quick one-pan dinners

2. A skipped heading level

Here the plan jumps from H2 straight to H4 under "Infrastructure" - a level-3 heading is missing. The tree makes the gap easy to spot when you review it.

Input

# Website Relaunch

## Design

### Moodboard
### Color palette

## Infrastructure

#### Domain setup
#### Hosting plan

## Content

Flat outline

H1  Website Relaunch
  H2  Design
    H3  Moodboard
    H3  Color palette
  H2  Infrastructure
      H4  Domain setup
      H4  Hosting plan
  H2  Content

3. Headings inside code blocks are ignored

Any # lines inside fenced code blocks (``` or ~~~) are not real document headings, so they are left out of the tree.

Input

# README Example

## Installation

```
# this is code, not a heading
npm install
```

## Usage

```js
// # also ignored here
console.log("hello");
```

Flat outline

H1  README Example
  H2  Installation
  H2  Usage

4. Front matter and body text are ignored

YAML front matter at the top and ordinary paragraphs never produce headings - only # lines do.

Input

---
title: Trip Notes
date: 2026-06-01
---

# Summer Road Trip

## Day One: Mountains

We started early and climbed the ridge.

## Day Two: Coast

## Day Three: Home

Flat outline

H1  Summer Road Trip
  H2  Day One: Mountains
  H2  Day Two: Coast
  H2  Day Three: Home

5. A deep, nested document

A manual with nested levels great for trying the "Initial expansion depth" control - start collapsed and drill into the deep sections.

Input

# Team Handbook

## Onboarding

### First Week

#### Tools Setup
##### Email and chat
##### Project tracker
#### Shadowing Plan

### First Month

## Communication

### Meetings
### Async Updates

## Leave Policy

Flat outline

H1  Team Handbook
  H2  Onboarding
    H3  First Week
      H4  Tools Setup
        H5  Email and chat
        H5  Project tracker
      H4  Shadowing Plan
    H3  First Month
  H2  Communication
    H3  Meetings
    H3  Async Updates
  H2  Leave Policy

6. Multiple top-level headings

A short document can use several H1s - the tree shows each one as a top-level node and keeps their subsections separate.

Input

# Apples

## Varieties
## Storage

# Oranges

## Nutritional Value
## Preserving

Flat outline

H1  Apples
  H2  Varieties
  H2  Storage
H1  Oranges
  H2  Nutritional Value
  H2  Preserving

Features & Options

ATX heading parsing (H1–H6): Every line that starts with one to six # characters followed by a space or the end of the line is treated as a heading. The heading text is kept intact.

Code-block awareness: Headings appearing inside fenced code blocks (``` or ~~~) are ignored, so the outline reflects only the real document structure.

Interactive collapsible tree: The result is rendered as a nested tree. Each node has a toggle to expand or collapse its branch; a +/– control appears whenever a node has children.

Expand all nodes: On by default, renders the entire tree open. Switch it off to start with everything collapsed and open only the sections you care about.

Initial expansion depth: Auto-collapses nodes nested deeper than the chosen number of levels. For a large document, setting this to 2 keeps the first two levels open and folds everything below them, so you get a high-level overview first.

Heading statistics: A count of every H1–H6 heading in the document, plus a total, so you can verify a single top-level title or check section balance at a glance.

Copy & Download outline: "Copy Outline" copies the flattened, indented outline to your clipboard; "Download Outline" saves it as a text file, handy for turning the result into a table of contents.

Load an example & Upload a file: Load one of the sample documents, or read a local .md/.txt file straight into the input.

When to Use This Tool?

Before publishing a blog post or tutorial, check that your headings form a clean outline and that no level is accidentally skipped.

Review a long README, handbook, or report to see at a glance whether it is balanced and logically nested before sharing it.

Convert a finished document’s heading structure into a plain indented outline, ready to paste into a table of contents or overview page.

Audit an existing document for accessibility or SEO - screen readers and search engines both favor a predictable H1–H2–H3 order.

FAQs

FAQ 1: Which heading styles does this tool recognize?
Answer: It recognizes ATX headings written with the hash symbol - from # (H1) up to ###### (H6). At least one # is counted and the text after the # is kept. Setext headings (text underlined with === or ---) are not detected.

FAQ 2: Why are headings inside code blocks missing from my tree?
Answer: Lines inside fenced code blocks (``` or ~~~) are code samples, not document structure. The tool deliberately skips them so the outline only reflects real headings a reader would see.

FAQ 3: What does the "Initial expansion depth" option do?
Answer: It auto-collapses nodes that are nested deeper than the number you set. With a value of 2, the top-level headings and their children stay open while everything nested deeper starts collapsed, so a very large document is easier to scan from the top. Set it to 6 (or leave the field empty) to keep the whole tree expanded.

FAQ 4: How does the tree decide where each heading belongs?
Answer: Using a stack-based nesting algorithm. Each heading is placed under the nearest preceding heading of a lower level. A deeper heading (like ### Tools) nests under the most recent shallower heading (## Setup); when a heading returns to a shallower level, the previous branch closes.

FAQ 5: My document has several H1 headings - is that a problem?
Answer: Many style guides prefer a single H1, but the visualizer does not judge. It simply shows each top-level # as its own root node. The statistics panel shows how many H1s you have so you can decide.

FAQ 6: Is my Markdown private?
Answer: Yes. The tool runs entirely in your browser with JavaScript. Your text is never uploaded to or stored on our servers.