Skip to main content
svelte-pdf-mini

Research papers

Toc

Five table-of-contents views that follow the section being read.

The Toc parts read the sections found by Paper — from the PDF outline when present, otherwise from headings in the text — and highlight the one being read.

Anatomy 

<Paper.Root>
	<Toc.Tree />       <!-- nested -->
	<Toc.Flat />       <!-- numbered, with pages -->
	<Toc.Breadcrumb /> <!-- current path -->
	<Toc.Progress />   <!-- reading progress -->
	<Toc.Rail />       <!-- dots along the document -->
</Paper.Root>
<Paper.Root>
	<Toc.Tree />       <!-- nested -->
	<Toc.Flat />       <!-- numbered, with pages -->
	<Toc.Breadcrumb /> <!-- current path -->
	<Toc.Progress />   <!-- reading progress -->
	<Toc.Rail />       <!-- dots along the document -->
</Paper.Root>

Usage

Items expose data-active and data-in-path; every view accepts an item snippet to render items yourself. Clicking navigates with history.

API reference

Toc.Tree

`maxDepth` defaults to 3. Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop Type Default
maxDepth Deepest level shown (1 = top-level only). number 3
item Snippet<[TocItemSnippetProps]> —
empty Shown while analyzing or when no sections were found. Snippet<[{ status: PaperState['status'] }]> —
Data attributes data-activedata-depthdata-in-pathdata-pdf-tocdata-pdf-toc-groupdata-pdf-toc-item

Toc.Flat

`maxDepth` defaults to 1. Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop Type Default
maxDepth Deepest level shown (1 = top-level only). number 1
item Snippet<[TocItemSnippetProps]> —
empty Shown while analyzing or when no sections were found. Snippet<[{ status: PaperState['status'] }]> —
Data attributes data-activedata-depthdata-in-pathdata-partdata-pdf-tocdata-pdf-toc-groupdata-pdf-toc-item

Toc.Breadcrumb

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop Type Default
separator Snippet —
item Snippet<[TocItemSnippetProps]> —
Data attributes data-activedata-partdata-pdf-tocdata-pdf-toc-item

Toc.Progress

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop Type Default
item Snippet<[TocItemSnippetProps & { start: number; end: number }]> —
Snippet prop Type
progress number
Data attributes data-activedata-partdata-pdf-tocdata-pdf-toc-segment

Toc.Rail

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop Type Default
maxDepth Deepest level shown (1 = top-level only). Default 2. number 2
item Snippet<[TocItemSnippetProps]> —
Data attributes data-activedata-depthdata-in-pathdata-partdata-pdf-tocdata-pdf-toc-dot