JSON Visualization Development Skill

This skill helps you work with the JSON Visualization codebase - an open-source web application for visualizing and manipulating JSON data.

When to use this skill

• •Adding new features to the editor, graph visualization, or converters
• •Fixing bugs in data parsing, rendering, or state management
• •Understanding the codebase architecture and data flow
• •Creating new data format converters or type generators
• •Modifying UI components or styling

Project overview

What it does: Converts JSON, YAML, CSV, XML, TOML into interactive graphs/trees with features like format conversion, validation, code generation, and image export.

Tech stack:

• •Next.js (React 19) + TypeScript
• •Zustand (state management)
• •Styled-components + Mantine v8 (UI)
• •Monaco Editor (code editor)
• •Reaflow (graph visualization)

Quick start

# Install dependencies
pnpm install

# Start dev server
pnpm dev  # http://localhost:3000

# Lint and format
pnpm lint
pnpm lint:fix

Architecture

Core directories

src/
├── pages/              # Next.js routes (index, editor, converters, type generators)
├── features/
│   ├── editor/        # Main editor (TextEditor, GraphView, TreeView, Toolbar)
│   └── modals/        # Import, Download, Type, Schema, JQ, JPath modals
├── store/             # Zustand stores (useFile, useConfig, useJson, useModal)
├── components/        # Reusable UI (buttons, animations, effects)
├── layout/            # Page layouts (Navbar, Footer, Landing sections)
├── lib/utils/         # Utilities (jsonAdapter, json2go, generateType, search)
├── hooks/             # Custom hooks (useFocusNode, useJsonQuery)
├── constants/         # Theme, global styles, graph config
├── enums/             # FileFormat, TypeLanguage, ViewMode
└── types/             # TypeScript type definitions

Data flow

1. •Input → useFile store → Parse via jsonParser.ts → Graph nodes
2. •Render → GraphView (Reaflow + custom nodes/edges)
3. •Actions → Toolbar → Modals → Store updates → Re-render

Key files

• •src/store/useFile.ts - File operations, content management (160 LOC)
• •src/features/editor/views/GraphView/lib/jsonParser.ts - JSON → graph parser (207 LOC)
• •src/lib/utils/jsonAdapter.ts - Format conversions (104 LOC)
• •src/features/editor/views/GraphView/index.tsx - Main graph view (198 LOC)

Code style guidelines

TypeScript

// ✅ Use type imports
import type { MenuItemProps } from "@mantine/core";

// ❌ Don't use regular imports for types
import { MenuItemProps } from "@mantine/core";

Import order (enforced by Prettier)

1. •React (react, react/*)
2. •Next.js (next, next/*)
3. •@mantine/core
4. •Other @mantine packages
5. •styled-components
6. •Third-party modules
7. •Internal src/ imports
8. •Relative imports (./, ../)

Naming conventions

• •Components: PascalCase (Navbar.tsx, GraphView.tsx)
• •Hooks: camelCase with use prefix (useFocusNode.ts)
• •Stores: camelCase with use prefix, default export (useFile.ts)
• •Styled components: Prefix with Styled (StyledButton)
• •Functions: camelCase (fetchUrl, setContents)

Formatting

• •Double quotes only
• •Semicolons required
• •Max 100 chars per line
• •No multiple empty lines
• •Avoid parens for single arrow function params: x => x * 2

Common tasks

Adding a new converter

1. •Create route in src/pages/converter/[format1]-to-[format2].tsx
2. •Use ConverterLayout/ToolPage.tsx wrapper
3. •Conversion logic is in lib/utils/jsonAdapter.ts

Adding a new type generator

1. •Create route in src/pages/type/[format]-to-[language].tsx
2. •Use TypeLayout/TypegenWrapper.tsx wrapper
3. •Generation logic in lib/utils/generateType.ts or json2go.js

Creating a Zustand store

import { create } from "zustand";

interface MyState {
  value: string;
}

interface MyActions {
  setValue: (value: string) => void;
}

const useMyStore = create<MyState & MyActions>()((set, get) => ({
  value: "",
  setValue: value => set({ value }),
}));

export default useMyStore;

Creating a styled component

import styled from "styled-components";

const StyledButton = styled.button`
  background-color: #f7c948;
  color: #1a1a1a;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background-color: #37ff8b;
  }
`;

Design system

Colors:

• •Background: #f7f3e6 (warm beige)
• •Primary text: #1a1a1a
• •Accent: #37ff8b (neon green)
• •Yellow: #f7c948

Fonts:

• •Global: Playfair Display (serif)
• •Code: JetBrains Mono (monospace)

Important notes

• •No tests: Project has no test suite - don't create tests unless requested
• •Package manager: Use pnpm only (not npm/yarn)
• •Privacy-first: All processing is client-side
• •Node version: >=24.x required
• •ESLint: src/enums directory is ignored

Getting help

• •See references/ARCHITECTURE.md for detailed architecture
• •See references/COMPONENTS.md for component catalog
• •See references/STATE.md for state management patterns
• •Check AGENTS.md in project root for full guidelines