JSON Forge

JSON Forge is a high-performance, professional-grade JSON editor, validator, and visualizer built for developers who handle complex data structures. It combines the power of the Monaco Editor (VS Code's engine) with an interactive graph visualization, a data table view, and AI-powered JSON generation and repair — all wrapped in a sleek, Vercel-inspired interface.

Key Features

Professional Editor Environment

• Monaco Editor Integration: Full-featured code editing with syntax highlighting, code folding, smart indentation, and bracket pair guides. Custom "Vercel Dark" and "Vercel Light" editor themes.
• Real-time Validation: Instant syntax checking with a dedicated status bar indicator (green check / red X) and error overlay bubble.
• Smart Formatting: Toggle between 2 spaces, 4 spaces, or Tabs. One-click Prettify, Minify, and Sort Keys (alphabetical). Toggle Word Wrap from the toolbar.
• Search: Search with match highlighting (yellow) and match count. Press Cmd/Ctrl+K to focus search.
• Multi-Format Import: Drag-and-drop or pick .json, .jsonl/.ndjson, or .yaml/.yml files — JSONL and YAML are converted to JSON on import.
• Autosave & Recent Docs: The active document is persisted to IndexedDB so it survives reloads. A "Recent Docs" modal lets you reopen the last 10 documents you worked on (all local; nothing leaves the browser).
• Keyboard Cheatsheet: Press ? for a modal listing every shortcut (Cmd/Ctrl+K, D for theme, Cmd/Ctrl+1..4 to switch views, +/-/0 for graph zoom, ? for the cheatsheet).
• Safe Large File Handling: Implements input debouncing (800ms) to ensure the UI remains responsive even when editing files with 10k+ lines.

High-Performance Graph Visualization

• Interactive Tree: Visualize deeply nested JSON structures as a navigable node graph with expand/collapse all.
• Search & Focus: Powerful search within the graph view. Matches are highlighted, and navigation controls allow you to cycle through results, automatically panning to and centering the active node.
• Smart Navigation: Smooth Pan & Zoom (0.3x to 3x) with mouse wheel support. Double-click any node to focus and center it, or use the "Fit to Screen" utility.
• Lazy Loading & Pagination: Automatically limits rendering to the first 50 items of large arrays/objects to prevent DOM explosions. Includes "Show More" functionality for massive datasets.
• Rich Tooltips: Hover over nodes to inspect values, types, and full property paths (data.users[0].id) without expanding the tree.

Data Table View

• Structured Rendering: Arrays of objects render as data tables with column headers; objects render as key-value pairs.
• Breadcrumb Drill-Down: Click into nested objects and arrays with breadcrumb navigation to go back.
• Search Filtering: Filter table rows by search term.
• Sortable Columns: Click a header to cycle asc → desc → unsorted.
• CSV Export: Export the current table view as a CSV file with proper quote/comma/newline escaping.
• Type-Aware Cells: Booleans render as colored badges, URLs as clickable links, numbers in monospace, and nulls styled distinctly.

Diff View

• Side-by-Side Comparison: A 4th view mode powered by Monaco's diff editor — the left pane mirrors your live editor, the right pane is editable scratch space.
• Theme-Synced: Shares the same custom Vercel Dark/Light themes as the main editor.

AI-Powered Features

• AI Generate: Describe JSON in natural language and get valid JSON generated by an NVIDIA-hosted LLM.
• AI Fix: When JSON has errors, the AI button becomes "AI Fix" — sends the broken JSON along with the error message to the LLM for automatic repair.
• AI Schema Generator: From any JSON document, generate TypeScript types, a Zod schema, or a JSON Schema (2020-12) draft. The Schema modal exposes all three as tabs with per-tab copy and cache.
• Shared Quota: All three AI endpoints (/api/ai/generate, /api/ai/fix, /api/ai/types) share a single 5-requests-per-hour-per-IP bucket via Upstash Redis. Remaining-quota count is surfaced in the UI.

Share Snapshots

• One-Click Share Links: Click Share in the toolbar to create a public link (/s/<slug>) that opens the current JSON in any browser.
• Configurable Expiry: Choose 1 hour, 1 day, 7 days, or 30 days when creating a share (default 30 days).
• View-Only Mode: Tick "view-only" to lock the recipient's editor — the Monaco editor renders in read-only mode and Prettify/Minify/Sort/Clear/Import/Share/AI are all disabled. Search, Copy, and Export remain enabled.
• QR Code: The success step renders a scannable QR code alongside the link so you can open the snapshot on a phone or another device without copy-pasting.
• Cloudflare D1 Backed: Snapshots are stored in a Cloudflare D1 SQLite database; the Vercel-hosted app talks to D1 via its REST API.
• Auto-Expiring: A daily Vercel Cron job (/api/cron/cleanup-shares) sweeps expired rows.
• Read Cap & Rate Limit: Payloads are capped at 512 KB; share creation is rate-limited to 10/hour per IP via the existing Upstash limiter.
• Recipient UX: Editable shares open the full editor with a dismissible "Shared snapshot from …" banner; the recipient's edits never update the original link. View-only shares swap the banner copy to indicate the lock.

Live Statistics & Utilities

• Real-time Stats: Always-visible status bar tracking Line Count, Character Count, and Estimated File Size.
• File Operations: Drag-and-drop or file-picker import for .json, .jsonl/.ndjson, and .yaml/.yml (auto-converted to JSON). One-click export/download. 5 MB warning threshold.
• Clipboard Manager: Integrated copy functionality with toast success feedback.
• Clear: Clear editor content with confirmation dialog for content over 50 characters.

Design System

• Theme Support: Toggle between Dark Mode and Light Mode via header button or press D anywhere to switch. Persists via next-themes.
• Vercel-Inspired UI: Minimalist, high-contrast interface built with shadcn/ui (radix-nova style, olive base color).
• Responsive: Adaptive layout that works on desktop and tablets.
• ASCII Loader: Retro-terminal style loading sequence for a distinct developer experience.

Performance Strategy

JSON Forge is engineered to handle large datasets that crash typical web-based formatters:

1. Debounced Parsing: Heavy operations (Stats calculation, Graph generation, Validation) are debounced. You can type freely without lag; computations only trigger when you stop typing.
2. Graph Virtualization/Pagination: The Graph View does not attempt to render 10,000 nodes at once. It employs a budget system, expanding only the first ~50 nodes initially and paginating large arrays to keep the DOM light.
3. Dynamic Imports: Monaco Editor is loaded via next/dynamic with ssr: false to keep the initial bundle small.

Tech Stack

• Core: React 19, TypeScript, Next.js 16 (App Router, Turbopack)
• UI: shadcn/ui (Radix primitives), Tailwind CSS v4
• Editor: @monaco-editor/react (Code + Diff)
• Agentic Browsing: /llms.txt plus experimental WebMCP tools for editor automation
• Icons: @hugeicons/react
• QR Codes: qrcode.react
• AI: NVIDIA API via openai SDK (model: openai/gpt-oss-120b)
• Share Storage: Cloudflare D1 (SQLite) over REST; schema in db/schema.sql + db/schema_v2.sql, client in lib/d1.ts
• Client Persistence: idb-keyval for autosave + recent docs
• Format Converters: js-yaml for YAML/JSONL import
• Rate Limiting: @upstash/ratelimit + @upstash/redis
• Fonts: Google Sans Code (mono) + Geist (sans)
• Formatting: Prettier + prettier-plugin-tailwindcss
• State: React Hooks (Context, Memo, UseState)

Installation

To run JSON Forge locally:

1. Clone the repository

   git clone https://github.com/phalla-doll/json-forge.git
   cd json-forge

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your API keys:

   • NVIDIA_API_KEY — Required for AI features (get from NVIDIA Build)
   • NVIDIA_MODEL — Optional, defaults to openai/gpt-oss-120b
   • UPSTASH_REDIS_REST_URL / UPSTASH_REDIS_REST_TOKEN — Optional for AI rate limiting (gracefully degrades without them)
   • CLOUDFLARE_ACCOUNT_ID / CLOUDFLARE_D1_DATABASE_ID / CLOUDFLARE_D1_API_TOKEN — Required for the share feature. Create a D1 database with pnpm wrangler d1 create json-forge-shares and an API token at https://dash.cloudflare.com/profile/api-tokens with scope Account → D1 → Edit.
   • CRON_SECRET — Random string protecting the cleanup cron endpoint. Generate with openssl rand -hex 32.

4. Apply the share schema (one-time, after D1 credentials are set). Migrations are bare SQL files — apply in order:

   pnpm wrangler d1 execute json-forge-shares --remote --file=db/schema.sql
   pnpm wrangler d1 execute json-forge-shares --remote --file=db/schema_v2.sql

   Substitute --local for --remote against the local D1 dev binding.

5. Start the development server

   pnpm dev

6. Build for production

   pnpm build

Auditing

Run the standard local checks before committing:

pnpm typecheck
pnpm lint
pnpm format:check

JSON Forge also includes a Lighthouse Agentic Browsing audit. Start the app first, then run:

pnpm dev
pnpm audit:agentic

If the dev server chooses another port, pass it explicitly:

LIGHTHOUSE_URL=http://localhost:3001 pnpm audit:agentic

The audit writes .lighthouse/agentic.report.html and .lighthouse/agentic.report.json. It checks the accessibility tree, CLS, /llms.txt, and experimental WebMCP registration. Current WebMCP tools are replace_json, format_current_json, minify_current_json, and sort_current_json_keys.

API Routes

Route	Method	Purpose	Rate Limited
/api/ai/generate	POST	Generate valid JSON from a natural language prompt	Yes (5/hour/IP, AI bucket)
/api/ai/fix	POST	Repair broken JSON syntax	Yes (5/hour/IP, AI bucket)
/api/ai/types	POST	Generate TypeScript / Zod / JSON Schema from a JSON document; body { json, target }	Yes (5/hour/IP, AI bucket)
/api/share	POST	Create a shareable snapshot (max 512 KB); body { json, expiresIn?, readOnly? }; returns {slug, url, expiresAt, readOnly, expiresIn}	Yes (10/hour/IP)
/api/share/[slug]	GET	Fetch a snapshot by slug; returns 410 once expired	No
/api/cron/cleanup-shares	GET	Vercel Cron sweep that deletes expired shares; requires Authorization: Bearer $CRON_SECRET	n/a

Routes validate inputs and return structured JSON responses with proper HTTP status codes (400, 401, 410, 413, 429, 502).

Project Structure

app/
├── layout.tsx              # Root layout (ThemeProvider, Toaster, fonts, OG/SEO metadata)
├── page.tsx                # Home route — thin wrapper around <JsonForgeApp>
├── loading.tsx             # Shell-shaped pre-React loading skeleton
├── globals.css             # Tailwind v4 + theme tokens (light & dark)
├── loader.css              # Loading skeleton styles
├── apple-icon.tsx          # Dynamic Apple touch icon
├── icon.svg                # Favicon
├── sitemap.ts              # /sitemap.xml metadata route
├── robots.ts               # /robots.txt metadata route (allows /, disallows /api and /s)
├── s/[slug]/
│   ├── page.tsx            # Server-rendered share viewer (forwards read_only)
│   ├── expired-view.tsx    # "This share has expired" UI
│   └── share-view-beacon.tsx  # Client-only telemetry beacon for share opens
└── api/
    ├── ai/
    │   ├── generate/route.ts  # AI JSON generation endpoint
    │   ├── fix/route.ts       # AI JSON repair endpoint
    │   └── types/route.ts     # AI schema generator (TypeScript / Zod / JSON Schema)
    ├── share/
    │   ├── route.ts        # POST — create a snapshot (expiresIn + readOnly options)
    │   └── [slug]/route.ts # GET — fetch a snapshot
    └── cron/
        └── cleanup-shares/route.ts  # Cron-only DELETE WHERE expires_at < now
components/
├── ui/                     # shadcn/ui primitives (Button, Dialog, Select, etc.)
├── json-editor.tsx         # Monaco Editor dynamic import wrapper
├── json-editor-inner.tsx   # Monaco Editor with custom themes & search highlighting
├── json-diff-view.tsx      # Monaco Diff editor dynamic import wrapper
├── json-diff-view-inner.tsx  # Monaco Diff editor with theme sync
├── json-tree-view.tsx      # Interactive graph/tree visualization
├── json-table-view.tsx     # Data table view with sort + CSV export + breadcrumb drill-down
├── json-forge-app.tsx      # Main client component (shared by / and /s/[slug])
├── ai-modal.tsx            # AI prompt dialog modal
├── schema-modal.tsx        # AI schema generator (TS / Zod / JSON Schema tabs)
├── share-modal.tsx         # Share-link dialog: config step → success step w/ QR + URL
├── recent-docs-modal.tsx   # Reopen last 10 local documents (IndexedDB)
├── keyboard-cheatsheet-modal.tsx  # `?` hotkey shortcut reference
├── toolbar.tsx             # Actions (Format, Minify, Sort, Wrap, Search, Import, Export, Share, etc.)
├── status-bar.tsx          # Footer stats and validation indicator
└── theme-provider.tsx      # next-themes wrapper with D-key hotkey toggle
lib/
├── ai.ts                   # Client-side AI helpers (generateJson, fixJson, generateTypes)
├── share.ts                # Client-side share helper (createShare with expiresIn + readOnly)
├── nvidia.ts               # Server-side NVIDIA AI integration, incl. generateTypesOnServer (server-only)
├── d1.ts                   # Cloudflare D1 REST client (server-only)
├── slug.ts                 # URL-safe 10-char slug generator (server-only)
├── origin.ts               # Same-origin guard for POST routes
├── ratelimit.ts            # Upstash Redis rate limiting (AI + Share)
├── storage.ts              # IndexedDB autosave + recent-docs (idb-keyval)
├── converters.ts           # JSONL/NDJSON/YAML → JSON converters (js-yaml)
├── site.ts                 # SITE_URL / SITE_NAME shared by layout/sitemap/robots
└── utils.ts                # Helpers (cn, formatFileSize, getStats, isValidJson, downloadFile, trackEvent)
db/
├── schema.sql              # D1 shares table DDL (base)
└── schema_v2.sql           # ALTER TABLE — adds read_only column
types.ts                    # TypeScript definitions (EditorStats, ToastType)
public/
├── logo.svg                # JSON Forge logo
├── logo-mark.svg           # Compact logo mark used in OG image / favicons
└── og-image-main.png       # 1920×1080 OpenGraph / Twitter card image
vercel.json                 # Vercel Cron config (daily cleanup at 04:00 UTC)
.prettierrc.json            # Prettier config (4-space, Tailwind plugin)
.prettierignore             # Files excluded from formatting
.editorconfig               # Editor defaults for indent / EOL

License

MIT License. Open source and free to use for personal and commercial projects.