{"id":7768,"library":"streamlit-pdf-viewer","title":"Streamlit PDF Viewer","description":"streamlit-pdf-viewer is an active Streamlit component designed for visualizing and manipulating PDF documents directly within Streamlit applications. It currently stands at version 0.0.28, with a consistent release cadence, frequently adding new features like scroll behavior, zoom controls, and annotation capabilities. The library leverages pdf.js for rendering and supports annotations, text rendering, and various display options.","status":"active","version":"0.0.28","language":"en","source_language":"en","source_url":"https://github.com/lfoppiano/streamlit-pdf-viewer","tags":["streamlit","pdf","viewer","document-viewer","component","interactive"],"install":[{"cmd":"pip install streamlit-pdf-viewer","lang":"bash","label":"Install latest version"}],"dependencies":[{"reason":"This is a Streamlit custom component and requires Streamlit to function.","package":"streamlit"}],"imports":[{"symbol":"pdf_viewer","correct":"from streamlit_pdf_viewer import pdf_viewer"}],"quickstart":{"code":"import streamlit as st\nfrom streamlit_pdf_viewer import pdf_viewer\nimport os\n\nst.set_page_config(layout=\"wide\")\n\n# Example 1: Display a PDF from a URL\nst.subheader(\"PDF from URL\")\npdf_viewer(\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\", width=700)\n\n# Example 2: Display an uploaded PDF file\nst.subheader(\"Upload and View PDF\")\n\n# Initialize session state for the uploaded file to persist across reruns\nif 'uploaded_pdf_file' not in st.session_state:\n    st.session_state.uploaded_pdf_file = None\n\nuploaded_file = st.file_uploader(\"Choose a PDF file\", type=(\"pdf\"), key=\"pdf_uploader\")\n\nif uploaded_file is not None:\n    st.session_state.uploaded_pdf_file = uploaded_file.getvalue()\n\nif st.session_state.uploaded_pdf_file is not None:\n    pdf_viewer(st.session_state.uploaded_pdf_file, width=700, height=600)\nelse:\n    st.info(\"Please upload a PDF file to view.\")","lang":"python","description":"This quickstart demonstrates how to display a PDF from a URL and how to upload and display a PDF file using `st.file_uploader`, ensuring the uploaded file persists across Streamlit reruns with `st.session_state`."},"warnings":[{"fix":"Review the official documentation and adapt your code to use the current `pdf_viewer` function signature and parameters. The `legacy` parameter or explicit legacy calls are no longer supported.","message":"Version 0.0.27 removed legacy methods for rendering PDF documents. If your application relied on older rendering mechanisms, this update will break compatibility.","severity":"breaking","affected_versions":">=0.0.27"},{"fix":"Always provide an explicit `width` parameter (e.g., `width=700` or `width='100%'`) when using `pdf_viewer` inside `st.tabs` or `st.expander` components.","message":"When embedding the PDF viewer within Streamlit tabs or expanders, it is mandatory to specify a `width` parameter. Without it, the viewer may not render correctly or appear blank on tabs that are not immediately visible.","severity":"gotcha","affected_versions":">=0.0.16"},{"fix":"Store the `UploadedFile` (or its byte content) in `st.session_state` after it's uploaded. Always retrieve the PDF data from `st.session_state` for viewing to ensure persistence.","message":"The `UploadedFile` object from `st.file_uploader` can be lost on subsequent Streamlit reruns, leading to a blank viewer or errors if not handled. This is common when users interact with other widgets.","severity":"gotcha","affected_versions":"All versions"},{"fix":"This issue is often PDF-specific. If encountered, try simplifying the PDF (e.g., re-saving it with a PDF editor) or investigate the specific content of the problematic PDF. Report the issue on the GitHub repository with the problematic PDF if it persists.","message":"Some users have reported an 'Invalid Canvas Size error' when trying to display certain PDF documents.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Ensure that the data passed to `pdf_viewer` is always valid PDF bytes or a URL. For `st.file_uploader`, store the uploaded file's `getvalue()` in `st.session_state` and retrieve it from there before passing to the viewer. Add checks to ensure the data is not `None`.","cause":"This error often occurs in the browser's JavaScript console when `pdf_viewer` receives `None` or an unexpected null value instead of valid PDF data, particularly after an `st.file_uploader` has been cleared or if the uploaded file is not persisted correctly across reruns.","error":"TypeError: Cannot read properties of null (reading 'length')"},{"fix":"For local files, it's recommended to either use `st.file_uploader` (which handles reading the file into memory) or read the file into bytes explicitly (e.g., `with open('path/to/file.pdf', 'rb') as f: pdf_bytes = f.read()`) and pass the bytes to `pdf_viewer`. Ensure any local paths used are absolute and accessible by the Streamlit process.","cause":"This typically happens when attempting to display a local PDF file using a relative or inaccessible path, especially in deployed Streamlit applications (like Streamlit Cloud). The Streamlit server's working directory or file system access might differ from local development.","error":"FileNotFoundError: [Errno 2] No such file or directory: 'your_document.pdf'"},{"fix":"First, ensure all `warnings` related to width and session state are addressed. Check the browser's developer console for JavaScript errors. Try accessing the deployed app in different browsers (e.g., Firefox has shown better compatibility in some cases). Ensure the PDF source (URL or uploaded bytes) is valid and accessible from the deployment environment.","cause":"Deployment environments (like Streamlit Cloud) or specific browser versions/settings can sometimes interfere with how the component renders the PDF, even if it works locally. Browser compatibility issues for web components are sometimes reported.","error":"PDF viewer displays a blank area or does not load on Streamlit Cloud (or specific browsers like Chrome/Edge)."}]}