PDF Decoder

An interactive PDF binary structure visualizer. Upload any PDF and explore its internals — objects, cross-references, content streams, fonts, and page rendering — all in the browser.

Features

File Map

Visual byte-range layout of the entire file. Each block is sized proportionally to its byte range, color-coded by type (header, objects, xref, trailer). Click any region to inspect it.

Object Inspector

Browse every indirect object in the PDF. Filter by type, search by reference, and expand dictionaries and streams to see their raw contents.

Cross-Reference Table

The annotated xref table showing how a PDF reader locates objects by byte offset. Displays object number, offset, generation, and status (in-use vs free).

Content Streams

Decoded PDF drawing operators for each page, grouped by category (text, graphics state, color, path construction, clipping, etc.). Font and object references are clickable links to their respective inspector views.

Font Inspector

Details for every font in the PDF — base font name, subtype, encoding, embedding status, and metrics. Embedded fonts show glyph previews with their character mappings.

Document Tree

The logical structure of the PDF from the Catalog root down through the page tree. Expand any node to see its dictionary entries and click object references to jump to the Object Inspector.

Render Walkthrough

Step through each PDF content stream operator and watch the page being drawn on an HTML5 Canvas. Includes playback controls, speed adjustment, and a live graphics state panel showing the current transform, colors, line style, and state stack depth.

Architecture

• Backend: Python (FastAPI + pikepdf) — parses PDFs server-side, extracts objects, decodes content streams, converts embedded fonts
• Frontend: React + Vite + Tailwind CSS — all UI and canvas rendering client-side
• Single endpoint: POST /analyze returns the complete PDF structure in one response
• Canvas renderer: Replays PDF operators on HTML5 Canvas 2D with snapshot caching for instant backward stepping

Getting Started

Prerequisites

• Python 3.11+
• Node.js 18+

Install dependencies

# Backend
cd backend
pip install fastapi uvicorn pikepdf fonttools

# Frontend
cd frontend
npm install

Build and run

# Build the frontend
cd frontend
npm run build

# Start the server (serves frontend from dist/)
cd backend
uvicorn main:app --host 0.0.0.0 --port 8080

Then open http://localhost:8080 and upload a PDF.

How It Works

1. Upload — The browser sends the PDF to the /analyze endpoint
2. Parse — The backend uses pikepdf to extract every indirect object, the xref table, content streams, font descriptors, and the page tree
3. Decode — Content streams are tokenized into individual PDF operators with human-readable descriptions. Embedded fonts (Type1, TrueType, OpenType) are converted/repaired for browser use
4. Visualize — The frontend renders seven interactive views, all cross-linked so you can navigate from a content stream operator to its font, or from a document tree node to the underlying object
5. Render — The canvas renderer replays PDF operators (transforms, paths, text, images, patterns) step by step, taking periodic snapshots so you can scrub backward instantly