Diff Viewer
UtiliStudio Workspace ToolSpot differences between text files, configuration snippets, and structured payloads. Features side-by-side split view, intra-line highlighting, and JSON normalization.
Key Capabilities
Side-by-Side & Unified Comparison
Compare documents using a dual-pane split layout for visual alignment or switch to a unified diff view for compact code reviews.
Intra-Line Word Highlighting
Pinpoint character and word modifications within modified lines using granular Myers LCS difference analysis.
JSON & XML Semantic Normalizers
Sort JSON object keys alphabetically and normalize XML attribute ordering to avoid false difference positives caused by whitespace.
Change Region Navigation
Jump seamlessly between added, modified, and removed chunks with detailed statistics on total insertions and deletions.
How to Use Diff Viewer
Paste original and modified text
Enter your base document into the left pane and the modified version into the right pane.
Select comparison mode & options
Toggle between side-by-side and unified views, and configure whitespace or case sensitivity rules.
Review highlighted differences
Examine added green lines, removed red lines, and specific intra-line word changes.
Navigate changes & export
Use chunk navigation controls to step through edits and inspect summary insertion and deletion tallies.
Practical Examples
Comparing JSON Configuration Files
Detect added environment variables, modified port settings, and removed deprecated properties between releases.
Original:
{
"service": "billing",
"port": 3000,
"debug": true
}
Modified:
{
"service": "billing",
"port": 8080,
"ssl": true
}Diff Summary:
- Modified: "port": 3000 → 8080
- Removed: "debug": true
+ Added: "ssl": trueCommon Use Cases
Code & Pull Request Review
Inspect diffs between local working files and upstream branches before submitting commits or pull requests.
Configuration Auditing
Detect inadvertent parameter alterations between development, staging, and production environment configs.
API Payload Comparison
Compare actual API responses against expected fixtures to verify payload shape fidelity.
Copy & Content Revisions
Track editorial additions, deletions, and phrasing adjustments between draft iterations of technical articles.
Frequently Asked Questions
Which diff algorithms does the engine use?
The comparator uses a pure TypeScript implementation of the Myers Longest Common Subsequence (LCS) algorithm to produce concise line and intra-line word diffs.
Can I normalize JSON payloads before comparing?
Yes. Enabling the JSON Normalizer formats and sorts object keys alphabetically so that harmless property reordering does not register as differences.
How does Diff Viewer highlight intra-line edits?
The comparator performs line-level diffing and then computes character- and word-level edits within modified lines, highlighting specific token insertions and deletions.
Related Developer Tools
Beautify, minify and validate JSON with syntax highlighting.
Live Markdown editor and preview with real-time rendering, word count, and HTML export.
Inspect, format, and visualize structured markup and HTML documents.
Convert data bidirectionally between YAML and formatted JSON with syntax validation.
Ready to use Diff Viewer?
Launch the full workspace tool directly in your browser.