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 Editor; File Finder; Document Splits

DOCX Viewer — A token-styled .docx viewer that converts Word documents with mammoth.js, sanitizes the resulting HTML, and provides a title bar, scrollable prose area, and loading/error states.

sample.docx

Loading document…

Couldn't load this document

Check that the file exists and is a valid .docx file.

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

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

Installation

terminal

php artisan ui:add pro/docx-viewer

Note

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

resources/js/ui/index.js JS

import './docx-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.

docx-viewer.md

# Brok UI: DOCX Viewer (`docx-viewer`)

A token-styled .docx viewer that converts Word documents with mammoth.js, sanitizes the resulting HTML, and provides a title bar, scrollable prose area, and loading/error states.

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

## Install

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

## Usage

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

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Rendering a .docx file entirely in the browser without server-side conversion.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- The document must preserve Word layout exactly; render a server-generated PDF and view it with pdf-viewer instead.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

- Use the `<brok:docx-viewer>` tag (or `<x-ui.docx-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/docx-viewer

Ask about DOCX Viewer in

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

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

Converts with mammoth.js, then sanitizes the generated HTML through a strict DOMPurify allow-list before rendering it with x-html.
Preserves document headings, paragraphs, lists, tables, safe links, formatting, and embedded raster images while removing active or network-loading content.
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 .docx file entirely in the browser without server-side conversion.

Avoid when

Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
The document must preserve Word layout exactly; render a server-generated PDF and view it with pdf-viewer instead.

Use instead

Structured product form
Direct data entry

Anti-patterns

Heavy document UI when structured fields are simpler

Anatomy: root
Theming hooks: Document text, links, borders, and surfaces use semantic design tokens.

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

The converted document is exposed as a labelled article inside a keyboard-scrollable region.

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