What This Diff Checker Does
This page compares two editable inputs side by side and highlights what changed between them. It is built on Monaco Diff Editor, the same editor family used in VS Code, so the UI behaves more like a code review pane than a plain text comparison widget.
Both panes stay editable. You can paste content into either side, switch the detected language, format supported code, swap the inputs, or run JSON-specific cleanup tools before reviewing the result.
How The Comparison Works
Monaco computes the diff and renders inserted, removed, and modified regions directly in the editor. In this implementation the diff editor uses Monaco's default advanced diff algorithm, with line wrapping, code lenses, gutter actions, and editable original text enabled.
In practice that means the editor first finds changed line ranges, then drills down to the character-level edits inside those ranges. Small word changes inside a long line stay readable, while larger block edits still show up as grouped insertions and deletions.
Implementation Details In This Tool
- Monaco editor stack – the page uses
@monaco-editor/react to mount Monaco's diff editor in the browser. - Automatic language detection on paste – when you paste into either pane, the tool tries to identify HTML, JavaScript, TypeScript, JSON, YAML, or CSS and updates syntax highlighting automatically.
- Prettify for supported languages – the “Prettify” button runs Prettier in the browser for HTML, Markdown, CSS, JavaScript, JSON, TypeScript, and TypeSpec.
- JSON repair – when the active language is JSON, the tool can run
jsonrepair against the focused pane to fix common syntax issues before diffing. - Recursive JSON key sorting – the JSON sort action uses Prettier with
prettier-plugin-sort-json so object key order stops creating noisy diffs. - Swap without re-pasting – the swap button exchanges original and modified content so you can reverse the review direction instantly.
When These Extras Matter
Raw text diffs are often noisy for structured content. The extra actions on this page exist to reduce that noise before you start reviewing.
- JSON API responses – sort keys first, then diff the payloads to isolate real value changes instead of property-order churn.
- Config files – prettify both versions so indentation changes do not drown out the actual edits.
- Broken copied JSON – repair the pasted snippet, then compare the corrected version to the previous output.
- Code review snippets – let Monaco highlight the exact edited tokens instead of manually scanning two blocks.
Practical Examples
- Compare two versions of a
tsconfig.json file after a framework upgrade. - Review two API responses where the same JSON keys appear in different orders.
- Paste old and new CSS rules to see exactly which selectors or values changed.
- Check an edited paragraph or contract clause without sending the text to a server.
Privacy
The comparison runs in your browser. The text you paste into Monaco, the formatting step, and the JSON repair/sort actions all happen locally on your device.
Related Tools
You might also find these tools useful:
- JSON Validator for checking whether a payload is valid before comparing versions
- Base64 Encoder when you need to inspect or compare encoded text
- URL Decode for normalizing encoded URLs before diffing request strings