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.