explaingit

aykutsarac/jsoncrack.com

📈 Trending★ 44,008TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TLDR

Interactive visual graphs for JSON, YAML, XML, and CSV files. Paste raw data and instantly see its structure as an explorable node diagram.

Mindmap

mindmap
  root((repo))
    What it does
      Visualize nested data
      Convert formats
      Generate code
      Run queries
    Input formats
      JSON
      YAML
      XML
      CSV
    Output options
      Interactive graph
      TypeScript interfaces
      Go structs
      Export images
    Tech stack
      Next.js
      React
      TypeScript
    Platforms
      Web app
      VS Code extension
      Chrome extension
    Use cases
      Debug API responses
      Explore data structures
      Document configs

Things people build with this

USE CASE 1

Paste a large JSON API response and instantly see its structure as an interactive graph instead of scrolling through raw text.

USE CASE 2

Convert a YAML config file to JSON or XML format without manual rewriting.

USE CASE 3

Generate TypeScript interfaces or Go structs from a JSON object to skip writing boilerplate type definitions.

USE CASE 4

Search for specific keys or values within a complex nested data structure using the built-in search.

Tech stack

TypeScriptReactNext.jsNode.js

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice and license text.

In plain English

JSON Crack is an open-source web application that turns raw structured data, JSON, YAML, XML, and CSV, into interactive visual graphs, making it much easier to understand complex nested data structures at a glance. The core problem it solves is that large JSON or YAML files are notoriously hard to read in raw text form: deeply nested objects, arrays within arrays, and key names can be overwhelming to scan. JSON Crack renders all of that as a connected node graph where each object or array becomes a box, and relationships between them become visible lines. When you paste or import data, the tool instantly draws a navigable graph you can pan and zoom. You can explore any part of the structure interactively, search for keys or values, and understand the shape of the data at a high level. Beyond visualization, it also handles format conversion, for example, converting JSON to YAML or XML to JSON, and provides validation and pretty-printing to catch syntax errors and improve readability. Additional features include code generation: given a JSON object, it can automatically produce TypeScript interfaces, Go structs, Kotlin data classes, or Rust serde types, saving developers from writing boilerplate. You can also run jq queries (a query language for JSON) or JSONPath expressions directly against your data, and export the visualization as a PNG, JPEG, or SVG image. All processing happens in your browser, nothing is sent to any server. The tool is built with Next.js and React in TypeScript, and is available as a hosted web app, a VS Code extension, and a Chrome extension. There is also a React npm package for embedding the visualization in your own applications. Developers, API designers, and data engineers would use JSON Crack when debugging API responses, exploring unfamiliar data structures, or documenting the shape of a complex configuration file.

Copy-paste prompts

Prompt 1
I have a large JSON API response that's hard to understand. How do I use JSON Crack to visualize its structure?
Prompt 2
Can JSON Crack generate TypeScript types from my JSON data? Show me how to use it.
Prompt 3
I need to convert this YAML file to JSON. Does JSON Crack support that conversion?
Prompt 4
How do I run a jq query or JSONPath expression in JSON Crack to filter my data?
Prompt 5
Can I embed JSON Crack's visualization in my own React app? What's the npm package?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.