JSON Crack

JSON Crack is an open-source JSON editor designed to visualize JSON data as interactive graphs. It provides tools for data exploration, formatting, and validation. Key capabilities include:

• Visualizer: Converts JSON, YAML, CSV, and XML into interactive graphs or trees (supports dark/light modes).
• Format & Validate: Beautifies and validates JSON, YAML, and CSV.
• Conversion: Transforms data between formats (e.g., JSON to CSV, XML to JSON).
• Code Generation: Generates TypeScript interfaces, Golang structs, Kotlin data classes, Rust serde types, and JSON Schema.
• Advanced Querying: Supports jq and JSON path queries.
• Export: Allows downloading visualizations as PNG, JPEG, or SVG.
• Privacy: All data processing is performed locally; no data is stored on servers.

The component renders nodes as SVG elements. Performance is tied to the number of nodes.

• Recommended range: 300–500 nodes for smooth interaction.
• Safety Limit: maxRenderableNodes defaults to 1500. If exceeded, the component renders a fallback instead of the canvas.
• Optimization: Flatten or trim data before passing it to json. Large arrays of primitives expand the graph quickly.
• Custom Fallback: Use the renderNodeLimitExceeded prop to provide a custom UI when the node count exceeds the limit.

<JSONCrack
  json={data}
  maxRenderableNodes={300}
  renderNodeLimitExceeded={(count, max) => (
    <p>Too large to render ({count} nodes, limit is {max})</p>
  )}
/>

To start the development environment for the Chrome Extension, run the following command from the repository root. This executes vite build --watch, which continuously updates the apps/chrome-extension/dist directory as you make changes.

pnpm --filter chrome-extension dev

JSON Crack is available through several integration methods:

• VS Code Extension: Available on the VS Code Marketplace.
• Chrome Extension: Available on the Chrome Web Store.
• React Component: Available via the jsoncrack-react npm package.

To run a local development instance of the JSON Crack web application, ensure you meet the prerequisites and follow the setup steps below.

Prerequisites

• Node.js: Version >= 24.x
• pnpm: Version >= 10

Setup Steps

1. Clone the repository:

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

2. Navigate to the project folder:

   cd jsoncrack.com

3. Install dependencies:

   pnpm install

4. Start the web app development server:

   pnpm dev:www

The application will be available at http://localhost:3000/.

To debug the extension using the built-in VS Code launch configurations:

1. Open the monorepo root in VS Code.
2. Press F5 to launch the Run VSCode Extension configuration. This will build the project and open a new 'Extension Development Host' window.
3. To apply changes without restarting the entire host, press Cmd+R (macOS) or Ctrl+R (Windows/Linux) within the Extension Development Host window to reload.

Install the package via npm. Note that react and react-dom version 18 or higher are required as peer dependencies.

To ensure the component renders correctly, you must import the library's stylesheet once in your application's entry point.

npm install jsoncrack-react

import "jsoncrack-react/style.css";

To build a production version of the extension and load it into your browser, follow these steps:

1. Build the extension from the repository root:

pnpm --filter chrome-extension build

2. Open Chrome and navigate to chrome://extensions.
3. Enable Developer mode in the top right corner.
4. Click the Load unpacked button.
5. Select the apps/chrome-extension/dist directory.

The extension is located in apps/vscode within the monorepo. To develop locally, ensure you have the following prerequisites:

• Node.js >=20
• pnpm >=10

Follow these steps to build the extension:

1. From the monorepo root, install all dependencies:

pnpm install

2. Navigate to the extension directory and run the build script:

cd apps/vscode
pnpm run build

# Install dependencies from repo root
pnpm install

# Build the extension
cd apps/vscode
pnpm run build

The JSON Crack extension visualizes JSON data as an interactive diagram within VS Code. It parses open JSON files and displays the structure as a connected graph where nodes represent objects, arrays, and values.

To use it:

1. Install the extension from the VS Code marketplace.
2. Open any .json file in your editor.
3. Click the JSON Crack icon located in the menubar at the top right of the editor window.

Use the JSONCrack component to visualize JSON data as an interactive node graph.

Important: The parent container of the JSONCrack component must have an explicit height (e.g., via inline styles or CSS) to ensure the canvas is visible.

import { JSONCrack } from "jsoncrack-react";

export function Example() {
  return (
    <div style={{ height: 700 }}>
      <JSONCrack
        json={{
          user: {
            id: 1,
            name: "Ada",
            tags: ["admin", "staff"],
          },
        }}
      />
    </div>
  );
}