README

JSON Crack

  
    The open-source JSON Editor.
    
    Learn more »
    
    
    ToDiagram
    ·
    Discord
    ·
    Website
    ·
    Issues
    ·
    VS Code
    ·
    Chrome
  




 About the Project



 Visualize JSON into interactive graphs

JSON Crack is a tool for visualizing JSON data in a structured, interactive graphs, making it easier to explore, format, and validate JSON. It offers features like converting JSON to other formats (CSV, YAML), generating JSON Schema, executing queries, and exporting visualizations as images. Designed for both readability and usability.

 Visualizer: Instantly convert JSON, YAML, CSV, and XML into interactive graphs or trees in dark or light mode.
 Convert: Seamlessly transform data formats, like JSON to CSV or XML to JSON, for easy sharing.
 Format & Validate: Beautify and validate JSON, YAML, and CSV for clear and accurate data.
 Code Generation: Generate TypeScript interfaces, Golang structs, Kotlin data classes, Rust serde types, and JSON Schema.
 JSON Schema: Create and validate JSON Schema.
 Advanced Tools: Run jq and JSON path queries.
 Export Image: Download your visualization as PNG, JPEG, or SVG.
 Privacy: All data processing is local; nothing is stored on our servers.

 Recognition


  




 Integrations

- VS Code Extension
- Chrome Extension
- npm Package (jsoncrack-react)

 Contributing

- Found a bug or missing feature? Open an issue on GitHub Issues.
- Want to contribute code or docs? Start with our contribution guide.

 Sponsors & Support

If you find JSON Crack useful, you can support the project by using ToDiagram. For sponsorship inquiries, reach out at [email protected].

 Stay Up-to-Date

JSON Crack officially launched as v1.0 on the 17th of February 2022 and we've come a long way so far. Watch releases of this repository to be notified of future updates:





 Getting Started

To get a local copy up and running, please follow these simple steps.

 Prerequisites

Here is what you need to be able to run JSON Crack.

- Node.js (Version: =24.x)
- pnpm (Version: =10)


 Development

 Setup

1. Clone the repo into a public GitHub repository (or fork https://github.com/AykutSarac/jsoncrack.com/fork). If you plan to distribute the code, read the LICENSE for additional details.

   sh
   git clone https://github.com/AykutSarac/jsoncrack.com.git
   

2. Go to the project folder

   sh
   cd jsoncrack.com
   

3. Install packages

   sh
   pnpm install
   

4. Run the web app

   sh
   pnpm dev:www

    Running on http://localhost:3000/
   

 Useful Commands

From repository root:

sh
 Web app
pnpm dev:www
pnpm build:www

 VS Code extension
pnpm dev:vscode
pnpm build:vscode
pnpm lint:vscode
pnpm lint:fix:vscode

 Chrome extension
pnpm dev:chrome
pnpm build:chrome
pnpm lint:chrome

 All workspaces
pnpm dev
pnpm build
pnpm lint


 Debug VS Code Extension

1. Open repository root in VS Code.
2. Press F5.
3. Select Run VSCode Extension (apps/vscode) when prompted.
4. In the Extension Deve

Top issues

Discussions

Latest release

🚀 JSONCrack v5.0.0

A major release focused on modularity, developer experience, and a leaner codebase.

✨ Highlights:

 jsoncrack-react npm package: The graph visualization canvas is now available as a standalone, reusable React component — jsoncrack-react on npm. Embed interactive JSON graphs in your own apps with a simple  component. Supports light/dark themes, configurable layout directions, zoom controls, and node click callbacks.

 Monorepo with Turborepo: Restructured the project into a monorepo with separated workspaces — apps/www (website), apps/vscode (VS Code extension), and