Skip to main content
svelte-pdf-mini

Getting started

Quick start

From a minimal viewer to a reader with find, highlights and citation cards.

Load and show a document

Document.Root loads the PDF; Viewer.Root owns zoom, layout and navigation; Viewer.Viewport scrolls; Viewer.Pages renders every page with a canvas and a text layer.

<script>
	import { Document, Viewer } from 'svelte-pdf-mini';
	import 'svelte-pdf-mini/styles.css';
</script>

<Document.Root src="https://arxiv.org/pdf/1706.03762">
	<Viewer.Root zoomMode="page-width" style="height: 100dvh">
		<Viewer.Viewport style="height: 100%">
			<Viewer.Pages />
		</Viewer.Viewport>
	</Viewer.Root>
</Document.Root>
<script>
	import { Document, Viewer } from 'svelte-pdf-mini';
	import 'svelte-pdf-mini/styles.css';
</script>

<Document.Root src="https://arxiv.org/pdf/1706.03762">
	<Viewer.Root zoomMode="page-width" style="height: 100dvh">
		<Viewer.Viewport style="height: 100%">
			<Viewer.Pages />
		</Viewer.Viewport>
	</Viewer.Root>
</Document.Root>

Choose the page layers

Render pages yourself to pick their layers. Each layer is optional.

<Viewer.Pages>
	{#snippet children({ pageNumber })}
		<Viewer.Page {pageNumber}>
			<Viewer.Canvas />
			<Viewer.TextLayer />
			<Viewer.LinkLayer />
			<Viewer.Focus />
		</Viewer.Page>
	{/snippet}
</Viewer.Pages>
<Viewer.Pages>
	{#snippet children({ pageNumber })}
		<Viewer.Page {pageNumber}>
			<Viewer.Canvas />
			<Viewer.TextLayer />
			<Viewer.LinkLayer />
			<Viewer.Focus />
		</Viewer.Page>
	{/snippet}
</Viewer.Pages>

Add a toolbar

Controls are parts too, so they read the viewer from context. Bind any state you need.

<Viewer.Root bind:page bind:zoom>
	<header>
		<PageNav.Prev /> <PageNav.Input /> <PageNav.Next />
		<Zoom.Out /> <Zoom.Select /> <Zoom.In />
	</header>
	<Viewer.Viewport>…</Viewer.Viewport>
</Viewer.Root>
<Viewer.Root bind:page bind:zoom>
	<header>
		<PageNav.Prev /> <PageNav.Input /> <PageNav.Next />
		<Zoom.Out /> <Zoom.Select /> <Zoom.In />
	</header>
	<Viewer.Viewport>…</Viewer.Viewport>
</Viewer.Root>

Annotate and read like a researcher

Wrap the pages with Find.Root, Annotations.Root and Paper.Root, add their layers to each page and their floating parts anywhere inside.

<Find.Root>
	<Annotations.Root bind:annotations>
		<Paper.Root>
			<Viewer.Viewport>
				<Viewer.Pages>
					{#snippet children({ pageNumber })}
						<Viewer.Page {pageNumber}>
							<Viewer.Canvas />
							<Viewer.TextLayer />
							<Find.Layer />
							<Paper.Layer />
							<Annotations.Layer />
						</Viewer.Page>
					{/snippet}
				</Viewer.Pages>
			</Viewer.Viewport>
			<Annotations.SelectionMenu />
			<Annotations.Popover />
			<Paper.CitationCard />
		</Paper.Root>
	</Annotations.Root>
</Find.Root>
<Find.Root>
	<Annotations.Root bind:annotations>
		<Paper.Root>
			<Viewer.Viewport>
				<Viewer.Pages>
					{#snippet children({ pageNumber })}
						<Viewer.Page {pageNumber}>
							<Viewer.Canvas />
							<Viewer.TextLayer />
							<Find.Layer />
							<Paper.Layer />
							<Annotations.Layer />
						</Viewer.Page>
					{/snippet}
				</Viewer.Pages>
			</Viewer.Viewport>
			<Annotations.SelectionMenu />
			<Annotations.Popover />
			<Paper.CitationCard />
		</Paper.Root>
	</Annotations.Root>
</Find.Root>

The full reader below combines everything on this site — open the source tabs to see how.

Every root exposes its state class: bind:viewer, bind:store, bind:paper, bind:find. Use them for commands like viewer.focus({ dest: 'section.3' }) or store.exportPdf().