GitHub - doguyilmaz/difflab: Compare JSON, YAML, TOML and more side by side. Client-side diff tool with structured comparison, syntax highlighting and local history.

Skip to content

Navigation Menu

Sign in

Appearance settings

DiffLab

Compare JSON, YAML, TOML, and code files side by side. Runs entirely in the browser — no data leaves your machine.

difflab.doguyilmaz.com

What it does

  • Structured diff for JSON, YAML, TOML — compares parsed keys and values, not just text
  • Text diff for everything else — JS, TS, Kotlin, Swift, HTML, CSS, Markdown, plain text
  • Side-by-side and unified views with GitHub-style collapsed unchanged regions
  • Format detection from file extension or content heuristics
  • Local comparison history stored in IndexedDB via Dexie.js — search, tag, export/import
  • CodeMirror 6 editors with syntax highlighting, folding, bracket matching, search
  • Format, minify, download per panel
  • Drag & drop, file upload, keyboard shortcuts
  • Dark / light / system theme
  • Fully client-side, no server, no cookies

Stack

Framework Next.js 16 (App Router)
Language TypeScript (strict)
Runtime Bun
Styling Tailwind CSS v4
Editor CodeMirror 6
Diff jsdiff + custom structured engine
Local DB Dexie.js (IndexedDB)
Analytics Vercel Analytics

Development

Build:

Lint:

Project structure

src/
  app/           Pages + metadata (App Router)
  components/    React components (layout, editor, diff, ui)
  lib/           Core logic (diff engine, formatter, format detection, db)
  hooks/         Custom hooks (useTheme, useSettings)
  types/         Shared TypeScript types
  data/          Static sample data

License

MIT

About

Compare JSON, YAML, TOML and more side by side. Client-side diff tool with structured comparison, syntax highlighting and local history.

Topics

Resources

Readme

License

MIT license

Activity

Stars

3 stars

Watchers

1 watching

Forks

0 forks