Document Viewers

Pro

Pro viewers for the common document formats — PDF, Word, Excel and CSV.

Version: v1.2.0
Stability: stable
License: Commercial license
Related: DOCX Viewer; Excel Viewer; CSV Viewer

1 of 4

PDF Viewer — Renders a real PDF with pdf.js inside document-frame: page navigation, zoom and fit-width in the toolbar, an optional `citations` overlay (one focusable box per citation on the rendered page, dispatching `citation-select`) and an optional `sidebar` with the document outline and a thumbnail rail; every page change dispatches `navigate`.

sample.pdf

of –

100%

Loading document…

Couldn't load this document

Check that the file exists and is a valid PDF.

previews.components.pdf-viewer.default.blade.php Blade

<div class="mx-auto h-[36rem] w-full max-w-3xl">
    <x-ui.pdf-viewer src="/samples/sample.pdf" />
</div>

Installation

terminal

php artisan ui:add pro/pdf-viewer

Note

This component ships an Alpine behavior module at resources/js/ui/pdf-viewer.js. Import it once from your bundle so it registers on alpine:init:

resources/js/ui/index.js JS

import './pdf-viewer.js';

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

pdf-viewer.md

# Brok UI: PDF Viewer (`pdf-viewer`)

Renders a real PDF with pdf.js inside document-frame: page navigation, zoom and fit-width in the toolbar, an optional `citations` overlay (one focusable box per citation on the rendered page, dispatching `citation-select`) and an optional `sidebar` with the document outline and a thumbnail rail; every page change dispatches `navigate`.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add pro/pdf-viewer
```

## Usage

```blade
<div class="mx-auto h-[36rem] w-full max-w-3xl">
    <x-ui.pdf-viewer src="/samples/sample.pdf" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Rendering a real PDF in the browser with page navigation, zoom, and an optional outline/thumbnail sidebar.
- Highlighting citation regions on a rendered page that users can select, such as for an AI-answer source viewer.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- The source is not actually a PDF; use docx-viewer, excel-viewer, or csv-viewer for those formats.
- The document just needs to be split or reorganized, not read; use document-splits.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

- Use the `<brok:pdf-viewer>` tag (or `<x-ui.pdf-viewer>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/pdf-viewer

Ask about PDF Viewer in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Examples

Citations

citations.blade.php Blade

@php
    $citations = [
        ['id' => 'invoice-number', 'label' => 'Invoice number', 'value' => 'INV-2026-0042', 'page' => 1, 'x' => 0.62, 'y' => 0.12, 'w' => 0.26, 'h' => 0.035],
        ['id' => 'vendor', 'label' => 'Vendor', 'value' => 'Acme Supplies Co.', 'page' => 1, 'x' => 0.10, 'y' => 0.24, 'w' => 0.42, 'h' => 0.04],
        ['id' => 'total', 'label' => 'Total', 'value' => '$1,248.00', 'page' => 1, 'x' => 0.66, 'y' => 0.78, 'w' => 0.22, 'h' => 0.045],
    ];
@endphp

<div class="mx-auto h-[36rem] w-full max-w-3xl">
    <x-ui.pdf-viewer src="/samples/sample.pdf" :page="1" :citations="$citations" />
</div>

Sidebar

sidebar.blade.php Blade

<div class="mx-auto h-[36rem] w-full max-w-3xl">
    <x-ui.pdf-viewer src="/samples/sample.pdf" sidebar />
</div>

API

manifest knowledge + registry-derived coverage

Props

No documented props. Pass normal Blade attributes through the component root.

Slots

default —

Data slots

Stable hooks for CSS overrides and browser tests.

No data-slot selectors found in the registry source.

Behavior

The toolbar supports page navigation, zoom, and fit-width, and every page change dispatches a navigate event.
With citations set, each citation renders as a focusable overlay box positioned on its page; selecting one dispatches citation-select with that citation's data.
With sidebar enabled, the document outline (from the PDF's own table of contents, when present) and a thumbnail rail let users jump directly to a page or section.
Installs a JavaScript behavior module when the registry item includes resources/js/ui files.

Guidance

Document workflow

Upload, inspect, edit, annotate, or sign a real document.

Use when

Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
Rendering a real PDF in the browser with page navigation, zoom, and an optional outline/thumbnail sidebar.
Highlighting citation regions on a rendered page that users can select, such as for an AI-answer source viewer.

Avoid when

Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
The source is not actually a PDF; use docx-viewer, excel-viewer, or csv-viewer for those formats.
The document just needs to be split or reorganized, not read; use document-splits.

Use instead

Structured product form
Direct data entry

Anti-patterns

Heavy document UI when structured fields are simpler

Anatomy: root pdf-viewer-outline pdf-viewer-rail pdf-viewer-thumb pdf-viewer-canvas pdf-viewer-citations pdf-viewer-citation

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Citation overlays are real focusable elements reachable by keyboard, not click-only hotspots layered over the canvas.
Toolbar controls (page navigation, zoom) are real buttons and inputs with accessible labels, not bare icon-only hit targets.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

Source available with Pro

This preview shows the real Pro component, while its installable source is delivered only through the authenticated registry. Activate a license, then use the installation command above.

Open the authenticated source endpoint

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.2.0
Status: Stable
License: pro
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated

Preview