AykutSarac/jsoncrack.com

This system is a JSON visualization platform that transforms structured data into interactive graphs and trees. It provides a web-based editor for importing, querying, and validating JSON alongside YAML, XML, and CSV, while offering type generation for multiple programming languages. The platform extends its capabilities through dedicated VS Code and Chrome extensions, allowing users to visualize JSON data directly within their development environment or browser.

The website's public directory now includes essential configuration and asset files. A .nojekyll file has been added to prevent GitHub Pages from processing the site with Jekyll, and a CNAME file has been created to map the domain jsoncrack.com. Additionally, new SVG assets have been introduced: a custom cursor icon (cursor.svg) and a diagram preview image (diagram.svg) which references the cursor asset.

apps/www/public · high confidence

The editor area now includes a new BottomBar component providing status indicators (valid/invalid), a toggle for live transform, a manual transform button, and a format selection menu. A new ExternalMode component displays a modal with FAQs and upgrade information when the app is accessed outside the primary domain. Additionally, new components for the fullscreen dropzone, live editor view switching (Graph/Tree), and the Monaco text editor with schema validation and unsaved-change warnings have been added.

apps/www/src/features/editor · high confidence

The www application is introduced as a standalone Next.js export site within a Turborepo workspace, providing the core user-facing editor and documentation interfaces. This change establishes the application's build and deployment infrastructure, including a multi-stage Dockerfile for nginx-based serving, a docker-compose configuration, and specific environment variables (NEXT\_PUBLIC\_NODE\_LIMIT) to control graph rendering performance. It also defines the application's code quality standards via new ESLint and Prettier configurations, sets up static site generation via next-sitemap, and introduces the foundational data models (FileFormat, TypeLanguage, ViewMode) that drive the editor's file handling and visualization capabilities.

apps/www · high confidence

This change adds the JSON Crack Chrome Extension (Manifest v3, version 0.1.2) to the repository. The extension injects a segmented control on pages serving JSON content, allowing users to toggle between the browser's default raw view and a local, interactive graph visualization powered by the \jsoncrack-react\ library. It includes a privacy policy, a build script for packaging, and handles theme detection and CSP workarounds for the layout engine.

apps/chrome-extension · high confidence

The \jsoncrack-react\ package now exposes the \JSONCrack\ component, enabling users to visualize JSON data as an interactive graph with support for collapsing and expanding nodes (via \collapsedPaths\ and \onCollapseChange\ props) and horizontal panning using Shift+wheel. The component also provides a \JSONCrackRef\ for imperative viewport control (zoom, center, focus) and allows users to switch between light and dark themes via the \theme\ prop.

packages/jsoncrack-react/src · high confidence

Users can now collapse and expand JSON object and array nodes to simplify large visualizations, with a new Controls component providing Root, Fit, Zoom In, and Zoom Out buttons for easier navigation. The visualization also features improved text rendering that automatically detects and displays color previews for hex/RGB values and converts URLs into clickable links, while node sizing and styling have been refined to support these interactive elements.

packages/jsoncrack-react/src/components · high confidence

The editor now displays JSON data in a dedicated TreeView component that renders keys and values with distinct styling based on data type (e.g., integers, booleans, nulls). The view includes a custom TextRenderer that automatically detects and makes URLs clickable, and displays color codes as swatches for better visual identification. This replaces the previous flat or unstructured display of JSON content within the editor canvas.

apps/www/src/features/editor/views/TreeView · high confidence

The www application has been migrated to Next.js, introducing a new page-based routing structure. This includes dedicated pages for the Editor, Widget, Documentation, and Landing, along with standard Next.js entry points (\_app, \_document) and error/404 handling. The Widget page now supports dynamic theme switching and data injection via the postMessage API, while the Editor page integrates the graph view and text editor with dynamic imports for performance. The site also adds a new 404 page and legal pages (Privacy, Terms) using the Mantine UI library.

apps/www/src/pages · high confidence

Added two new hooks to enhance editor functionality. The \useFocusNode\ hook enables users to search for nodes within the graph view, automatically highlighting matches and centering the camera on the selected node, while tracking selection state for navigation. The \useJsonQuery\ hook allows users to execute JSON queries against the current file content using \jq-web\ and generate TypeScript type aliases from the JSON structure using \json\_typegen\_wasm\, with error handling and toast notifications for user feedback.

apps/www/src/hooks · high confidence

This change introduces a suite of new modal interfaces for the JSON editor. Users can now download or copy canvas images in PNG, JPEG, or SVG formats with customizable background colors and quality settings. A new Import modal allows fetching JSON from URLs or uploading local files (JSON, YAML, CSV, XML). The Node modal now displays the selected node's content and JSON path, and includes a button to open the diagram in ToDiagram. Additionally, new modals enable users to run JSONPath and jq queries to filter data, apply JSON schemas for validation, and generate type definitions for TypeScript, Go, Kotlin, and Rust.

apps/www/src/features/modals · high confidence

This update introduces several new utility modules in the \apps/www/src/lib/utils\ directory to support enhanced functionality and integration. A new \jsonAdapter\ provides robust conversion between JSON, YAML, XML, and CSV formats using dynamic imports. A \smartColorSchemeManager\ is added to handle theme persistence, enforcing a light theme for non-editor paths while allowing dynamic, per-tab theme switching for editor paths. Communication with the external ToDiagram service is improved via a new \todiagramHandoff\ utility that manages window messaging for seamless document transfer. Additionally, new helpers include \isIframe\ for environment detection, \search\ utilities for highlighting search results, and \json2go\ for generating Go type definitions from JSON.

apps/www/src/lib · high confidence

The default scaffolding files generated by Create Next App have been removed from the project. This includes the main application wrapper (\pages/\_app.tsx\), the sample API route (\pages/api/hello.ts\), the home page component (\pages/index.tsx\), and its associated CSS module (\styles/Home.module.css\). As a result, the application no longer includes the pre-built welcome page, default styling, or the example API endpoint.

pages, styles · high confidence

The repository has been restructured from a single Next.js application into a Turborepo monorepo, separating the codebase into \apps/\ (such as the main web app, VS Code extension, and Chrome extension) and shared \packages/\. This change introduces a new build orchestration system via \turbo.json\ and a dependency catalog in \pnpm-workspace.yaml\ that pins React and React DOM to version 19.3.0. The previous single-app configuration files, including the root \next.config.js\ and \.eslintrc.json\, have been removed in favor of workspace-level configurations, and the \README\ has been updated to reflect the new \pnpm\-based development commands and multi-app architecture.

(repo-wide) · high confidence

The GraphView store now manages the editor's graph state (including layout direction, fullscreen mode, and node selection) and delegates viewport actions—such as zooming, centering, and collapsing/expanding nodes—to the underlying JSONCrackRef component. This change consolidates graph-related logic into a single Zustand store, ensuring that user interactions with the graph view are consistently handled through the shared reference to the visualization library.

apps/www/src/features/editor/views/GraphView/stores · high confidence

The editor toolbar has been reorganized into distinct components: FileMenu (Import/Export), ViewMenu (Graph/Tree toggle), and ToolsMenu (JSON Query, JSON Path, Schema, Generate Type). A new SearchInput component allows node searching with navigation and match counting. The toolbar also includes a ThemeToggle, a link to the Chrome extension, a GitHub link, a fullscreen button, and a conditional 'Upgrade to Pro Editor' link to ToDiagram that respects the external mode setting.

apps/www/src/features/editor/Toolbar · high confidence

The GraphView component has been refactored to use the external jsoncrack-react library for the core graph rendering, replacing the previous inline implementation. This change introduces enhanced edge styling with hover effects and viewport centering when clicking edges. Additionally, a new 'Not Supported' modal now appears when the diagram exceeds the node limit (default 1500), offering users an upgrade path to ToDiagram for larger datasets. A persistent 'Open in ToDiagram' button and a local-processing privacy tooltip have also been added to the editor interface.

apps/www/src/features/editor/views/GraphView · high confidence

The application now includes dedicated configuration files for core visual and metadata settings. A global style sheet is applied to standardize HTML elements, reset box models, and enforce smooth scrolling. A comprehensive theme system is introduced, defining distinct color palettes and node styling for both dark and light modes, which are integrated with styled-components via TypeScript declarations. Additionally, SEO metadata, including titles, descriptions, and social media open graph tags, is centralized for consistent search engine optimization.

apps/www/shims, apps/www/src/constants, apps/www/src/types · high confidence

The jsoncrack-react package now ensures the graph lands correctly centered on initial load and after every Fit-to-center action, and re-centers when the host container is resized. The onCollapseChange callback fires after state updates rather than from inside a state updater, preventing React warnings when consumers write to a store in the callback, and it now fires when collapsed paths are pruned after a JSON edit so the reported list always matches what is rendered. Object rows with an empty-string key (e.g., {"": \[1, 2\]}) no longer render as undefined; they route to the object node renderer correctly. Additionally, edge labels use a sans-serif font regardless of host-page CSS, and the canvas includes basic screen-reader affordances (role="img" and aria-label="JSON data visualization"). The json prop type is narrowed from string \| object \| unknown\[\] to string \| object (arrays are still accepted with no consumer action required).

packages/jsoncrack-react · high confidence

The GraphView now features a redesigned, floating toolbar with a glassmorphic aesthetic that adapts to light and dark themes. Users can rotate the graph layout direction, zoom in and out, center the view, and focus on the first node via buttons or keyboard shortcuts. A new search input is integrated, toggleable via a shortcut, and the toolbar also provides access to download, settings, and theme toggles.

apps/www/src/features/editor/views/GraphView/Toolbar · high confidence

The website now features a completely redesigned landing page with new sections for features, FAQs, and a step-by-step guide, alongside a new global layout that includes a navbar with links to the Chrome extension and VS Code plugin, and a footer with social links.

apps/www/src/layout · high confidence

The JSON Crack VS Code extension has been migrated from Create React App and webpack to a Vite and esbuild build system. This change significantly speeds up the development experience, providing faster hot-reloading and build times for contributors. The extension's core functionality—visualizing JSON data as an interactive diagram in a webview—remains the same, but the underlying tooling is now more modern and efficient.

apps/vscode · high confidence

Added comprehensive test coverage for the jsoncrack-react package, including tests for the CollapseContext logic (path serialization, node hiding rules, and path pruning), canvas helper utilities (JSON text serialization with memoization, graph parsing with syntax error handling, canvas class/style generation, edge target mapping, and shift-wheel horizontal panning), and the core JSON parser (primitive and nested object/array parsing, error tolerance, and unique ID assignment).

packages/jsoncrack-react/src/\\tests\\_ · high confidence_

The project has been restructured into a pnpm monorepo managed by Turborepo, replacing the previous single-app setup. This introduces three new applications: the main website (www), a VS Code extension (jsoncrack-vscode), and a Chrome extension (chrome-extension), all sharing a reusable \jsoncrack-react\ canvas package. Key dependency upgrades include React 19.3.0, Next.js 16.3.5, Mantine 8.3.18, ESLint 10.8.1, and TypeScript 5.9.3. The package manager has switched from npm to pnpm 10.20.0, and the old \package-lock.json\ has been removed in favor of \pnpm-lock.yaml\.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 33 → 49 (+16.3)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.16) — scores are not directly comparable.

• Code Health 64 → 81 (+17.8)
• Architecture 89 (new)
• Maturity 50 → 63 (+13.0)
• Readiness 18 → 33 (+14.5)
• Security 40 → 69 (+28.4)
• Accessibility 53 (new)
• Performance 100 (new)

• Critical CVE: [GHSA redacted] (pnpm-lock.yaml)
• Dimension evaluation failed
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• …and 53 more

• Change coupling: Features.tsx ↔ HeroSection.tsx (apps/www/src/layout/Landing/Features.tsx)
• Change coupling: Features.tsx ↔ Navbar.tsx (apps/www/src/layout/Landing/Features.tsx)
• Change coupling: ToolsMenu.tsx ↔ index.tsx (apps/www/src/features/editor/Toolbar/ToolsMenu.tsx)
• Change-coupling hub: FAQ.tsx → Features.tsx, HeroPreview.tsx, HeroSection.tsx (apps/www/src/layout/Landing/FAQ.tsx)
• Coverage not measured — JavaScript/TypeScript suite
• FunctionTooLong: ExternalMode.ExternalMode (apps/www/src/features/editor/ExternalMode.tsx)
• FunctionTooLong: Footer.Footer (apps/www/src/layout/PageLayout/Footer.tsx)
• FunctionTooLong: docs.Docs (apps/www/src/pages/docs.tsx)
• FunctionTooLong: index.EditorChoiceModal (apps/www/src/features/modals/EditorChoiceModal/index.tsx)
• FunctionTooLong: index.Toolbar (apps/www/src/features/editor/views/GraphView/Toolbar/index.tsx)
• FunctionTooLong: json2go.jsonToGo (apps/www/src/lib/utils/json2go.js)
• FunctionTooLong: parser.parseGraph (packages/jsoncrack-react/src/parser.ts)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• High: security finding (details withheld)
• …and 44 more

• 9 commits — 6 feature/other, 3 fixes

• apps/www — 5 commits
• packages/jsoncrack-react — 3 commits
• (root) — 1 commit

• fix: fix: ensure onCollapseChange fires correctly after state updates
• fix: fix: remove modal parameter from upgrade link in NotSupported component
• fix: fix: temporarily hide EditorChoiceModal import and usage
• change: chore: bump version number to 1.0.4 in package.json
• change: chore: update React and TypeScript type definitions to use catalog versions
• change: chore: update dependencies in package.json files
• change: feat: add an Edit in ToDiagram button to the node modal
• change: feat: hand the current document to ToDiagram without copy-paste
• change: feat: implement color format validation and refactor text rendering logic

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

AykutSarac/jsoncrack.com was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.