Keyboard shortcuts

Navigate, zoom, rotate and go fullscreen from the keyboard while focus is in the viewer, without stealing keys from the rest of your app.

Basics

Shortcuts work while focus is anywhere inside the viewer; click the page or Tab to the document area first.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Click the page (or Tab to it), then try ← →, + − 0, r and f. return <PdfViewer source="/samples/multipage.pdf" />; }

Keys	Action
`0`	Reset zoom to `defaultScale`.
`PageUp`	Previous page.
`PageDown`	Next page.
`ArrowLeft`	Previous page; a zoomed page scrolls horizontally first.
`ArrowRight`	Next page; a zoomed page scrolls horizontally first.
`Home`	First page.
`End`	Last page.
`+`	Zoom in (`=` also works).
`-`	Zoom out (`_` also works).
`r`	Rotate clockwise.
`Shift` + `R`	Rotate counter-clockwise.
`f`	Toggle fullscreen.
`Ctrl` + `F`	Focus the search field (`⌘+F` on macOS); `Enter` and `Shift+Enter` step through matches, `Escape` clears.

Generated from the source; see the Keyboard shortcuts reference.

Shortcuts never fire while typing in an input, select or text area, or with Alt, Ctrl or ⌘ held, so browser and app shortcuts keep working. Shift with arrows is left alone for text selection.

The toolbar is a single tab stop. Inside it, ← → Home End move between controls. On the ⋮ More actions button, Enter, Space or ↓ open the menu on its first item and ↑ on its last; inside the menu, arrows move and Esc closes it and returns focus.

Turning shortcuts off

keyboardShortcuts={false} disables the viewer’s shortcuts when your app uses the same keys. Toolbar, menu and form keys keep working.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Your app owns these keys: the viewer ignores them. The toolbar stays keyboard-operable. return <PdfViewer source="/samples/multipage.pdf" keyboardShortcuts={false} />; }

Customization

Focus indicators are CSS variables: --rpv-focus-ring and --rpv-focus-ring-offset for toolbar controls, --rpv-accent for the document area, thumbnails and links.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; // A stronger focus ring for the toolbar and a matching accent for the document area. const style = { '--rpv-focus-ring': '3px solid #facc15', '--rpv-focus-ring-offset': '3px', '--rpv-accent': '#ca8a04', } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" style={style} />; }

See the customization guide and Accessibility.

Advanced / escape hatch

To bind different keys, turn the built-in shortcuts off and call the imperative API from your own key handler:

const viewer = useRef<PdfViewerApi>(null);

useEffect(() => {
  const onKey = (event: KeyboardEvent) => {
    if (event.key === 'j') viewer.current?.nextPage();
    if (event.key === 'k') viewer.current?.previousPage();
  };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

<PdfViewer ref={viewer} source={url} keyboardShortcuts={false} />;

Limitations

Keys cannot be remapped. The key map is fixed. Workaround: disable it and handle keys yourself, as above.
Shortcuts need focus inside the viewer. They are scoped to the viewer so they never interfere with the rest of the page. Workaround: focus the viewer programmatically, or use a global handler with the imperative API.

API

Keyboard shortcuts — Keys the component handles, generated from @shortcut tags next to the implementation.

Basics

Toolbar and menu keys

Turning shortcuts off

Customization

Advanced / escape hatch

Limitations

API