Playing with JSON in your browser

Hey folks, so I'm writing about a project which I've worked on a little while ago, but one which I still use quite regularly - JSON Live Editor.

This project allows you to quickly dump some JSON data in the left panel, write some JS code to transform the data in the middle panel, and see the output on the right one. Since all the data is just there, there's no need to fiddle between multiple apps. This vastly increases turnaround time for any JSON-data based projects you might be working with.

The Need: I've worked with a lot of programmatic page generation projects over my career. The first one being the famous programmatic webflow page generation, and the other one being a set of WP and GitBooks pages that I converted to MDX over a week.

Both of these projects involved a lot of transformations and data conversions with data, mostly stored in the JSON format. The data conversions were also time consuming. The typical steps involved were:

1. Managing an input JSON file where you put the data which you want to work on in.
2. Managing a JS file which has the boilerplate to read & write the data, AND also has to perform transformations on it.
3. Managing an output file. This might be the most difficult part because it's easy to corrupt an output file by incorrect writes or overwriting existing data quite easily.

As you can see, any data project in JS dealing with 500+ items gets unwieldly quite quickly.

The Solution: I've dealt with this problem for over 2 years, and it kept coming up again and again whenever I had to make transformations on a JSON file. When the data was small, it was easy to do the transformations in the browser's console, but it's just not feasible once you start dealing with items in the upper double-digits.

After experimenting in the browser's console a little bit, and looking at the available JSON transformation systems online, I thought of building a web environment, where a user could see their input & output, and add transformation code to iterate over the data quickly.

For rapid development, I could use a simple textarea for the input, a Monaco-like editor to write the code, and some kind of JSON viewer for the output. ReactJS was also an obvious choice to hold this structure, because it would provide rapid reactivity.

Hence, after experimenting with a few libraries and kinds of workflows, JSON Live Editor was born.

It doesn't have the perfect UI, nor the best code-highlighting or linting (as I wanted to get started with bare-minimum Monaco setup), but it's finally here, and it does serve its purpose for me.

It does have some decent features:

1. Having a Monaco-based editor for code editing. Writing code in a familiar environment.
2. Storing state in local-storage. A tab closed by mistake won't cost you your data (and time!)
3. Only calculate output when the user wants. This ties in to the previous point. If you keep seeing the output while you're typing the code, that would result in a bad User Experience as you keep seeing errors or the incorrect transformation on screen. Being able to specify when you wanna transform your code, however, means that you always have the correct output on screen.

Well, that's the article. I wanted to have a document online which explains why this project exists and what it does. I guess this one does an okay job of it. Let me know of your thoughts.

To try this project, you can check out:

• The GitHub page - github.com/akash-joshi/json-transformer
• The actual website - json-live-editor.netlify.app/

Thanks! And see you tomorrow for another article on a data project that I've built :)

In case you want to hire a senior React developer ;)

Comments

[Andrew Baisden]

Awesome tool!

[Akash Joshi]

Thank you!

[Andrew Baisden]

Sure no problem its a very useful tool worth using.

[Tracy Gilmore]

Akash, Thanks for the great post. I will keep it on my list of bookmarks for a while. You might be interested in a related tool I have found useful. npmjs.com/package/json-server
Regards.