# Playground

Try every option of the viewer live, on bundled samples, your own URL or a local file, and watch its events.

## What this shows

Every switch in the options panel maps to one prop, so you can see the effect of a feature before you read its page:

- Loading bundled samples, a URL or a local file: [Document sources](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/document-sources/) and [Authenticated requests](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/authenticated-requests/).
- Controlled page, scale and rotation with the imperative API buttons: [Controlled state](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/controlled-state/) and [Imperative API](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/imperative-api/).
- Toolbar position, the compact breakpoint and the responsive “More actions” menu (drag the container width): [Toolbar](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/toolbar/).
- Native, overlay and controlled fullscreen: [Fullscreen](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/fullscreen/).
- Fit modes, zoom presets, zoom reset and Ctrl/⌘ + wheel zoom: [Fit modes](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/fit-modes/) and [Zoom](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/zoom/).
- Continuous layout and thumbnails: [Continuous layout](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/continuous-layout/) and [Thumbnails](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/thumbnails/).
- Text layer, links and search: [Text layer](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/text-layer/), [Links](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/links/) and [Search](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/search/).
- Page number input and the password prompt: [Page number input](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/page-number-input/) and [Password protection](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/password-protection/).
- Keyboard shortcuts and print modes: [Keyboard shortcuts](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/keyboard-shortcuts/) and [Print](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/print/).
- Dark and custom themes and Hungarian labels: [Theming](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/customization/theming/) and [Labels and locale](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/labels/).
- The event log records `onPageChange`, `onScaleChange`, `onDocumentLoad`, `onPageRender` and `onError`: [Events](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/events/).

## Source

The playground is a regular React component built on the public API:
[apps/site/src/islands/Playground.tsx](https://github.com/kiralygyula92/react-pdf-viewer/blob/main/apps/site/src/islands/Playground.tsx).

## Try it with your own data

Paste any CORS-enabled PDF URL into the **URL** tab, or drop a PDF anywhere on the page. Local files never leave your browser.