npm i @svelte-put/toc


Useful svelte stuff to put in your projects

by Quang Phan

3.0.2 (see all)License:MITTypeScript:Built-In
npm i @svelte-put/toc


npm.badge bundlephobia.badge docs.badge repl.badge

Svelte use:toc action for building table of contents


This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

  import { toc, createTocStore, toclink } from '@svelte-put/toc';
  const tocStore = createTocStore();

<main use:toc={{ store: tocStore, observe: true }}>
  <h1>Page Heading</h1>

    <h2>Table of Contents</h2>
    {#if Object.values($tocStore.items).length}
        {#each Object.values($tocStore.items) as tocItem}
            <!-- svelte-ignore a11y-missing-attribute -->
            <a use:toclink={{ store: tocStore, tocItem, observe: true }} />

    <h2>Section Heading Level 2</h2>

    <h3>Section Heading Level 3</h3>
  <!-- ... -->


This package relies on svelte action strategy and attempts to stay minimal. If you are looking for a declarative, component-oriented solution, check out Janosh's svelte-toc.


No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate