Ttooleras
📑

Table of Contents Generator

Web Tools

Auto-generate a table of contents from markdown headings or HTML with custom depth, anchor slugs, numbering, and output styles for READMEs, documentation, and articles.. Free, private — all processing in your browser.

This tool is coming soon. Check back later!

Advertisement

A good README or long doc deserves a table of contents. Scrolling a 3,000-line markdown file to find section 17 is no one's idea of fun, and adding a TOC at the top shrinks navigation to a single click. But maintaining a TOC manually is a recipe for staleness — you add a heading and forget to update the TOC, rename a section and the anchor links break. This generator reads your markdown (or HTML), extracts the headings, and outputs a clean nested TOC with working anchor links in one step.

The generator understands how GitHub and most static site generators produce anchor IDs. It slugifies heading text the same way — lowercase, spaces to dashes, punctuation stripped — so the links you generate here actually work on the rendered page. You can override the slugify rules if your target platform uses a different convention (MkDocs, Docusaurus, Hugo, Jekyll all differ slightly).

Depth is configurable. Include only H1 and H2 for a high-level summary, or go all the way to H6 for deeply nested docs. Numbering can be off (plain bullet list), decimal (1.1, 1.2, 1.2.1), or fully nested with custom prefixes. The output is markdown bullet list by default with anchor links, but you can switch to HTML <ul> for sites that need inline HTML or to plain text for emails and notes. Whatever you pick, re-run the generator when you add sections and paste the updated TOC back in — a 10-second maintenance task instead of a fiddly manual edit.

Table of Contents Generator — key features

Markdown and HTML input

Paste either format; the generator parses headings correctly in both.

Configurable depth

Set min-depth and max-depth to include exactly the heading levels you want.

Multiple output formats

Markdown bullet list, ordered list, HTML, or plain text.

Anchor-compatible slugs

Generates slugs matching GitHub, MkDocs, Docusaurus, Hugo, or Jekyll conventions.

Numbering options

Off, nested decimal (1.1, 1.2.1), or custom prefix.

Duplicate heading handling

Disambiguates collisions the same way renderers do, so your links work.

Exclude headings

Skip specific headings by name or marker when you don't want them in the TOC.

How to use the Table of Contents Generator

  1. 1

    Paste your document

    Paste the full markdown or HTML source. The generator extracts headings automatically.

  2. 2

    Choose slug style

    Pick the style matching your target renderer: GitHub default for most cases, or switch for MkDocs/Docusaurus/Hugo/Jekyll.

  3. 3

    Set depth and numbering

    Limit depth to H2-H4 for a compact TOC, or enable decimal numbering for a formal look.

  4. 4

    Preview the TOC

    Check the preview before copying. Nested items should match your document structure.

  5. 5

    Paste back into your doc

    Copy the TOC markdown and paste at the top of your README or docs page.

Common use cases for the Table of Contents Generator

READMEs and docs

  • :
  • :
  • :

Blog posts

  • :
  • :
  • :

Static site generators

  • :
  • :
  • :

Technical writing

  • :
  • :
  • :

Table of Contents Generator — examples

Simple bullet TOC

Default markdown output

Input
# Title\n## A\n## B
Output
- [A](#a)
- [B](#b)

Nested with numbering

Decimal numbering

Input
## Intro\n### Goals\n## Usage
Output
1. [Intro](#intro)
   1.1. [Goals](#goals)
2. [Usage](#usage)

HTML output

For sites using inline HTML

Input
markdown in
Output
<ul><li><a href='#slug'>Heading</a></li></ul>

Limited depth

H2-H3 only

Input
document with H1-H6
Output
only H2 and H3 appear in TOC

GitHub anchor slug

Punctuation stripped

Input
## What's New?
Output
- [What's New?](#whats-new)

Technical details

Markdown headings use #, ##, up to ###### to indicate H1 through H6. The generator scans the document for these prefixes (skipping over code blocks where # means a Python comment or shell script prompt) and builds a tree based on the hierarchy it finds. HTML inputs are parsed using the same hierarchy via <h1> through <h6> tags.

Anchor generation follows GitHub conventions by default: lowercase the heading, replace spaces with dashes, strip most punctuation, and append numeric suffixes when duplicate headings would collide. This matches GitHub's README rendering and is compatible with GitLab and most markdown-to-HTML renderers. Options exist for MkDocs Material (which uses underscores in some cases), Docusaurus (which allows explicit {#custom-id} attributes), Hugo (which uses Blackfriday's slug rules), and Jekyll (Kramdown).

The TOC output can be:
- Markdown bullet list with heading links (most common)
- Markdown ordered list with numbering preserved
- HTML <ul>/<ol> with <a href="#slug"> elements
- Plain text with indentation and no links (for emails and notes)

Depth is controlled by min-depth and max-depth settings. If your document starts with an H1 title and you want the TOC to skip it, set min-depth to 2. If you only want a top-level summary, set max-depth to 2 or 3. The tool also supports excluding specific headings by name or by a marker in the heading text (e.g., ## Section {no-toc}).

Common problems and solutions

Slug style mismatch

Default GitHub rules differ from MkDocs, Jekyll, and others. Pick the correct style or your anchor links will 404.

Duplicate headings

Two headings with the same text get numeric suffixes (heading, heading-1). Order matters — regenerate after inserting.

Headings inside code blocks

Some parsers pick up # inside code blocks as headings. The tool skips fenced blocks but double-check.

HTML headings with IDs

If your markdown includes raw HTML headings with custom ids, the tool uses the provided id instead of generating one.

Renaming sections

Changing a heading changes its slug. Update the TOC after any heading rename.

Sidebars vs inline TOC

Static site generators often want a separate sidebar config rather than an inline TOC. Check your framework.

Table of Contents Generator — comparisons and alternatives

Manual TOC maintenance is tedious and quickly goes stale. Tools like doctoc, markdown-toc, or npm packages work but require installation and setup. IDE plugins exist but lock you into one editor. Static site generators often build TOCs automatically for rendered pages, but many markdown hosts (GitHub, GitLab, internal wikis) show only what you put in the source file. This tool handles the full pipeline in the browser: input in markdown or HTML, pick a slug style matching your renderer, get a clean TOC with working anchor links, and paste back. Fast, accurate, and framework-aware.

Frequently asked questions about the Table of Contents Generator

Does GitHub auto-generate a TOC?

GitHub has a sidebar TOC on rendered markdown files but does not insert one in the file itself. You still need to add one manually or with this tool.

Why do my anchor links not work?

Slug style likely differs between generator and renderer. Check which style your platform uses and switch accordingly.

How do I exclude a heading from the TOC?

Add a marker like {no-toc} to the heading (if your platform strips it) or use the exclude list in the generator.

Can I add a TOC to a Notion page?

Notion has its own TOC block. Copy markdown with a TOC in the tool for reference but use Notion's built-in feature.

What about auto-updating TOCs?

Tools like doctoc can run as git pre-commit hooks to regenerate TOCs. This tool is best for one-shot generation.

Does it handle emoji in headings?

Yes. Emoji are preserved in the TOC link text and stripped from the slug following GitHub's rules.

Can I customize the prefix?

Numbering can use decimal (1.1), dashed, or custom text prefixes. Bullet style can be changed from - to *.

Should every doc have a TOC?

Only when the doc is long enough that readers will want to jump. A 500-word README usually does not need one.

Additional resources

Advertisement

Related tools

All Web Tools

Learn more

Explore more tools

200+ free tools that run in your browser.

Browse all tools →