JSON Data Visualizer

# Clone the repository
git clone https://github.com/AykutSarac/jsoncrack.com.git
cd jsoncrack.com

# Install dependencies
npm install

# Start development server
npm run dev

# Or build and serve for production
npm run build
npm start

# Run with Docker
docker run -d -p 8888:8080 \
  --name json-crack \
  --restart unless-stopped \
  jsoncrack/jsoncrack

# Access at http://localhost:8888

version: "3.8"
services:
  json-crack:
    image: jsoncrack/jsoncrack
    container_name: json-crack
    ports:
      - "8888:8080"
    restart: unless-stopped

{
  "experiment": {
    "id": "EXP-2026-0142",
    "title": "Effect of Temperature on Protein Folding Kinetics",
    "principal_investigator": {
      "name": "Dr. Jane Smith",
      "orcid": "0000-0002-1234-5678",
      "affiliation": "Department of Biochemistry"
    },
    "protocol": {
      "version": "3.2",
      "steps": [
        {
          "order": 1,
          "name": "Sample Preparation",
          "duration_minutes": 120,
          "equipment": ["centrifuge", "spectrophotometer"],
          "parameters": {
            "temperature_celsius": 25,
            "buffer_ph": 7.4,
            "concentration_mm": 0.5
          }
        },
        {
          "order": 2,
          "name": "Thermal Denaturation",
          "duration_minutes": 180,
          "temperature_range": {
            "start": 25,
            "end": 95,
            "step": 1,
            "unit": "celsius"
          }
        },
        {
          "order": 3,
          "name": "Data Acquisition",
          "instrument": "circular_dichroism_spectrometer",
          "wavelength_range_nm": [190, 260]
        }
      ]
    },
    "samples": [
      {
        "id": "S001",
        "condition": "wild_type",
        "replicates": 3,
        "measurements": {
          "tm_celsius": 68.2,
          "delta_h_kcal": -45.3,
          "r_squared": 0.997
        }
      }
    ]
  }
}

import requests
import json

# Fetch metadata from CrossRef API
response = requests.get(
    "https://api.crossref.org/works/10.1038/nature12373"
)
data = response.json()

# Save for visualization in JSON Crack
with open("crossref_response.json", "w") as f:
    json.dump(data, f, indent=2)

# Open crossref_response.json in JSON Crack to explore the schema
# This reveals the nested structure of author arrays, funding info,
# reference lists, and license metadata

import { JsonCrackEmbed } from "jsoncrack-react";
import { useState } from "react";

function DataSchemaViewer({ experimentData }) {
  const [jsonContent, setJsonContent] = useState(
    JSON.stringify(experimentData, null, 2)
  );

  return (
    <div style={{ width: "100%", height: "600px" }}>
      <h3>Experiment Data Schema</h3>
      <JsonCrackEmbed
        json={jsonContent}
        style={{ width: "100%", height: "100%" }}
      />
    </div>
  );
}

<iframe
  src="https://jsoncrack.internal.lab/widget"
  width="100%"
  height="600"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
></iframe>