JSONLab - Stardance

Ship #1

@Riko on JSONLab · 14 days ago

## JSONLab

JSONLab is a lightweight developer tool for formatting, validating, and exploring JSON data through both **Text** and **Tree** views. It runs entirely in the browser, keeping data private while providing fast parsing, syntax highlighting, and an interface designed for everyday developer workflows.

### What I built

I built a modern JSON formatter and validator with a developer-focused UI. Users can paste raw JSON, instantly format or validate it, and switch between a traditional text editor and an interactive tree viewer for easier inspection of nested objects.

### Challenges

The biggest challenge wasn't the parsing logic—it was the interface. Finding a layout that felt intuitive, balanced, and pleasant to use took multiple redesigns. Small UI details, such as maintaining consistent panel heights, refining CSS behavior, implementing a smooth Text/Tree toggle, and making the tree view integrate naturally with the editor, required far more iteration than expected.

### What I'm proud of

I'm proud that I kept iterating instead of settling for a "good enough" interface. The project evolved through several redesigns, with each version improving usability and consistency. Beyond the UI, building the tree viewer, fixing numerous styling issues, and creating a responsive experience helped transform a simple formatter into a more polished developer utility.

###How to test

Copy raw JSON from any external source—such as a public API response, a JSON placeholder service, or one of your own JSON files—and paste it into JSONLab. Try both valid and intentionally malformed JSON. Format complex nested objects, switch between Text and Tree views, and verify that validation behaves correctly. Test arrays, empty objects, deeply nested structures, and large payloads to evaluate the application's behavior. All processing is performed locally in the browser, so your JSON never leaves your device.

9 devlogs
8h
8.00x multiplier
62 Stardust

Try project → See source code →

Open comments for this post

@Riko on JSONLab · 14 days ago

17m 25s logged

Finally calling JSONLab complete.

Today’s work was mostly polishing:
-Fixed another UI state bug where actions like Format, Validate, and Minify could still be triggered while in Tree view.
-Disabled actions that don’t apply to the current view.
-Cleaned up a few more UI inconsistencies.

At some point you have to stop polishing and ship. I hope this is the last round of tweaks for JSONLab and that there won’t be any more polishing or updates needed. Time to move on to the next project.

Open comments for this post

@Riko on JSONLab · 14 days ago

1h 29m 40s logged

Still wrestling with the UI. Building the functionality turned out to be much easier than designing an interface that actually feels right.
Today’s progress:

Added a toggle to switch between Text and Tree views.

Implemented the Tree view for easier JSON exploration.

Spent a lot of time refining spacing, colors, and CSS to improve readability and consistency.

The biggest challenge right now isn’t adding features—it’s finding a design that feels polished while keeping the dark developer aesthetic. Every iteration gets closer, but I’m still not satisfied.

Open comments for this post

@Riko on JSONLab · 14 days ago

43m 19s logged

Rebuilt the UI! It finally feels a bit more satisfying. Not sure if it’s actually good yet, but it’s definitely an improvement. If you have any suggestions or feedback, I’d love to hear them.

Open comments for this post

@Riko on JSONLab · 14 days ago

1h 28m 26s logged

Spent most of today redesigning JSONLab’s UI. The functionality is there, but the design still doesn’t feel right. I’ve gone through multiple layouts and none of them click yet.🤧
Sometimes building the feature is easier than making it look good. I’ll keep iterating until the UI feels as polished as the tool itself.🥹

Open comments for this post

@Riko on JSONLab · 15 days ago

21m 55s logged

Focused on the UI.

The biggest realization: the current theme isn’t working!! Rather than polishing a design I’m not satisfied with, I’m planning a complete redesign.

Challenges
• Keeping the UI simple without looking bland.
• Finding a consistent visual style.

Improved
• Better layout and spacing.
• Cleaner formatter interface.
• Identified what needs to change before moving forward.

Sometimes it’s better to rebuild than keep patching.

Open comments for this post

@Riko on JSONLab · 15 days ago

54m 59s logged

debuuging.. the main head ache is ui .. improving ux for smooth work flow .. improving -> testing -> debuugging ->repeat!!

Open comments for this post

@Riko on JSONLab · 15 days ago

43m 7s logged

completed the ui part .. time for more polishing.. learned a json.parse and json.stringify today…

Open comments for this post

@Riko on JSONLab · 16 days ago

1h 1m 26s logged

JSONLab Update

Built the core JSON formatter functionality.

Challenges:

Understanding JSON.parse() and JSON.stringify()
Handling invalid JSON errors
Managing input/output state correctly

Implemented:

JSON formatting
Validation
Clear and copy functionality

Next: improving the editor UI.

Open comments for this post

@Riko on JSONLab · 16 days ago

43m 40s logged

🚀 Starting a new project — JSONLab

Building a simple and easy-to-use JSON formatter focused on a clean developer experience.
First step: working on the core logic and formatter functionality.
Decided on a dark-mode theme with an orange color palette to give it a distinct developer-focused identity.