This project provides a comprehensive tool for visually comparing and analyzing two JSON files. It allows users to clearly see the structural and data differences between JSONs, with a focus on improving readability and usability through interactive visualizations. The tool offers side-by-side comparison, inline diffing, tree structure views, and much more, making it an essential utility for anyone working with complex JSON data.
• Compare two JSON files side by side with synchronized scrolling or independent scrolling.
• Color-coded changes (green for added, red for removed, yellow for modified).
• Interactive tooltips for differences and quick actions like merging and toggling views.
• View JSON files in a single column with inline diffing for direct comparison.
• Highlight changes with color-coded inline diffs and allow accepting or rejecting changes.
• Visualize JSON data in a collapsible tree structure.
• Expand and collapse nodes to navigate through large JSON files.
• Tooltip details and visual indicators for differences between JSONs.
• A summary of the differences grouped by types (added, removed, modified).
• Filter differences and navigate quickly to the changed sections.
• Display JSON schema mappings and highlight deviations from the expected structure.
• Show mismatched types and missing required keys.
• Track versions of JSON files and view detailed changelogs.
• Rollback options to revert to previous versions.
• Edit JSON files in real-time within the comparison interface.
• Merge changes interactively and undo/redo changes as needed.
• Display additional insights and explanations for differences, including schema conflicts.
• Search for specific keys or values in JSON files and highlight differences.
• Quick navigation between differences with “Next Difference” button.
• Export the changes as a patch or merged JSON.
• Download a detailed diff report in formats like HTML, CSV, or text.
• Visualize the hierarchy of JSON data with color-coded nodes for added, removed, and modified elements.
• Differentiate node types with distinct shapes for clarity.
• Expand and collapse nodes to reveal or hide data, making navigation easier.
• Automatically collapse unchanged sections for a cleaner view.
• Visualize the depth of JSON nesting with proper indentation and hierarchy lines.
• Highlight edges between nodes to show structural changes and differences between JSON files.
• Toggle between views to show only differences or the full tree structure.
• Filter by change type (added, removed, modified).
• Hover over nodes to view detailed change information, including old and new values.
• Different edge styles (solid, dashed, bold) to indicate the type of change in the structure.
• Clickable nodes for zooming in on details.
• Breadcrumb navigation for deep nesting levels.
• Hierarchical or circular layouts for visualizing JSON data.
• Interactive zoom and pan for large JSON files.
• Enable zoom and pan functionalities to focus on specific sections of the JSON data.
• A high-level summary of differences, including metrics for added, removed, and modified nodes.
• Merge changes directly in the tree structure, allowing users to select changes from both JSON files.
• Node.js and npm (for running the development server and building the project).
- Clone the repository
git clone https://github.com/Rubix982/StructDiff.git
cd StructDiff- Start the development server,
npm run startIf you have suggestions, bug fixes, or improvements, feel free to fork the repository and submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.