JSON Crack is an open source web app that transforms JSON and other structured data formats into interactive, navigable diagrams. Instead of squinting at curly braces, you get a living map of your data that you can pan, zoom, and export. The project lives at AykutSarac/jsoncrack.com and powers the site jsoncrack.com.
AykutSarac
User
Key features
Out of the box, the app covers the full lifecycle from inspection to export.
- Visualizer: Graph and tree modes for JSON, YAML, CSV, XML, and TOML, rendered with Reaflow (Reaviz, 2023).
- Converters: Transform between formats like JSON to CSV or XML to JSON; generate JSON Schema and mock data.
- Code and queries: Create TypeScript interfaces, Golang structs, and run JSONPath or jq queries in the browser.
A problem worth visualizing
Developers and analysts often face unwieldy payloads: deeply nested objects, arrays of arrays, or APIs that change shape release to release. Formatting helps, but it still forces you to parse structure in your head.
JSONCrack reframes the task as spatial exploration. Objects become nodes, relationships become edges, and your brain can trace shape and scale in seconds. The approach resonated with the community, earning attention on Hacker News (Y Combinator, 2022) and strong reviews on Product Hunt (Product Hunt, 2022).
The solution, at a glance
Paste or load data in JSON, YAML, CSV, XML, or TOML. JSON Crack parses it locally in your browser and renders either a graph or a tree view. You can validate and format data, run JSONPath or jq queries, generate types and schemas, and export images. Nothing leaves your device, so debugging a sensitive payload is safe by default.
Why it clicks
What I like most is the speed from paste to picture. On large payloads, a 2D layout instantly shows fan out, hotspots, and where arrays or nested maps explode. It is also a great teaching tool for explaining API responses to teammates who do not live in JSON all day.
Under the hood
The app is a TypeScript, React, and Next.js 14 project that leans on a small, focused set of libraries. Rendering is handled by Reaflow, editing by Monaco Editor React, state by Zustand, and UI by Mantine. The dependency roster in package.json is pragmatic and performance minded.
The graph is built from parsed JSONC tokens using jsonc-parser. The core traversal in src/features/editor/views/GraphView/lib/jsonParser.ts walks the AST, creates a node per object or array, and wires edges for relationships. It computes compact bounding boxes for node labels via calculateNodeSize and carries a path so the UI can sync selection and viewport.
{`// Build a graph from a JSON string (Apache-2.0, simplified excerpt)
import { parser } from "src/features/editor/views/GraphView/lib/jsonParser";
const json = '{"user":{"id":1,"tags":["admin","beta"],"profile":{"name":"Ada"}}}';
const { nodes, edges } = parser(json);
// nodes: [{ id: "1", text: ... }, ...]
// edges: [{ id: "1", from: "1", to: "2", text: "profile" }, ...]
`} Application state is centralized in small stores. The JSON source and loading flags live in src/store/useJson.ts. The graph viewport, layout direction, nodes, and edges live in useGraph.ts. Switching views is handled by LiveEditor.tsx, which toggles between the Reaflow graph and a tree view. The marketing site itself is a Next.js page at src/pages/index.tsx.
Architecture wise, it is clean and composable: parse and annotate data, store graph state in a small Zustand slice, render via Reaflow, and integrate with Monaco for text editing. The node limit is configurable through an environment variable (NEXT_PUBLIC_NODE_LIMIT) called out in the README, which prevents runaway renders on huge inputs.
Use cases
JSON Crack shines when you need to:
- Understand third party API payloads fast
- Demo or teach how a response is structured
- Visually compare two versions of a schema
- Generate types from a representative payload.
- With support for YAML, CSV, XML, and TOML, it also helps analysts explore data dumps that do not start as JSON.
Community and contribution
The project is actively maintained and welcomes contributions. Start with the Contributing Guide and the issue tracker. The guidance emphasizes rendering performance and a consistent TypeScript style, and it encourages profiling React re-renders. If you prefer to run locally or containerize, the repo includes a Dockerfile and docker-compose.yml.
Suggestions and PR ideas
Looking at the codebase, here are practical, low risk improvements that would make strong pull requests:
1) Add unit tests for core parsing. A tiny Jest or Vitest suite for jsonParser.ts and useGraph.ts would lock in graph invariants and enable safe refactors. Focus on arrays inside arrays, empty objects in arrays, and very long strings.
2) Web Worker parsing for large inputs. Offload
parseTreeand traversal to a Worker to keep the UI responsive on big datasets. The store could expose a loading flag tied to Worker messages. This aligns with feedback about large payloads in the HN thread (Y Combinator, 2022).3) Long value handling and wrapping. Very long scalar values can blow out node widths. Clamp node content with CSS and provide hover-to-expand or a detail panel to view full text. Consider a per-node character limit with ellipsizing.
4) Mobile friendly read only mode. A simplified renderer with pan and tap-to-expand would address reports of mobile incompatibility on older threads while keeping the desktop editor intact.
5) Accessibility pass. Ensure zoom controls and the canvas are keyboard reachable with appropriate ARIA labels, and expose a tree-only mode by default for screen reader users.
6) Developer docs. A brief architecture overview in the README that links to key files and explains the rendering data model (nodes, edges, paths) would reduce onboarding friction for new contributors.
Usage and license terms
JSON Crack is licensed under the Apache License 2.0, as noted in LICENSE.md. In short, you can use, modify, and distribute the software, even commercially, as long as you include the license and notices, and you respect patent and trademark terms. There is no warranty and no liability; see the file for the full legal text.
About the team behind it
JSON Crack is maintained by Aykut Sarac and collaborators, and it connects to a companion product called ToDiagram. ToDiagram offers advanced, hosted diagramming for JSON, YAML, CSV, and XML, with features like visual editing, search and filter, team collaboration, and a browser extension. It also experiments with AI assisted diagramming. If you need cloud storage, sharing, and team oriented workflows, ToDiagram fills that gap while JSON Crack remains the open source foundation (ToDiagram, 2024).
Impact and what is next
Tools like JSON Crack lower the cognitive load of working with complex data. The model here is compelling: keep parsing and rendering fully local for privacy, offer powerful format conversion and code generation, and keep the UI minimal. With workerized parsing, more graceful mobile behavior, and a thin test suite, the project would be even more welcoming to both users and contributors. Given the popularity of JSONPath and jq, deeper integrations or cookbook style examples could further expand its reach.
Conclusion
If you routinely wrangle structured data, JSON Crack is a handy addition to your toolkit. Explore the repo, try the editor, and consider contributing a test or UX improvement. The source is approachable, the architecture is clear, and the payoff is immediate.
Explore the repository and join the community:
https://github.com/AykutSarac/jsoncrack.com
JSON Crack: Turning Complex Data Into Clickable Diagrams