Build Your Own JSON Validator And Prettier

This challenge is to build a JSON validator and formatter. JSON is everywhere, in APIs, configuration files, and data exchange. If you’re a software engineer it’s hard to avoid.

Sometimes that also means you have to cope with broken or unreadable large globs of JSON, as a result I’ve often found myself using JSON linters or prettiers. They’re simple tools but incredibly useful for anyone working with JSON data. This Coding Challenge is to build one.

The Challenge - Building a JSON Validator and Formatter

You're going to build an application that lets users paste in some JSON, check if it's valid, and format it in a useful way. The tool will parse JSON, validate its structure, and provide useful transformations.

You can build it as a web application, desktop application or following the trend in CLI tools that is seeing a resurgence because of CLI based AI agents, a CLI tool. It’s your project, your choice!

Step Zero

In this introductory step you're going to set up your development environment and create the basic project structure.

Choose your target platform and programming language.

Step 1

In this step your goal is to build the initial user interface for the JSON tool.

Create a UI with a large text input box where users can paste JSON into. The interface should be clean and responsive. Think about how to display error messages when validation fails - users need to know what went wrong and where.

At the end of this step you should have a UI that the user can enter JSON into, by either typing or pasting the JSON in.

Step 2

In this step your goal is to build the JSON validation and formatting.

Write the code to parse the input string as JSON (if you haven’t before, now might be a good time to do the JSON parser project) and detect whether it is valid. When the user clicks the validate button, your tool should check the JSON syntax. If the JSON is valid, display it in a nicely formatted way with consistent indentation so the structure is easy to read.

If the JSON is invalid, highlight the error with a clear message about what went wrong and where (line number, character position, or a descriptive message). Seeing well-formatted JSON when validation succeeds helps users understand their data structure and spot issues visually.

Test it with valid JSON:, for example

{"name": "John", "job": "software engineer", "country": "United Kingdom"}

When validated, it should display it nicely formatted:

{
  "name": "John",
  "job": "software engineer",
  "country": "United Kingdom"
}

Test with invalid JSON (for example a missing comma):

{"name": "John" "job": "software engineer"}

Verify that the tool shows an appropriate error message rather than formatted output.

Test with invalid JSON (trailing comma):

{"name": "John",  "job": "software engineer",}

Again verify the error is clearly identified. Test that minified valid JSON gets properly formatted when validated.

Step 3

In this step your goal is to implement a sort feature. Write code that takes valid JSON and reorganises it so that keys are sorted alphabetically at each level of the object.

For example, if the input has keys in the order [city, age, name], the sorted output should have them as [age, city, name]. The sorting should apply independently at each nesting level - if you have nested objects, each one gets sorted by its own keys.

Testing: Test with an unsorted object:

{"zebra": 1, "apple": 2, "banana": 3}

The output should be:

{"apple": 2, "banana": 3, "zebra": 1}

Test with nested objects:

{"z": {"b": 1, "a": 2}, "a": {"y": 3, "x": 4}}

The output should sort both the top level and each nested object:

{"a": {"x": 4, "y": 3}, "z": {"a": 2, "b": 1}}

Step 4

In this step your goal is to implement the compress feature.

Write code that removes all non-essential whitespace from the JSON while preserving any whitespace that appears inside string values. This means removing spaces, newlines, and tabs between structural elements like braces, brackets, and commas, but leaving the content of strings unchanged.

Testing: Test with formatted JSON:

{
  "name": "John",
  "message": "Hello World"
}

The compressed output should be:

{"name":"John","message":"Hello World"}

Note that the space in the string "Hello World" is preserved. Don’t forget to test with newlines in strings too.

Ensure that it is possible to return to the prettier version with the validate button.

Step 5

In this step your goal is to implement a JSON to YAML converter.

Write code that takes valid JSON and converts it to YAML format. Your converter should handle objects, arrays, strings, numbers, booleans, and null values, translating the JSON structure into proper YAML syntax.

Testing: Test with a simple object:

{"name": "John", "age": 30}

The output should be:

name: John
age: 30

Test with nested objects and arrays:

{"person": {"name": "John", "hobbies": ["reading", "coding"]}}

The output should be:

person:
  name: John
  hobbies:
    - reading
    - coding

Test with various data types:

{"active": true, "count": 0, "message": null, "score": 9.5}

The output should be:

active: true
count: 0
message: null
score: 9.5

Verify that your converter handles indentation correctly and produces valid YAML.

Going Further

You can take this further by:

• Add copy-to-clipboard functionality so users can quickly copy the result.
• Making the formatting configurable.
• Create a dark mode for the interface.

Help Others by Sharing Your Solutions!

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know - ping me a message on the Discord Server, via Twitter or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo.

Get The Challenges By Email

If you would like to receive the coding challenges by email, you can subscribe to the weekly newsletter on SubStack here: