PDF Viewer
Embed PDF documents in your notes with page navigation, zoom controls, and deep linking.
PDF Viewer
Embed PDF documents directly in your notes using Obsidian-style wikilink syntax. The viewer supports local files and external URLs, with built-in page navigation, zoom controls, and fullscreen mode.
Quick Start
Use wikilink syntax to embed PDFs:
![[document.pdf]]
For local PDFs stored in content/assets/pdfs/, just use the filename:
PDFs in content/assets/pdfs/ are copied to public/assets/pdfs/ during the build process. Run npm run gen to copy assets without rebuilding.
Page Deep Linking
Open a PDF at a specific page using the #page=N anchor:
![[document.pdf#page=5]]
| Syntax | Result |
|---|---|
![[file.pdf]] | Embed PDF, starts at page 1 |
![[file.pdf#page=5]] | Embed PDF, starts at page 5 |
[[file.pdf]] | Link to PDF file (no embed) |
Advanced: Component Props
For more control, use the PDFViewer component with additional props:
<PDFViewer
src="document.pdf"
height="500px"
id="my-pdf"
title="My Document"
/>
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | URL or filename of the PDF |
id | string | - | Unique identifier for URL deep linking with multiple PDFs |
title | string | - | Accessible label for the PDF |
height | string | responsive | Height of the viewer (default: 60vh mobile, 80vh desktop) |
When to Use Component Syntax
- Custom height:
<PDFViewer src="slides.pdf" height="400px" /> - Multiple PDFs on one page: Use
idfor URL deep linking - Accessibility: Add
titlefor screen readers
External URLs
Load PDFs from external sources using the component syntax:
<PDFViewer
src="https://arxiv.org/pdf/2301.12345.pdf"
title="arXiv Paper"
/>
External PDFs require the source server to allow cross-origin requests (CORS). Many academic repositories (arXiv, institutional sites) allow this, but some servers block it. If loading fails, the viewer displays an error.
URL Deep Linking
Share links that open a specific page using URL parameters. This works alongside the wikilink #page=N syntax.
Single Viewer
For a note with one PDF, use ?pdfPage=N:
/notes/my-note?pdfPage=5
Create shareable links: [see methodology on page 5](/notes/pdf-viewer?pdfPage=5).
Multiple Viewers
When using multiple PDFs, assign each an id:
<PDFViewer src="https://arxiv.org/pdf/1910.09336" id="external" />
<PDFViewer src="sample_indexed_v2.pdf" id="local" />
Link to specific pages in each:
/notes/pdf-viewer?pdfPage_external=3— Page 3 in the arXiv paper/notes/pdf-viewer?pdfPage_local=2— Page 2 in the local PDF/notes/pdf-viewer?pdfPage_external=5&pdfPage_local=4— Set both at once
Viewer Controls
The toolbar provides standard PDF controls:
| Control | Description |
|---|---|
| Page navigation | Previous/next buttons and direct page input |
| Zoom | Zoom in/out (50% to 300%), hidden on mobile to save space |
| Fullscreen | Expand to fill the screen |
The viewer supports text selection for copying. Select text just like you would in any document.
Responsive Height
The viewer automatically adapts to screen size:
- Mobile: 60vh (leaves room for note context)
- Desktop: 80vh (maximizes readability)
Override with the height prop if needed:
<PDFViewer src="slide-deck.pdf" height="500px" />
Mobile Experience
On mobile devices:
- Height caps at 60vh to preserve note context
- Zoom percentage is hidden to save toolbar space
- Touch-friendly button sizing
- Fullscreen mode available for focused reading