JSON Crack — Interactive JSON, YAML, XML and CSV Visualizer

Introduction

JSON Crack converts structured data into interactive graph visualizations that make complex nested structures easy to understand. Instead of reading raw text, you see nodes and edges that represent keys, values, and relationships. It is particularly useful for debugging APIs, exploring config files, and understanding unfamiliar data schemas.

What JSON Crack Does

• Parses JSON, YAML, XML, CSV, and TOML into a visual node graph
• Provides search and filtering to locate specific keys or values in large documents
• Supports collapsing and expanding nested nodes for focused exploration
• Exports visualizations as PNG or SVG images for documentation
• Offers a self-hostable web app and an embeddable widget for other applications

Architecture Overview

JSON Crack is a Next.js application built with React and TypeScript. The core parsing engine converts structured data into a tree model, which is then rendered as an interactive graph using a custom canvas-based renderer. The layout algorithm arranges nodes hierarchically to minimize edge crossings. Data transformations happen entirely client-side, so no data leaves the browser.

Self-Hosting & Configuration

• Deploy with Docker: docker run -p 8080:8080 aykutsarac/jsoncrack.com
• Or build from source with Node.js 18+ and npm
• Configure the app port and base path via environment variables
• No external database or backend service required
• Embed the editor widget in other apps using the published npm package

Key Features

• Supports five data formats: JSON, YAML, XML, CSV, TOML
• Client-side processing keeps sensitive data private
• Interactive graph with zoom, pan, collapse, and search
• JSON Schema validation and error highlighting
• Dark and light theme support with customizable node colors

Comparison with Similar Tools

• JSON Editor Online — form-based editor; JSON Crack focuses on graph visualization
• JSON Viewer browser extensions — limited to JSON only; JSON Crack handles five formats
• D3-based custom solutions — require coding; JSON Crack is ready to use out of the box
• jq — CLI-focused text processing; JSON Crack provides a visual, interactive experience

FAQ

Q: Does my data get sent to any server? A: No. All parsing and rendering happens in the browser. Your data never leaves your machine.

Q: Can I embed JSON Crack in my own application? A: Yes. The project publishes an embeddable React widget via npm that you can integrate into any web app.

Q: What is the maximum file size it can handle? A: Performance depends on browser memory. Documents up to a few megabytes render well; very large files may need the collapse feature to stay responsive.

Q: Is there a VS Code extension? A: Yes. JSON Crack offers a VS Code extension that lets you visualize JSON files directly inside the editor.

Sources

• https://github.com/AykutSarac/jsoncrack.com
• https://jsoncrack.com/docs