Create a polished JSON formatter that developers actually want to bookmark. Auto-formats on paste, highlights syntax with distinct colors for keys, strings, numbers, and booleans, validates with precise error messages pointing to exact line numbers, and switches between formatted and tree views. All in a single static page with a dark code-editor aesthetic.
Build Prompt
Copy this prompt into Claude Code
Build a single-page JSON Formatter & Validator tool as a static HTML file with embedded CSS and JavaScript. No frameworks, no dependencies.
LAYOUT:
- Full-viewport dark theme (background #0d1117, text #c9d1d9) resembling a code editor
- Top toolbar with buttons: Format, Minify, Tree View, Copy Output, Clear
- Main area split into two panes side by side (50/50): left is the input editor, right is the output display
- Bottom status bar showing: validity status (green checkmark or red X), character count, line count, nesting depth
INPUT PANE (left):
- Large textarea with monospace font (JetBrains Mono from Google Fonts, fallback to Consolas)
- Line numbers gutter on the left side, updated as user types
- Placeholder text showing a sample JSON object
- Auto-format: detect when JSON is pasted (listen for paste event) and automatically format it with 2-space indentation
- Tab key inserts 2 spaces instead of changing focus
OUTPUT PANE (right):
- Syntax-highlighted formatted JSON display (not editable)
- Color scheme: keys in #7ee787 (green), strings in #a5d6ff (blue), numbers in #f2cc60 (gold), booleans in #ff7b72 (coral), null in #8b949e (gray), punctuation in #c9d1d9
- Each line numbered to match the formatted output
TREE VIEW MODE:
- Toggle button switches right pane from formatted text to interactive tree
- Collapsible nodes for objects and arrays with triangle arrows
- Show key name, value type badge (str/num/bool/null/arr/obj), and value preview
- Object nodes show property count, array nodes show item count
- Click to expand/collapse, double-click a value to copy it
VALIDATION:
- Validate on every input change (debounced 300ms)
- On valid JSON: show green checkmark in status bar, display formatted output
- On invalid JSON: show red X with specific error message including line number and column
- Highlight the error line in the input pane with a red background (#ff7b7220)
- Common error descriptions: "Expected comma after property", "Unterminated string", "Expected colon after key", "Trailing comma not allowed"
MINIFY:
- Minify button removes all whitespace, outputs single-line JSON
- Show byte size comparison: "Formatted: 1,234 bytes → Minified: 456 bytes (63% smaller)"
COPY BUTTON:
- Copies the current output (formatted or minified) to clipboard
- Button text changes to "Copied!" for 2 seconds with green background
KEYBOARD SHORTCUTS:
- Ctrl+Shift+F: Format
- Ctrl+Shift+M: Minify
- Ctrl+Shift+T: Toggle tree view
Make it responsive: on screens under 768px, stack panes vertically with input on top. Include a title "JSON Formatter" and a brief subtitle in the header area.
Make It Yours
JSON Schema Validation
Add a second input for JSON Schema and validate documents against it, showing which fields fail and why.
JSON Diff Comparison
Add a compare mode with two input panes that highlights additions, deletions, and changes between JSON documents.
JSONPath Query
Include a query bar that lets users write JSONPath expressions and see matching values highlighted in the tree.
Import from URL
Add an input field to fetch JSON from a URL via a CORS proxy, useful for inspecting API responses quickly.
Type Conversion
Add buttons to convert JSON to YAML, TOML, or CSV format with download options for each output type.
Share via Link
Encode small JSON payloads into the URL hash so users can share formatted JSON snippets as links.
SEO Tips
Target long-tail keywords like "json formatter online dark mode" and "json validator with line numbers" in your page title and headings.
Add a FAQ section answering questions like "What is valid JSON?" and "How to fix trailing comma errors in JSON?" to capture featured snippets.
Create separate landing pages for each sub-feature: "/json-minifier", "/json-tree-viewer", "/json-validator" with internal links between them.
Add structured data (WebApplication schema) with applicationCategory "DeveloperApplication" and offers pricing as "Free".
Write a comparison blog post titled "Best JSON Formatters in 2026" and rank your own tool alongside popular alternatives.
Monetization Ideas
Offer a Pro tier ($3/month) with features like JSON Schema validation, diff comparison, and unlimited history of formatted documents.
Add a browser extension version that formats JSON responses in-browser and charge a one-time $5 fee for it.
Place a single non-intrusive sponsor banner below the tool targeting developer tool companies (Postman, Insomnia, etc.).
Build an API endpoint that accepts JSON and returns formatted/validated results, charging per 10,000 requests for CI/CD integration.
Create an embeddable widget version that other developer blogs can embed, with a "Powered by" backlink to your site.