diff.quest logodiff.quest

How Diffing Actually Works

Spotting differences between two pieces of text is effortless for the human eye. Teaching a computer to do the same, finding the shortest set of edits to turn one document into another, is a much harder problem. This guide walks through the core ideas behind every tool on diff.quest.

1. The Myers Difference Algorithm

Nearly every diff tool you've used, including git diff, is powered by the Myers Diff Algorithm, published by Eugene W. Myers in 1986. Our Text Diff tool uses the same algorithm at its core.

The idea is to model the problem as a graph traversal. Imagine a grid where one axis represents the characters (or lines) of the original text and the other represents the modified text. Moving right means "delete," moving down means "insert," and moving diagonally means "keep, no change." The algorithm finds the path from top-left to bottom-right with the fewest right/down moves. That path is your minimal edit script.

Myers' algorithm runs in O(ND) time, where N is the total length of both inputs and D is the number of differences. When inputs are mostly similar (small D), this is extremely fast, which is exactly the common case for comparing drafts, configs, or code revisions.

2. Granularity: Characters vs. Tokens

Running a diff at the wrong granularity produces unreadable results. diff.quest adapts automatically based on the type of data you're comparing.

Character-Level Diff (Prose)

When you paste free-form text into the Text Diff tool, we compare at the character level. Fixing a typo from "teh" to "the" highlights the exact letters that moved. This precision matters for proofreading documents, essays, or any human-readable content.

Token-Level Diff (Structured Data)

Character-level diffs fall apart on code and config files. Changing a single JSON key highlights individual quotes, colons, and braces, producing a "ransom note" effect that's impossible to read.

That's why our structured diff tools (JSON Diff, YAML Diff, XML Diff, TOML Diff, Key=Value Diff, CSV Diff, and Markdown Diff) operate on tokens instead. We break input into semantic units (words, numbers, punctuation) and diff those. When a variable name changes, the entire name is highlighted as a single unit.

3. View Modes: Split vs. Unified

There are two standard ways to display a diff, and every diff tool on diff.quest supports both:

  • Split View: Side-by-side panels showing the original on the left and the modified on the right. Changed regions within each line are highlighted inline. Best for detailed, line-by-line analysis.
  • Unified View: A single linear output where removed lines are prefixed with - and added lines with +. This is the format you see in git diff. It focuses on line-level changes for fast scanning.

4. Normalization: Why Key Order Can Be Ignored

Consider these two JSON objects:

{"name": "Alice", "age": 30}
{"age": 30, "name": "Alice"}

They are semantically identical, but a naive text diff would flag every line as changed. Our structured diff tools solve this by normalizing input before comparison:

  1. Parse: Validate the syntax and build an in-memory data structure.
  2. Sort (optional): When the Sort Keys option is enabled, reorder object keys alphabetically so equivalent structures always produce the same text. This is available for JSON and YAML diffs.
  3. Format: Reprint with consistent indentation.

With Sort Keys enabled, you only see real data changes, never noise from key reordering. With it disabled (the default), original key order is preserved so you can spot intentional ordering changes. This same normalization pipeline powers our standalone formatting tools (JSON Formatter, YAML Formatter, XML Formatter, TOML Formatter, and CSV Formatter), which let you pretty-print messy input in a single click. Need the opposite? The JSON Minifier strips all whitespace for compact payloads.

5. Validation: Catching Errors Early

Before any comparison or formatting can happen, input must be syntactically valid. All structured tools validate your input on paste and surface clear error messages if something is off. For key-value configuration files (like .env or .properties), the Key=Value Validator checks for duplicate keys, missing values, and syntax issues. For Markdown files, the Markdown Validator validates YAML frontmatter used by static site generators and AI agent configuration files, catching invalid syntax, unclosed delimiters, and duplicate keys, with an auto-fix mode that normalizes indentation, trims trailing whitespace, and sorts keys on request.

6. Tokenization: Breaking Text into Units

Tokenization is the process of splitting a raw string into meaningful pieces: words, numbers, punctuation, and whitespace. It is the foundational step behind token-level diffing, syntax highlighting, and how large language models (LLMs) process text.

Our Tokenizer tool lets you see exactly how a string breaks down into tokens interactively. It's a useful learning tool if you're curious about how NLP pipelines or LLM tokenizers work under the hood.

7. Text Statistics

Sometimes you don't need a diff. You just need to understand a single document. The Text Analytics tool gives you instant metrics: character count, word count, sentence count, paragraph count, and estimated reading time. Useful for checking copy length, writing constraints, or getting a quick profile of a document.

8. Image Comparison

Text diffing doesn't apply to images. Comparing two screenshots or design mockups requires entirely different techniques. Our Image Diff tool uses two complementary approaches:

Perceptual Hashing (pHash)

To measure overall similarity, we compute a perceptual hash for each image:

  1. Downscale to 32x32 pixels to discard noise.
  2. Convert to grayscale to focus on structure, not color.
  3. Apply DCT (Discrete Cosine Transform) to extract frequency information.
  4. Generate hash from the 8x8 low-frequency block, producing a compact 64-bit fingerprint.
  5. Compare hashes via Hamming distance for a 0 to 100% similarity score.

pHash is resilient to minor compression artifacts, resizing, and subtle color shifts. It tells you whether two images are "perceptually the same" even when their raw pixels differ.

Pixel-Level Analysis

For pinpointing exactly where images differ, we compare them pixel by pixel:

  • Highlight Mode: Pixels that differ beyond a configurable threshold are marked in red.
  • Subtract Mode: Shows the absolute RGB difference per pixel as a heatmap, making even subtle changes visible.

Visualization Modes

The Image Diff tool offers five ways to inspect changes:

  • Split: Side-by-side comparison.
  • Fade: Overlay with an opacity slider to blend between images.
  • Slider: Drag a divider across a before/after overlay.
  • Highlight: Red overlay on differing pixels.
  • Subtract: Pixel difference heatmap.

9. Privacy-First Architecture

Every operation described above (parsing, diffing, hashing, formatting) runs entirely in your browser using Web Workers. Your data never leaves your device. There are no server uploads, no analytics on your content, and no third-party processing. diff.quest works fully offline once loaded, thanks to its Progressive Web App (PWA) architecture. Read more about our commitment to privacy and the full list of available tools on the About page.

Start Comparing

Ready to try it? Open the Text Diff tool to compare two documents, or pick any format from the navigation above. Every tool is free, works instantly, and keeps your data private.