← Back to projects
PROJECT · 04

JSON / ATLAS

Paste raw JSON, locate syntax errors, and move between clean text and an explorable tree—all without sending data away.

Status
Working prototype
Role
Tool design, interaction design, frontend
Duration
1 week
Year
2026
1 FILEsingle-file app
0data uploads
100%local processing
CASE STUDY
ToolingJSONVanilla JS

Starting point

Working with API responses and configuration files often means bouncing between an editor, an online formatter, and the browser console. The problem is not just messy formatting: syntax errors rarely come with a useful place to recover.

Interaction model

Raw text stays on the left while valid data becomes an explorable tree on the right. Formatting, minifying, search, and path inspection all operate on the same local state, without uploads or accounts.

Error recovery

When parsing fails, the tool locates the likely line and column while preserving the original input. The user can return directly to the failing character instead of clearing or replacing their work.

Technical choices

The entire demo is one static file with no framework or remote dependency. User content is rendered through text nodes, and parsing relies only on JSON.parse, avoiding execution or unsafe HTML construction.

Outcome

The result turns a common small task into a complete tool: fast, legible, and deliberate about information structure, safety boundaries, and keyboard use.

SANDBOXED EXPERIENCE

Interactive demo

This demo runs inside a restricted sandbox.