{"id":14990339,"url":"https://github.com/alekswebnet/pdfjs-viewer-element","last_synced_at":"2026-03-12T01:25:46.279Z","repository":{"id":56742860,"uuid":"523898807","full_name":"alekswebnet/pdfjs-viewer-element","owner":"alekswebnet","description":"Web component for PDF.js viewer","archived":false,"fork":false,"pushed_at":"2026-03-09T06:21:51.000Z","size":35272,"stargazers_count":65,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-03-09T11:31:18.722Z","etag":null,"topics":["adobe-acrobat","embed-pdf","embed-pdf-viewer","javascript","pdf-document","pdf-lib","pdf-sdk","pdf-viewer","pdfium","pdfjs","pdfjs-viewer","react-pdf","typescript","vue-pdf","web-component"],"latest_commit_sha":null,"homepage":"https://alekswebnet.github.io/pdfjs-viewer-element/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alekswebnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"ko_fi":"oleksandrshevchuk"}},"created_at":"2022-08-11T23:39:32.000Z","updated_at":"2026-03-06T19:24:11.000Z","dependencies_parsed_at":"2024-05-18T06:25:14.774Z","dependency_job_id":"c3b86e3f-1d2b-4b9d-83cf-74ab7b1ef938","html_url":"https://github.com/alekswebnet/pdfjs-viewer-element","commit_stats":{"total_commits":146,"total_committers":4,"mean_commits":36.5,"dds":"0.23972602739726023","last_synced_commit":"02e74c019c7b7e7b3ccd2055bb8f5c1faff276f6"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"purl":"pkg:github/alekswebnet/pdfjs-viewer-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekswebnet%2Fpdfjs-viewer-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekswebnet%2Fpdfjs-viewer-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekswebnet%2Fpdfjs-viewer-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekswebnet%2Fpdfjs-viewer-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alekswebnet","download_url":"https://codeload.github.com/alekswebnet/pdfjs-viewer-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekswebnet%2Fpdfjs-viewer-element/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30410866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"ssl_error","status_checked_at":"2026-03-12T00:40:08.439Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-acrobat","embed-pdf","embed-pdf-viewer","javascript","pdf-document","pdf-lib","pdf-sdk","pdf-viewer","pdfium","pdfjs","pdfjs-viewer","react-pdf","typescript","vue-pdf","web-component"],"created_at":"2024-09-24T14:19:54.899Z","updated_at":"2026-03-12T01:25:46.272Z","avatar_url":"https://github.com/alekswebnet.png","language":"JavaScript","readme":"# pdfjs-viewer-element\n\nStandalone, isolated, drop-in [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html).\n\n[![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm\u0026logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)\n[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/alekswebnet/pdfjs-viewer-element)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pdfjs-viewer-element)\n\n![PDF.js viewer](image.webp)\n\n## Features\n\n- Standalone isolated web component with no runtime dependencies\n- Drop-in, iframe-based PDF.js default viewer for any web app\n- Works with same-origin and cross-origin PDF documents\n- Configure via attributes (page, zoom, search, pagemode, locale)\n- Programmatic access to `PDFViewerApplication` via the `initPromise` public property\n- Built-in Paper \u0026 Ink default theme, with theme control (automatic/light/dark) and custom CSS injection\n- Resource path attributes for PDF.js internals (`worker-src`, `c-map-url`, `icc-url`, `standard-font-data-url`, `wasm-url`, and more)\n- Locale override support using PDF.js viewer locales\n- Supports all [major browsers](https://caniuse.com/custom-elementsv1) and most [JS frameworks](https://custom-elements-everywhere.com/).\n\n## Docs\n\n[Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)\n\n[API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)\n\n[CodePen demo](https://codepen.io/redrobot753/pen/bNwVVvp)\n\n[CodePen demo with React](https://codepen.io/redrobot753/pen/xbEwNrO)\n\n[CodePen demo with Vue](https://codepen.io/redrobot753/pen/JoRYqwN)\n\n[Usage examples](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)\n\n## Install\n\n### Using module bundlers:\n\n```bash\n# With npm\nnpm install pdfjs-viewer-element\n# With pnpm\npnpm add pdfjs-viewer-element\n```\n\n```javascript\nimport 'pdfjs-viewer-element'\n```\n\n### Using browser and CDN:\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```html\n\u003cpdfjs-viewer-element\n  src=\"https://alekswebnet.github.io/sample-pdf-with-images.pdf\"\n  style=\"height: 100dvh\"\u003e\n\u003c/pdfjs-viewer-element\u003e\n```\n\nThe element is block-level and needs an explicit height.\n\n### Framework usage\n\n- [React integration example](https://codepen.io/redrobot753/pen/xbEwNrO)\n- [Vue integration example](https://codepen.io/redrobot753/pen/JoRYqwN)\n\n## Attributes\n\n| \u003cdiv style=\"min-width: 19ch\"\u003eAttribute\u003c/div\u003e | \u003cdiv style=\"min-width: 15ch\"\u003eDescription\u003c/div\u003e | Default |\n| --- | --- | --- |\n| `src` | PDF file URL. | `''` |\n| `iframe-title` | Title for the internal `iframe` (recommended for accessibility). | `PDF viewer window` |\n| `page` | Page number. | `''` |\n| `search` | Search query text. | `''` |\n| `phrase` | Phrase search mode, set to `true` to enable phrase matching. | `''` |\n| `zoom` | Zoom level (for example `auto`, `page-width`, `200%`). | `''` |\n| `pagemode` | Sidebar mode: `thumbs`, `bookmarks`, `attachments`, `layers`, `none`. | `none` |\n| `locale` | Viewer UI locale (for example `en-US`, `de`, `uk`). [Available locales](https://github.com/mozilla/pdf.js/tree/master/l10n) | `''` |\n| `locale-src-template` | Locale file URL template. Must contain `{locale}` placeholder. Used together with `locale`. | `https://cdn.jsdelivr.net/gh/mozilla-l10n/firefox-l10n@main/{locale}/toolkit/toolkit/pdfviewer/viewer.ftl` |\n| `viewer-css-theme` | Viewer theme: `AUTOMATIC`, `LIGHT`, `DARK`. | `AUTOMATIC` |\n| `worker-src` | PDF.js worker URL override. | `\u003cpackage-url\u003e/pdf.worker.min.mjs` |\n| `debugger-src` | PDF.js debugger script URL (`debuggerSrc` option). | `./debugger.mjs` |\n| `c-map-url` | CMap directory URL (`cMapUrl` option). | `../web/cmaps/` |\n| `icc-url` | ICC profile directory URL (`iccUrl` option). | `../web/iccs/` |\n| `image-resources-path` | Image resources directory (`imageResourcesPath` option). | `./images/` |\n| `sandbox-bundle-src` | Sandbox bundle URL (`sandboxBundleSrc` option). | `../build/pdf.sandbox.mjs` |\n| `standard-font-data-url` | Standard fonts directory (`standardFontDataUrl` option). | `../web/standard_fonts/` |\n| `wasm-url` | WASM assets directory (`wasmUrl` option). | `../web/wasm/` |\n\nPlay with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).\n\n## Runtime updates\n\nMost attributes can be updated dynamically:\n\n- `src` updates by calling PDF.js `open({ url })` without rebuilding the viewer.\n- `page`, `search`, `phrase`, `zoom`, `pagemode` update via hash parameters.\n- `viewer-css-theme` updates the viewer theme at runtime.\n- `worker-src`, `debugger-src`, `c-map-url`, `icc-url`, `image-resources-path`, `sandbox-bundle-src`, `standard-font-data-url`, `wasm-url` update viewer options for subsequent document loads.\n- `locale` rebuilds the viewer so localization resources can be applied.\n\n## Worker source\n\nBy default, the component resolves `worker-src` to the worker shipped with this package (`pdf.worker.min.mjs` in `dist`).\n\nSet `worker-src` only if you want to serve the worker from a custom location (for example your own CDN or static assets path).\n\n- The URL must point to a valid PDF.js module worker file.\n- The worker version should match the bundled PDF.js version.\n\n```html\n\u003cpdfjs-viewer-element\n  src=\"/file.pdf\"\n  worker-src=\"https://cdn.jsdelivr.net/npm/pdfjs-dist@5.5.207/build/pdf.worker.min.mjs\"\u003e\n\u003c/pdfjs-viewer-element\u003e\n```\n\n## Locale source template\n\nUse `locale-src-template` when you need to load localization files from a custom host.\n\n- The template must include `{locale}`.\n- `{locale}` is replaced by the `locale` attribute value (for example `de`, `uk`, `en-US`).\n- If `locale` is not set, no locale file is loaded.\n- Changes to `locale-src-template` are applied when the viewer is (re)initialized, for example after setting/changing `locale`.\n\nExample:\n\n```html\n\u003cpdfjs-viewer-element\n  src=\"/file.pdf\"\n  locale=\"de\"\n  locale-src-template=\"https://cdn.example.com/pdfjs-locales/{locale}/viewer.ftl\"\u003e\n\u003c/pdfjs-viewer-element\u003e\n```\n\n## Viewer CSS theme\n\nThe component includes and applies a default Paper \u0026 Ink theme from `src/themes/paper-and-ink.css`.\n\nUse `viewer-css-theme` attribute to set light or dark theme manually:\n\n```html\n\u003cpdfjs-viewer-element \n  src=\"/file.pdf\" \n  viewer-css-theme=\"DARK\"\u003e\n\u003c/pdfjs-viewer-element\u003e\n```\n\nRuntime example:\n\n```javascript\nconst viewerElement = document.querySelector('pdfjs-viewer-element')\nviewerElement.setAttribute('viewer-css-theme', 'DARK')\nviewerElement.setAttribute('viewer-css-theme', 'LIGHT')\nviewerElement.setAttribute('viewer-css-theme', 'AUTOMATIC')\n```\n\n## PDF.js resource attributes\n\nYou can override additional PDF.js viewer resource paths when needed:\n\n```html\n\u003cpdfjs-viewer-element\n  src=\"/file.pdf\"\n  worker-src=\"/pdf.worker.min.mjs\"\n  debugger-src=\"/debugger.mjs\"\n  c-map-url=\"/cmaps/\"\n  icc-url=\"/iccs/\"\n  image-resources-path=\"/images/\"\n  sandbox-bundle-src=\"/pdf.sandbox.mjs\"\n  standard-font-data-url=\"/standard_fonts/\"\n  wasm-url=\"/wasm/\"\u003e\n\u003c/pdfjs-viewer-element\u003e\n```\n\n## Viewer custom styles\n\nYou can add your own CSS rules to the viewer application using `injectViewerStyles(styles: string)`:\n\n```html\n\u003cpdfjs-viewer-element id=\"viewer\" src=\"/file.pdf\"\u003e\n\u003c/pdfjs-viewer-element\u003e\n```\n\n```javascript\nconst viewerElement = document.querySelector('#viewer')\nviewerElement.injectViewerStyles(`\n  #toolbarViewerMiddle, #toolbarViewerRight { display: none; }\n`)\n```\n\n`injectViewerStyles(...)` applies styles immediately when the viewer document is ready, and keeps them for future rebuilds.\n\nBuild your own theme with viewer custom variables and inject it via `injectViewerStyles(...)`:\n\n```css\n:root {\n  --main-color: #5755FE;\n  --toolbar-icon-bg-color: #0200a8;\n  --field-color: #5755FE;\n  --separator-color: #5755FE;\n  --toolbar-border-color: #5755FE;\n  --field-border-color: #5755FE;\n  --toolbar-bg-color: rgba(139, 147, 255, .1);\n  --body-bg-color: rgba(255, 247, 252, .7);\n  --button-hover-color: rgba(139, 147, 255, .1);\n  --toolbar-icon-hover-bg-color: #0200a8;\n  --toggled-btn-color: #0200a8;\n  --toggled-btn-bg-color: rgba(139, 147, 255, .1);\n  --toggled-hover-active-btn-color: #5755FE;\n  --doorhanger-hover-bg-color: rgba(139, 147, 255, .1);\n  --doorhanger-hover-color: #0200a8;\n  --dropdown-btn-bg-color: rgba(139, 147, 255, .1);\n}\n```\n\n## Methods and Public properties\n\nMethods:\n\n`injectViewerStyles(styles: string)` - Adds custom CSS to the viewer now (when ready) and for future rebuilds.\n\nExample (`injectViewerStyles`):\n\n```javascript\nconst viewerElement = document.querySelector('pdfjs-viewer-element')\n\nawait viewerElement.injectViewerStyles(`\n  #toolbarViewerRight { display: none; }\n  #findbar { border-top: 2px solid #0200a8; }\n`)\n```\n\nPublic properties:\n\n`initPromise: Promise\u003cInitializationData\u003e` - Resolves after internal viewer is completely loaded and initialized, returning `{ viewerApp }`, that gives a programmatic access to PDF.js viewer app (PDFViewerApplication).\n\nExample (`initPromise`):\n\n```javascript\nconst viewerElement = document.querySelector('pdfjs-viewer-element')\nconst { viewerApp } = await viewerElement.initPromise\n\nviewerApp.open({ url: '/sample.pdf' })\n```\n\n`iframe: PdfjsViewerElementIframe` - Public reference to the internal `iframe` element. Useful when you need direct access to `contentWindow`/`contentDocument`.\n\nExample (`iframe`):\n\n```javascript\nconst viewerElement = document.querySelector('pdfjs-viewer-element')\n\n// Access iframe window directly when needed.\nconst iframeWindow = viewerElement.iframe.contentWindow\n\n// Read current location hash applied to the viewer.\nconsole.log(iframeWindow.location.hash)\n\n// Inspect iframe document title.\nconsole.log(viewerElement.iframe.contentDocument.title)\n```\n\nYou can also react to source changes dynamically:\n\n```javascript\nconst viewerElement = document.querySelector('pdfjs-viewer-element')\nviewerElement.setAttribute('src', '/another-file.pdf')\n```\n\n## Accessibility\n\nUse `iframe-title` to add a title to the `iframe` element and improve accessibility.\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\n","funding_links":["https://ko-fi.com/oleksandrshevchuk"],"categories":["Real World"],"sub_categories":["Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekswebnet%2Fpdfjs-viewer-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falekswebnet%2Fpdfjs-viewer-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekswebnet%2Fpdfjs-viewer-element/lists"}