Astro Table of Contents - Automatic TOC Generation for Astro

✨ Features

🔄 Automatic Generation

Automatically detects headings (h1, h2, h3, etc.) in your HTML content and generates a structured table of contents.

⚡ Native Astro Integration

Seamlessly integrates with Astro's integration system. No complex setup required.

🎨 Highly Customizable

Configure title, position, colors, depth levels, and styling to match your project's design.

📖 Quick Example

                    1. Install the package
                    npm i astro-table-of-contents
                

                    2. Configure in astro.config.mjs
                    import { defineConfig } from 'astro/config';
import { tableOfContents } from 'astro-table-of-contents';

export default defineConfig({
    integrations: [
        tableOfContents({
            title: 'Contents',
        }),
    ],
});
                

                    3. Use the component
                    ---
import TableOfContents from 'astro-table-of-contents/component';
---

<TableOfContents title="Page Contents" />

<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
                

📊 Project Stats

v1.0.16 Latest Version

1000 Downloads (Last Week)

Astro 4+ Compatible

🚀 Ready to Get Started?

Follow our comprehensive guide to integrate table of contents into your Astro project in minutes.

View Documentation Live Demo