{"id":13495188,"url":"https://github.com/pdfslick/pdfslick","last_synced_at":"2025-05-14T13:02:31.703Z","repository":{"id":155463573,"uuid":"632635381","full_name":"pdfslick/pdfslick","owner":"pdfslick","description":"View and Interact with PDFs in React, SolidJS, Svelte and JavaScript apps","archived":false,"fork":false,"pushed_at":"2025-05-01T23:08:01.000Z","size":23959,"stargazers_count":638,"open_issues_count":5,"forks_count":32,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-01T23:11:25.425Z","etag":null,"topics":["pdf","pdf-viewer","pdfjs","pdfslick","react","reactjs","solid","solid-js","solidjs","svelte","sveltejs"],"latest_commit_sha":null,"homepage":"https://pdfslick.dev","language":"TypeScript","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/pdfslick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2023-04-25T20:21:54.000Z","updated_at":"2025-05-01T23:06:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0b69030-94b1-42ea-b480-5c5692f1145b","html_url":"https://github.com/pdfslick/pdfslick","commit_stats":{"total_commits":44,"total_committers":4,"mean_commits":11.0,"dds":0.06818181818181823,"last_synced_commit":"38222f514718cd439db13886b5f62c4726177aff"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdfslick%2Fpdfslick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdfslick%2Fpdfslick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdfslick%2Fpdfslick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pdfslick%2Fpdfslick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pdfslick","download_url":"https://codeload.github.com/pdfslick/pdfslick/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149645,"owners_count":22022846,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["pdf","pdf-viewer","pdfjs","pdfslick","react","reactjs","solid","solid-js","solidjs","svelte","sveltejs"],"created_at":"2024-07-31T19:01:32.256Z","updated_at":"2025-05-14T13:02:31.607Z","avatar_url":"https://github.com/pdfslick.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cbr\u003e\u003cbr\u003e\n\n![readme-header](https://pdfslick.dev/pdfslick_logo.svg)\n\n\u003cbr\u003e\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\nView and Interact with PDF documents in React, SolidJS, Svelte and JavaScript apps\n\u003cbr\u003e\u003cbr\u003e\n\n[![Actions Status](https://github.com/pdfslick/pdfslick/actions/workflows/publish_site.yml/badge.svg)](https://github.com/pdfslick/pdfslick/actions)\n[![GitHub release](https://img.shields.io/github/release/pdfslick/pdfslick.svg)](https://github.com/pdfslick/pdfslick/)\n[![npm version](https://img.shields.io/npm/v/@pdfslick/core.svg)](https://www.npmjs.com/package/@pdfslick/core)\n[![npm](https://img.shields.io/npm/dt/@pdfslick/core.svg)](https://www.npmjs.com/package/@pdfslick/core)\n\n\u003c!-- [![npm](https://img.shields.io/npm/dt/@pdfslick/react.svg)](https://www.npmjs.com/package/@pdfslick/react)\n[![npm](https://img.shields.io/npm/dt/@pdfslick/solid.svg)](https://www.npmjs.com/package/@pdfslick/solid) --\u003e\n\n\u003cbr\u003e\n\n[Getting Started](https://pdfslick.dev/docs) | [Examples](https://pdfslick.dev/examples)\n\u003cbr\u003e\u003cbr\u003e\n\n\u003c/div\u003e\n\n---\n\n\u003cbr\u003e\n\nPDFSlick is a library that enables viewing of and interaction with PDF documents in React, SolidJS, Svelte and JavaScript apps.\nIt's build on top of Mozilla's [PDF.js](https://github.com/mozilla/pdf.js), and utilises [Zustand](https://github.com/pmndrs/zustand) to provide a reactive store for the loaded documents.\n\n## PDFSlick for React\n\nTo get started with React run:\n\n```shell\nnpm install @pdfslick/react\n# yarn add @pdfslick/react\n# pnpm add @pdfslick/react\n```\n\nYou can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:\n\n```jsx\nimport { usePDFSlick } from \"@pdfslick/react\";\nimport PDFNavigation from \"./yourcomponents/PDFNavigation\";\n\n//\n// It is required to include PDFSlick's CSS styles once\n// you can do it in your main `App.tsx` for example\n//\nimport \"@pdfslick/react/dist/pdf_viewer.css\";\n\ntype PDFViewerComponentProps = {\n  pdfFilePath: string,\n};\n\nconst PDFViewerComponent = ({ pdfFilePath }: PDFViewerComponent) =\u003e {\n  const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(\n    pdfFilePath,\n    {\n      scaleValue: \"page-fit\",\n    }\n  );\n\n  /*\n   Access the store with `usePDFSlickStore()` hook — you can pass is\n   as a prop to other components (like with `\u003cPDFNavigation /\u003e` below)\n   Toolbars, Sidebars, components which render thumbnails etc. \n   and use it as here to get and react on \n   PDF document's and viewer's properties and changes\n   */\n  const scale = usePDFSlickStore((s) =\u003e s.scale);\n  const numPages = usePDFSlickStore((s) =\u003e s.numPages);\n  const pageNumber = usePDFSlickStore((s) =\u003e s.pageNumber);\n\n  return (\n    \u003cdiv className=\"absolute inset-0 pdfSlick\"\u003e\n      \u003cdiv className=\"relative h-full\"\u003e\n        \u003cPDFSlickViewer {...{ viewerRef, usePDFSlickStore }} /\u003e\n\n        {/*\n          Pass PDFSlick's store to your custom components\n        */}\n        \u003cPDFNavigation {...{ usePDFSlickStore }} /\u003e\n\n        {/*\n          PDFSlick's store values automatically update\n        */}\n        \u003cdiv className=\"absolute w-full top-0 left-0\"\u003e\n          \u003cp\u003eCurrent scale: {scale}\u003c/p\u003e\n          \u003cp\u003eCurrent page number: {pageNumber}\u003c/p\u003e\n          \u003cp\u003eTotal number of pages: {numPages}\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default PDFViewerComponent;\n```\n\nProvided with the PDF Document path and PDFSlick options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:\n\n- `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document\n- `viewerRef` is the `ref` callback that is provided as a prop to the `\u003cPDFSlickViewer /\u003e` component\n- `usePDFSlickStore` enables using PDFSlick store within your React components\n\n\u003cbr\u003e\n\n[More on using PDFSlick with React](https://pdfslick.dev/docs/react) | [Checkout the React Examples](./apps/web/examples)\n\n\u003cbr\u003e\n\n## PDFSlick for SolidJS\n\nTo get started with PDFSlick for SolidJS run:\n\n```shell\nnpm install @pdfslick/solid\n# yarn add @pdfslick/solid\n# pnpm add @pdfslick/solid\n```\n\nYou can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:\n\n```jsx\nimport { Component, createSignal } from \"solid-js\";\nimport { usePDFSlick } from \"@pdfslick/solid\";\nimport PDFNavigation from \"./yourcomponents/PDFNavigation\";\n\n//\n// It is required to include PDFSlick's CSS styles once\n// you can do it in your main `App.tsx` for example\n//\nimport \"@pdfslick/solid/dist/pdf_viewer.css\";\n\ntype PDFViewerComponentProps = {\n  pdfFilePath: string,\n};\n\nconst PDFViewerComponent: Component\u003cPDFViewerComponentProps\u003e = ({\n  pdfFilePath,\n}) =\u003e {\n  const {\n    viewerRef,\n    pdfSlickStore: store,\n    PDFSlickViewer,\n  } = usePDFSlick(pdfFilePath);\n\n  return (\n    \u003cdiv class=\"absolute inset-0 flex flex-col pdfSlick\"\u003e\n      \u003cdiv class=\"flex-1 relative h-full\"\u003e\n        \u003cPDFSlickViewer {...{ store, viewerRef }} /\u003e\n\n        {/*\n          Pass PDFSlick's store to your custom components (like the `\u003cPDFNavigation /\u003e` below) —\n          Toolbars, Sidebars, components which render thumbnails etc.\n          and use it as here to get and react on \n          PDF document and viewer properties and changes\n        */}\n        \u003cPDFNavigation {...{ store }} /\u003e\n\n        {/*\n          PDFSlick's store values automatically update\n        */}\n        \u003cdiv className=\"absolute w-full top-0 left-0\"\u003e\n          \u003cp\u003eCurrent scale: {store.scale}\u003c/p\u003e\n          \u003cp\u003eCurrent page number: {store.pageNumber}\u003c/p\u003e\n          \u003cp\u003eTotal number of pages: {store.numPages}\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default PDFViewerComponent;\n```\n\nProvided with the PDF Document path and options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:\n\n- `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document\n- `viewerRef` is the `ref` callback that is provided as a prop to the `\u003cPDFSlickViewer /\u003e` component\n- `pdfSlickStore` is the PDFSlick store\n\n\u003cbr\u003e\n\n[More on using PDFSlick with Solid](https://pdfslick.dev/docs/solid) | [Checkout the SolidJS Examples](./apps/solidweb/src/examples)\n\n\u003cbr\u003e\n\n## PDFSlick for Svelte\n\nTo get started with PDFSlick for Svelte run:\n\n```shell\nnpm install @pdfslick/core\n# yarn add @pdfslick/core\n# pnpm add @pdfslick/core\n```\n\nYou can load a PDF document and subscribe to a portion of or the entire PDFSlick store's state, like in the following basic example:\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import type { PDFSlick } from '@pdfslick/core';\n  import { onMount, onDestroy } from 'svelte';\n\n  // ...\n\n  /**\n   * Reference to the PDF Viewer container\n   */\n  let container: HTMLDivElement;\n\n  /**\n   * Reference to the pdfSlick instance\n   */\n  let pdfSlick: PDFSlick;\n\n  /**\n   * Keep PDF Slick state portions we're interested in using in your app\n   */\n  let pageNumber = 1;\n  let numPages = 0;\n\n  onMount(async () =\u003e {\n    /**\n     * This is all happening on client side, so we'll make sure we only load it there\n     */\n    const { create, PDFSlick } = await import('@pdfslick/core');\n\n    /**\n     * Create the PDF Slick store \n     */\n    const store = create();\n\n    pdfSlick = new PDFSlick({\n      container,\n      store,\n      options: {\n        scaleValue: 'page-fit'\n      }\n    });\n\n    /**\n     * Load the PDF document\n     */\n    pdfSlick.loadDocument(url);\n    store.setState({ pdfSlick });\n\n    /**\n     * Subscribe to state changes, and keep values of interest as reactive Svelte vars, \n     * (or alternatively we could hook these or entire PDF state into a Svelte store)\n     * \n     * Also keep reference of the unsubscribe function we call on component destroy\n     */\n    unsubscribe = store.subscribe((s) =\u003e {\n      pageNumber = s.pageNumber;\n      numPages = s.numPages;\n    });\n  });\n\n  onDestroy(() =\u003e unsubscribe());\n\n\t// ...\n\u003c/script\u003e\n\n\u003c!-- ... --\u003e\n\n\u003cdiv class=\"absolute inset-0 bg-slate-200/70 pdfSlick\"\u003e\n\n  \u003cdiv class=\"flex-1 relative h-full\" id=\"container\"\u003e\n    \u003c!--\n      The important part —\n      we use the reference to this `container` when creating PDF Slick instance above\n    --\u003e\n    \u003cdiv id=\"viewerContainer\" class=\"pdfSlickContainer absolute inset-0 overflow-auto\" bind:this={container}\u003e\n      \u003cdiv id=\"viewer\" class=\"pdfSlickViewer pdfViewer\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003c!-- ... --\u003e\n\n  \u003c!-- Use `pdfSlick`, `pageNumber` and `numPages` to create PDF pagination --\u003e\n  \u003cdiv class=\"flex justify-center\"\u003e\n    \u003cbutton\n      on:click={() =\u003e pdfSlick?.gotoPage(Math.max(pageNumber - 1, 1))}\n      disabled={pageNumber \u003c= 1}\n\t\t\u003e\n      Show Previous Page\n    \u003c/button\u003e\n    \u003cbutton\n      on:click={() =\u003e  pdfSlick?.gotoPage(Math.min(pageNumber + 1, numPages))}\n      disabled={pageNumber \u003e= numPages}\n    \u003e\n      Show Next Page\n    \u003c/button\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003c!-- ... --\u003e\n```\n\n\u003cbr\u003e\n\n[More on using PDFSlick with Svelte](https://pdfslick.dev/docs/svelte) | [Checkout the Svelte Examples](./apps/svelteweb/src)\n\n\u003cbr\u003e\n\n## Motivation\n\n[PDF.js](https://github.com/mozilla/pdf.js) is an amazing piece of software. It is also a very stable and mature one — it powers the PDF viewer in Mozilla Firefox and it's been around since 2011. However, it's all Vanilla JavaScript, and when it comes to using it with libraries like React and SolidJS (although possible) it's a litte bit hard in terms of integrating it in these Component- and reactive-like environments. PDFSlick attempts to wrap all of that fascinating functionality into one that is easier to fit in React and SolidJS worlds — as components and a reactive store.\n\n## Core Concepts\n\nThe core of PDFSlick is within the `@pdfslick/core` package. It wraps `PDF.js`'s functionality and links it to the store. This `@pdfslick/core` package is the basis for the React and SolidJS packages, which additionally transform the store and make it suitable for the adequate library, as well as providing components for the PDF viewer and thumbnails.\n\nDepending on your needs, at this you might find it useful to continue with learning more about using PDFSlick with React and SolidJS respsectivelly. However, if really interested you can learn more about using PDFSlick's `@pdfslick/core` package with Vanilla JS apps and with libraries other than React and SolidJS in the sections below.\n\n\u003cbr\u003e\n\n[Learn more about PDFSlick](https://pdfslick.dev) | [Checkout the Examples](https://pdfslick.dev/examples)\n\n## Thanks\n\n- [Vane Kosturanov](https://kosturanov.com/portfolio/logo-branding-design) for designing the logo\n- [VS Code Icons](https://github.com/microsoft/vscode-codicons) for the icons used throughout the examples\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpdfslick%2Fpdfslick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpdfslick%2Fpdfslick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpdfslick%2Fpdfslick/lists"}