Data attributes & CSS variables

Both tables are generated from the library source, so they match the version these docs were built from.

Data attributes

Parts expose their state as data-* attributes. Presence attributes (data-current, data-active, data-selected…) are empty strings when on and absent when off, so select them with [data-current] (Tailwind: data-[current]:…).

Part	Data attributes
`Document.Loading`	`data-pdf-loading`
`Document.Error`	`data-kinddata-pdf-error`
`Document.Password`	`data-pdf-passworddata-reason`
`Viewer.Root`	`data-columnsdata-page-framedata-page-themedata-pdf-viewerdata-statusdata-theme`
`Viewer.Focus`	`data-highlightdata-pdf-focusdata-pdf-focus-clip`
`Viewer.LinkLayer`	`data-kinddata-pdf-linkdata-pdf-link-layer`
`Viewer.LinkPreview`	`data-force-mountdata-kinddata-loadingdata-partdata-pdf-link-previewdata-pdf-link-preview-canvasdata-state`
`Viewer.BackButton`	`data-pdf-back-buttondata-state`
`Zoom.In`	`data-pdf-zoom-in`
`Zoom.Out`	`data-pdf-zoom-out`
`Zoom.Mode`	`data-activedata-pdf-zoom-mode`
`Zoom.Select`	`data-pdf-zoom-select`
`PageNav.Prev`	`data-pdf-page-prev`
`PageNav.Next`	`data-pdf-page-next`
`PageNav.Input`	`data-pdf-page-input`
`Find.Input`	`data-pdf-find-input`
`Find.Next`	`data-pdf-find-next`
`Find.Prev`	`data-pdf-find-prev`
`Find.Toggle`	`data-activedata-pdf-find-toggle`
`Find.Count`	`data-pdf-find-countdata-status`
`Find.Result`	`data-activedata-pagedata-partdata-pdf-find-result`
`Find.Layer`	`data-currentdata-otherdata-pdf-find-layerdata-pdf-find-match`
`Outline.Root`	`data-pdf-outlinedata-status`
`Outline.Tree`	`data-depthdata-pdf-outline-groupdata-pdf-outline-rowdata-pdf-outline-spacerdata-pdf-outline-toggledata-pdf-outline-treedata-state`
`Outline.Item`	`data-activedata-contains-activedata-depthdata-disableddata-pdf-outline-item`
`Thumbnails.Root`	`data-pdf-thumbnails`
`Thumbnails.Item`	`data-currentdata-partdata-pdf-thumbnaildata-pdf-thumbnail-canvasdata-rendered`
`Annotations.Root`	`data-pdf-annotation-announcer`
`Annotations.Layer`	`data-activedata-drawingdata-emojidata-partdata-pdf-annotation-focusdata-pdf-annotation-labeldata-pdf-annotation-layerdata-pdf-annotation-notedata-pdf-annotation-overlaydata-pdf-annotation-svgdata-pdf-annotation-uidata-pdf-draw-surfacedata-selecteddata-themedata-tooldata-underlay`
`Annotations.SelectionMenu`	`data-colordata-force-mountdata-partdata-pdf-annotation-uidata-pdf-selection-menudata-state`
`Annotations.Popover`	`data-activedata-force-mountdata-kinddata-partdata-pdf-annotation-popoverdata-pendingdata-state`
`Annotations.HoverCard`	`data-force-mountdata-partdata-pdf-annotation-hover-carddata-state`
`Annotations.Margin`	`data-hovereddata-layoutdata-partdata-pdf-annotation-margindata-pdf-annotation-uidata-pdf-margin-markerdata-pdf-margin-notedata-placementdata-selecteddata-side`
`Annotations.LineMarkers`	`data-hovereddata-lanedata-pdf-annotation-uidata-pdf-line-markerdata-pdf-line-markersdata-selecteddata-side`
`Annotations.List`	`data-kinddata-partdata-pdf-annotation-listdata-pdf-annotation-list-itemdata-selected`
`Annotations.Crop`	`data-pdf-annotation-crop`
`Annotations.Comment`	`data-modedata-partdata-pdf-annotation-commentdata-pdf-annotation-ui`
`Annotations.Tool`	`data-activedata-pdf-annotation-tool`
`Annotations.Color`	`data-activedata-pdf-annotation-color`
`Annotations.NoteEmoji`	`data-activedata-pdf-annotation-note-emoji`
`Paper.Layer`	`data-hovereddata-kinddata-pdf-backlink-targetdata-pdf-citationdata-pdf-crossrefdata-pdf-paper-layer`
`Paper.CitationCard`	`data-compactdata-force-mountdata-layoutdata-partdata-pdf-citation-carddata-state`
`Paper.CrossRefPreview`	`data-force-mountdata-kinddata-partdata-pdf-crossref-previewdata-state`
`Paper.Backlinks`	`data-force-mountdata-partdata-pdf-backlinksdata-state`
`Paper.References`	`data-citeddata-partdata-pdf-referencedata-pdf-references`
`Paper.Figures`	`data-kinddata-partdata-pdf-figuredata-pdf-figures`
`Paper.Headings`	`data-leveldata-pdf-headingdata-pdf-headingsdata-sectiondata-visible`
`Toc.Tree`	`data-activedata-depthdata-in-pathdata-pdf-tocdata-pdf-toc-groupdata-pdf-toc-item`
`Toc.Flat`	`data-activedata-depthdata-in-pathdata-partdata-pdf-tocdata-pdf-toc-groupdata-pdf-toc-item`
`Toc.Breadcrumb`	`data-activedata-partdata-pdf-tocdata-pdf-toc-item`
`Toc.Progress`	`data-activedata-partdata-pdf-tocdata-pdf-toc-segment`
`Toc.Rail`	`data-activedata-depthdata-in-pathdata-partdata-pdf-tocdata-pdf-toc-dot`
`Minimap.Root`	`data-activedata-currentdata-draggingdata-indexdata-kinddata-modedata-partdata-pdf-minimapdata-pdf-minimap-banddata-pdf-minimap-pagedata-pdf-minimap-trackdata-previewsdata-scrollabledata-variant`
`Minimap.Viewport`	`data-draggingdata-pdf-minimap-viewport`
`Minimap.Markers`	`data-kinddata-pdf-minimap-markerdata-pdf-minimap-markers`
`Minimap.Heatmap`	`data-pdf-minimap-heatdata-pdf-minimap-heatmap`
`Shortcut.Root`	`data-pdf-keydata-pdf-shortcut`

CSS variables

Read by the optional svelte-pdf-mini/styles.css. Set them on [data-pdf-viewer] (or any ancestor) to theme everything below.

Variable	Default
`--pdf-accent`	`rgb(37 99 235)`
`--pdf-find-current`	`rgb(255 120 0 / 0.55)`
`--pdf-find-current-stroke`	`rgb(230 90 0)`
`--pdf-find-match`	`rgb(255 200 0 / 0.38)`
`--pdf-focus-color`	`var(--pdf-accent, rgb(37 99 235))`
`--pdf-focus-duration`	`1.8s`
`--pdf-focus-ring`	`Highlight`
`--pdf-highlight-underlay-opacity`	`0.6`
`--pdf-marker-width`	`3px`
`--pdf-minimap-band`	`rgb(100 116 139 / 0.12)`
`--pdf-minimap-band-alt`	`rgb(100 116 139 / 0.2)`
`--pdf-minimap-band-edge`	`rgb(100 116 139 / 0.35)`
`--pdf-minimap-bg`	`color-mix(in srgb, currentColor 5%, transparent)`
`--pdf-minimap-find`	`rgb(245 158 11 / 0.8)`
`--pdf-minimap-find-current`	`rgb(234 88 12)`
`--pdf-minimap-marker-height`	`2px`
`--pdf-minimap-page-opacity`	`0.85`
`--pdf-minimap-section`	`rgb(71 85 105)`
`--pdf-minimap-viewport`	`rgb(100 116 139 / 0.22)`
`--pdf-minimap-viewport-active`	`rgb(100 116 139 / 0.32)`
`--pdf-page-bg`	`#fff`
`--pdf-page-border`	`rgb(0 0 0 / 0.12)`
`--pdf-page-radius`	`0`
`--pdf-page-shadow`	`0 1px 3px rgb(0 0 0 / 0.15), 0 4px 12px rgb(0 0 0 / 0.08)`
`--pdf-progress-height`	`6px`
`--pdf-rail-width`	`14px`
`--pdf-ref-hover`	`rgb(59 130 246 / 0.16)`
`--pdf-scale`	`1`
`--pdf-selection`	`color-mix(in srgb, AccentColor, transparent 60%)`
`--pdf-ui-bg`	`#fff`
`--pdf-ui-border`	`rgb(0 0 0 / 0.1)`
`--pdf-ui-fg`	`#1c1917`
`--pdf-ui-muted`	`#78716c`
`--pdf-ui-radius`	`10px`
`--pdf-ui-shadow`	`0 8px 28px rgb(0 0 0 / 0.16)`
`--pdf-viewport-focus-ring`	`none`

The viewer itself reads three layout variables: --pdf-page-gap (between pages, default 16px), --pdf-pages-padding (around them, default 16px) and --pdf-pages-aside (room fit modes leave beside the pages for side notes, default 0; see Viewer layout).

While a text selection is being dragged, the viewport has data-selecting: the default stylesheet lets the pointer through links, citations, cross-references and annotations then, so no preview opens and the selection can’t jump to an overlay. The viewport has no focus ring by default (it takes focus for keyboard scrolling); set --pdf-viewport-focus-ring (e.g. 2px solid Highlight) to show one.

Text boxes ([data-pdf-annotation-freetext], with data-font set to their family) take their typeface from --pdf-font-handwritten, --pdf-font-sans, --pdf-font-serif and --pdf-font-mono (see Text box fonts).

--pdf-scale (CSS pixels per PDF point) is set by the viewer on the pages container; read it in your own overlays. --annotation-color is set on each annotation element.