diff --git a/README.md b/README.md
index d19a5982..4260299c 100644
--- a/README.md
+++ b/README.md
@@ -112,6 +112,7 @@ A calculator-style notebook for natural-language calculations, conversions, and
Built-in utilities for the small tasks that usually send you to a browser tab:
+- **Compare:** JSON Diff
- **Text:** Case Converter, Slug Generator, URL Parser
- **Crypto:** Hash/HMAC Generator, Password Generator, UUID
- **Encoders:** URL, Base64, JSON to TOML/XML/YAML, Color Converter
diff --git a/docs/website/.vitepress/config.mts b/docs/website/.vitepress/config.mts
index 52d9a56d..915eb222 100644
--- a/docs/website/.vitepress/config.mts
+++ b/docs/website/.vitepress/config.mts
@@ -138,7 +138,8 @@ export default defineConfig({
{
text: 'Tools',
items: [
- { text: 'Developer Tools', link: '/documentation/tools/' },
+ { text: 'Overview', link: '/documentation/tools/' },
+ { text: 'JSON Diff', link: '/documentation/tools/json-diff' },
],
},
],
diff --git a/docs/website/documentation/index.md b/docs/website/documentation/index.md
index 17efdfb4..a754908e 100644
--- a/docs/website/documentation/index.md
+++ b/docs/website/documentation/index.md
@@ -1,6 +1,6 @@
---
title: Documentation Overview
-description: "Explore the massCode documentation for code snippets, markdown notes, math notebook, storage, sync, themes, and built-in developer tools."
+description: "Explore the massCode documentation for code snippets, markdown notes, math notebook, storage, sync, themes, JSON Diff, and built-in developer tools."
---
# Overview
@@ -25,7 +25,7 @@ Math is a calculator-style notebook for quick development math without leaving m
## Tools
-Tools covers the small one-off tasks that usually send you to a browser tab: encoders, decoders, generators, hash utilities, and text converters. Categories are listed on the left, and the active tool opens on the right.
+Tools covers the small one-off tasks that usually send you to a browser tab: JSON comparison, encoders, decoders, generators, hash utilities, and text converters. Categories are listed on the left, and the active tool opens on the right.
## General Settings
diff --git a/docs/website/documentation/tools/index.md b/docs/website/documentation/tools/index.md
index 40cbcb49..d4d5b652 100644
--- a/docs/website/documentation/tools/index.md
+++ b/docs/website/documentation/tools/index.md
@@ -1,38 +1,82 @@
---
-title: Developer Tools
-description: "Use built-in developer tools in massCode for text conversion, hashing, HMAC generation, URL parsing, and other quick tasks."
+title: Overview
+description: "Use built-in developer tools in massCode for JSON diffing, text conversion, hashing, HMAC generation, URL parsing, and other quick tasks."
---
-# Developer tools
+# Tools overview
-Tools is for the small developer tasks that should take seconds, not a trip to a random website. Use it when you need to convert, encode, hash, or generate something quickly without leaving massCode.
+Tools is for the small developer tasks that should take seconds, not a trip to a random website. Use it when you need to compare JSON, convert, encode, hash, or generate something quickly without leaving massCode.
The available tools are grouped by category:
+## Compare
+
+### [JSON Diff](/documentation/tools/json-diff)
+
+Compare two JSON documents side by side with validation, filters, and a tree diff for nested changes.
+
## Text tools
-- Case Converter
-- Slug Generator
-- URL Parser
+### Case Converter
+
+Convert text between common casing formats such as camelCase, snake_case, kebab-case, and uppercase.
+
+### Slug Generator
+
+Turn free-form text into a URL-friendly slug.
+
+### URL Parser
+
+Split a URL into its protocol, host, path, query, and hash parts.
## Cryptography & Security
-- Hash Generators
-- HMAC Generators
-- Password Generators
-- UUID Generators
+### Hash Generators
+
+Generate one-way hashes from text input.
+
+### HMAC Generators
+
+Build keyed message authentication hashes from a secret and a message.
+
+### Password Generators
+
+Generate random passwords with configurable character sets.
+
+### UUID Generators
+
+Create unique identifiers for fixtures, payloads, and test data.
## Encoders & Decoders
-- URL
-- Base64
-- JSON ⇄ TOML/XML/YAML
-- Text ⇄ ASCII/Binary/Unicode
-- Color Converter
+### URL
+
+Encode or decode URL strings safely.
+
+### Base64
+
+Convert plain text to and from Base64.
+
+### JSON ⇄ TOML/XML/YAML
+
+Transform JSON between common structured data formats.
+
+### Text ⇄ ASCII/Binary/Unicode
+
+Convert text into different low-level or escaped representations and back.
+
+### Color Converter
+
+Translate color values between supported formats.
## Generators
-- JSON Generator
-- Lorem Ipsum Generator
+### JSON Generator
+
+Build mock JSON payloads with typed fields for testing and demos.
+
+### Lorem Ipsum Generator
+
+Generate placeholder words, sentences, or paragraphs.
diff --git a/docs/website/documentation/tools/json-diff.md b/docs/website/documentation/tools/json-diff.md
new file mode 100644
index 00000000..c6243a0c
--- /dev/null
+++ b/docs/website/documentation/tools/json-diff.md
@@ -0,0 +1,40 @@
+---
+title: JSON Diff
+description: "Compare two JSON documents side by side in massCode with validation, filters, and a tree diff."
+---
+
+# JSON Diff
+
+
+
+JSON Diff lets you compare two JSON documents side by side without leaving massCode. It is useful for checking API responses, fixture changes, configuration edits, and generated JSON payloads.
+
+## Where to find it
+
+Open **Tools** in the left rail, then go to **Compare** → **JSON Diff**.
+
+## What it does
+
+- Shows the original and modified JSON in two editors
+- Validates each side independently
+- Formats valid JSON on paste and blur
+- Builds a tree-based diff for nested objects and arrays
+- Highlights added, removed, and modified values
+- Filters the diff by change type
+- Keeps both input editors scrolled in sync
+- Uses the same editor font settings as the main code editor
+
+## How to use it
+
+1. Paste the original JSON into the left editor.
+2. Paste the modified JSON into the right editor.
+3. Review the diff tree below the editors.
+4. Use the checkboxes to focus on added, removed, or modified nodes.
+5. Expand or collapse nested objects and arrays as needed.
+
+## Notes
+
+- Both inputs must contain valid JSON before the diff viewer appears.
+- Validation errors are shown under each editor separately.
+- If only one side is filled, the tool stays in the empty state instead of guessing missing data.
+- Array move visualization is not exposed as a separate state. In this version, the tool prefers predictable output over compact move semantics.