docs(website): add json diff documentation (#723)

Author: antonreshetov

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

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' },
           ],
         },
       ],

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
 

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
 
 <AppVersion text=">=3.8" />
 
-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.

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
+
+<AppVersion text=">=5.1" />
+
+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.