JSONEditorOnline.com - A Valuable Web Development Tool

Modern web development means you spend a lot of time reading and writing JavaScript objects or JSON. It is easy enough to write and read these objects in most development environments. Visual Studio has excellent JavaScript editing and even lets you use Ctrl + K + D to format JSON objects. However when you need to visualize JSON sent back and forth across AJAX calls you most likely to not have a 'pretty' version to read, it is usually minified.

For the time being browser developer tools do not have a built in JSON pretifier in the network tabs. I use localStorage to persist many JSON objects as well. Again no visualizers. If you run your AJAX requests through Fiddler you are in luck because it does format JSON automatically. However it is not a proper editor.

Over the summer I have found myself using JSON Editor Online several times a day. This is a free online tool that makes JSON editing nice. The editor is a very simple tool, consisting of two columns. The first column displays a raw JSON object. The right column displays a tree/leaf view.

You can paste minimized JSON strings in the left column and press the 'prettify' button to get a nicely formatted version. If you have any syntax errors you will see a validation balloon displayed with a message pointing you to the issue. You will also note a red box displayed to the left of the column, placed roughly where the error resides. I will warn you the editor requires all fields be wrapped in quotes and this is where I encounter most errors when directly pasting a JavaScript object from the JavaScript source.

Once your JSON passes validation you can copy it to the tree view by pressing the right arrow in the margin between the two editor windows. This will transfer the object over. You can start editing the object now in the tree view. As you react stopping points you can copy the updated object back to the raw view on the left.

You can edit the object in either view. The views are not synced, you need to manually synchronize the source. When editing in the raw (left) editor it is much like working in Visual Studio, Sublime, etc. The tree editor lets you define a property's type, insert new properties, array members and set values. I like this experience when defining models because it helps me think a little more like a C# developer. Remember JavaScript variables and object properties are dynamic, so when editing raw JSON you are free to do what you want. The tree editor enforces some essence of type safety and static objects.

At the top of the layout is a menu where you can load a JSON file from either your local file system or a URL. This is a very nice feature because I do save many JSON files while I am working as well as pass them back and forth with other team members. This is also nice when you are working against a public API, like I do in my SPA book. You can also save the JSON you are working with in the editor. This lets you save the file locally. The editor does not persist your code in the cloud like jsFiddle, pasteBin, etc does.

I encourage web developers to bookmark this tool. Oh, I almost forgot to mention the tool works offline! Great for when you are offline, like me right now :). So the next time you need to edit some JSON, try out JSON Editor Online.

Share This Article With Your Friends!