~/yunemregul/blog/json-viewer
githublinkedin
·1 min read·featuredjsonreactpwawebtools

Building a Better JSON Viewer from Scratch

I built a JSON viewer as a PWA to see if a brand-new site could climb Google's rankings. Edit: it couldn't.

I open a JSON viewer several times a day, and I never liked the ones at the top of Google. Most of them were built in the 2010s and still look like it. I built my own with Cursor.

I had a second reason. I wanted to know if a site starting from zero could climb Google's rankings.

The page is an input and a tree, with a dark and a light theme. It is a React app. Parsing and rendering happen in the browser, so the JSON I paste is never sent to a server.

SSR only for crawlers

The first version was a static single-page app, which meant Google's crawler got an almost empty HTML file. Three weeks later I put a small Express server in front of it. It checks the user agent with isbot. Crawlers get the app rendered on the server, and everyone else gets the same client-only page as before.

The server-rendered response is 19.6 KB against 9.6 KB for the regular one. The site still did not rank.

→ open the app
json.yunemregul.com
Paste JSON, switch themes, navigate the tree. No data leaves your browser.