diff2html

diff2html turns raw git diff or unified diff text into readable, GitHub-style HTML — either as line-by-line or side-by-side views, with syntax highlighting, a summarized file list, and line-similarity matching to visually pair changed lines. It ships as both a pure parser/renderer library (diff2html) for Node.js and the browser, and an optional UI wrapper (Diff2HtmlUI) that adds synchronized scrolling and highlight.js integration.

It’s commonly embedded in code review tools, changelog generators, git hosting UIs, and any application that needs to render a diff for humans rather than just showing raw patch text.

What You Get

• A parse() function that turns raw diff text into a typed DiffFile[] structure (files, blocks, added/removed/unchanged lines)
• An html() function that renders that structure (or raw diff text directly) into line-by-line or side-by-side HTML output
• A Diff2HtmlUI wrapper that adds highlight.js syntax highlighting, a table of contents/file list, and synchronized side-by-side scrolling for direct DOM insertion
• Prebuilt browser bundles (CDN/jsDelivr-ready) plus CommonJS and ESM builds for Node.js and bundler consumption
• Line-similarity matching that visually pairs a removed line with the replaced line it most closely resembles

Common Use Cases

• Embedding readable diff views in code review tools, PR dashboards, or internal git hosting UIs
• Rendering changelogs or commit-diff previews on documentation/marketing sites
• Building CLI or CI tooling that needs to convert git diff output into shareable HTML reports

Under The Hood

Architecture: src/diff-parser.ts is the core parsing engine — it walks unified-diff text line by line, tracking file headers, hunk offsets, and line-type prefixes (+/-/context) to build a typed DiffFile[] tree (src/types.ts). src/diff2html.ts is the thin public entry point: parse() exposes the parser directly, and html() composes it with one of two renderer classes — LineByLineRenderer or SideBySideRenderer (each ~300 lines) — plus an optional FileListRenderer for the summary header. Rendering itself is template-based via HoganJsUtils (a wrapper around @profoundlogic/hogan, a Mustache-family engine), with rematch.ts implementing the line-similarity algorithm that pairs a removed line with its closest replacement so word-level diffs can be highlighted within a line. The optional Diff2HtmlUI layer (in src/ui/, not shown above but referenced from the README) wraps this with DOM insertion, highlight.js, and synchronized-scroll behavior for side-by-side mode.

Tech Stack: TypeScript compiled to both CommonJS and ESM output plus browser bundles via Webpack, styled with a PostCSS pipeline (autoprefixer, cssnano) for the shipped CSS bundle. Runtime dependencies are minimal — diff for the underlying diff/patch primitives and @profoundlogic/hogan for Mustache templating — with highlight.js as an optional peer for syntax highlighting. The project also builds and deploys its own demo website (webpack.website.ts, Terraform config for hosting) alongside the library.

Code Quality: Tests live under src/__tests__/ with one suite per major module (diff-parser-tests.ts, line-by-line-tests.ts, side-by-side-printer-tests.ts, file-list-renderer-tests.ts, hogan-cache-tests.ts, utils-tests.ts, diff2html-tests.ts), run via Jest with coverage (test:coverage) gating the validate script that also runs ESLint and Prettier checks before every version bump (preversion hook). GitHub activity shows the repo is mature (created 2014, 791 total commits, 87 releases) but currently in a low-activity/maintenance phase rather than active feature development.

API Design: The core API is deliberately small — parse() and html() — with all formatting controlled through a single Diff2HtmlConfig options object (output format, color scheme, matching strategy, etc.), so most consumers need only one function call. The optional Diff2HtmlUI class trades that minimalism for convenience, handling DOM mounting and highlight.js wiring directly so browser users don’t have to hand-assemble the pipeline themselves.