A powerful and easy-to-use PDF viewer component for Reflex applications. Built on top of react-pdf, it provides seamless PDF viewing capabilities with full control over navigation, zoom, and display options.

pip install reflex-pdf-viewer

import reflex as rx
from reflex_pdf_viewer import Document, Page

class State(rx.State):
    current_page: int = 1
    n_pages: int = 1

    @rx.event
    def load_success(self, info: dict):
        self.n_pages = info.get("numPages", 1)

def index():
    return rx.vstack(
        rx.heading("Reflex pdf preview", size="8"),
        Document.create(
            Page.create(page_number=State.current_page),
            file="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
            on_load_success=State.load_success,
        ),
    )

app = rx.App()
app.add_page(index)

Don't forget to add the frontend package to your rxconfig.py:

import reflex as rx

config = rx.Config(
    app_name="your_app",
    frontend_packages=[
        "[email protected]",  # Required for PDF viewing
    ],
)

• Initial release
• Basic PDF viewing functionality
• Page navigation support
• Zoom controls
• Error handling
• Loading states

• Added loading prop to avoid failed to load pdf issue

• Fixed ssr issue while reflex build

If you encounter any issues or have questions:

1. Check the GitHub Issues
2. Join the Reflex Discord community
3. Create a new issue with detailed information

• Built with Reflex - The web framework for Python
• Powered by react-pdf - React PDF viewer component
• Uses PDF.js - JavaScript PDF rendering engine

Made with ❤️ for the Reflex community

Star ⭐ this repo if you find it useful!