---
title: 'Build an Offline JSON Editor with Next.js: Format, Validate & Minify in Browser'
source: 'https://youtube.com/watch?v=HkDOepqonIY'
video_id: 'HkDOepqonIY'
date: 2026-07-28
duration_sec: 368
---

# Build an Offline JSON Editor with Next.js: Format, Validate & Minify in Browser

> Source: [Build an Offline JSON Editor with Next.js: Format, Validate & Minify in Browser](https://youtube.com/watch?v=HkDOepqonIY)

## Summary

This video demonstrates a fully functional JSON editor built with Next.js and React, running entirely in the browser. It showcases features like formatting, validation, minification, comparison, and conversion to YAML/XML/CSV, all without an internet connection. The presenter highlights the offline capability and provides a link to purchase the source code.

### Key Points

- **Project Overview** [00:03] — The video shows a complete offline JSON editor developed in Next.js and React, running in the browser as a single-page application.
- **Data Type Display** [00:32] — The editor displays total data types present in the JSON, e.g., six objects, with tree view and syntax highlighting.
- **Format and Minify** [00:57] — Users can format or minify JSON with a single click, instantly transforming the output.
- **Technology Stack** [01:27] — Built with the latest Next.js and React 19, using TypeScript files for components, making the code easy to understand and extend.
- **Validation Feature** [02:23] — The validate button scans JSON and provides bottom notifications, indicating validity or errors with exact line numbers.
- **Error Detection** [03:06] — If a bracket or comma is missing, validation reports the error at a specific line and position (e.g., line 8, position 4).
- **Comparison Tool** [03:55] — The editor includes a split-view comparison feature to find differences between two JSON files.
- **Conversion Capabilities** [04:38] — JSON can be converted to YAML, XML, or CSV formats, with output displayed and copyable to clipboard.
- **Offline and Deployment** [05:54] — The app works offline without internet, and the purchased source code can be deployed or run locally.

### Conclusion

The video presents a polished offline JSON editor with conversion, comparison, and validation features, aiming to sell the source code rather than teach how to build it.

## Transcript

So in this video, I'll show you I built out a complete uh NexJS out a complete uh NexJS uh ReactJS uh JSON editor directly in the browser. So I'm running it inside the browser. As you can see, it's
developed in ReactJX. So it has all the features. It can format your JSON code, validate it, minify it directly in the browser, single page application. So right here this is either you can paste
your JSON directly as you can see I pasted the JSON right here on the left pasted the JSON right here on the left hand side it also shows me the total data types which are present. So there are six objects right here. You can view
it inside the tree mode with the syntax highlighting. It clearly shows you the actual property, the actual type like this. You can actually expand this.
So it clearly shows you if you have a bunch of JSON inside the split view. And then we have a bunch of buttons right here. We can actually format this JSON by clicking this button and JSON will be formatted. We also have the option to
minify it as well. If I click the minify button, JSON will be minified instantly. [snorts] And now you can simply see all the JSON has been minified. So it's basically developed in Nex.js and ReactJS. So this is actually you can see
we using the latest NexJS version and also the React version 19 syntax highlighting. So I'm just running this locally as you can see on my terminal. So if you need the full source code of this project, I've given the
link in the description. You can directly purchase it. So once you zip file from Google Drive automatically. All the components are divided into its appropriate uh TypeScript file here. As you can see,
application has multiple components. So once you get the source code, it will be easy for you to see how I coded this application and also be able to add additional features on top of it and also modify the user interface if you
want to. So this is the overall structure of the application. Each file structure of the application. Each file has its own TypeScript file here. So apart from that, we also have the validate button as well. So once you
click the validate button, it will actually scan the entire JSON and it will give you at this bottom notification that your JSON is valid. You can even clear out everything by clicking the clear button and you can
even load an external JSON file as well by clicking this load button. So right here now you can actually basically load an external JSON file that needs to be edited. And now again you click the format button. It will
instantly with a single click it will uh format your JSON file. So it will save you a lot of time. If you purchase it this project this project uh you will be able to format minify
validate JSON file in a single click. you click the validate button and if you make let's suppose I make any sort of mistake here I forgot this uh bracket or
[sighs] comma then I click the validate button exactly at line number it tells you the so line position four of 4.4 four line number eight. So here if I fix this by adding this
so once again the JSON will be validated and you can minify it format this copy to clipboard as well. You can even compare it as well. So you can here you can compare it with different JSON file as well. So right here on the right hand
side you can compare it. No difference is found. So if you make No difference is found. So if you make any sort of
between the two two files. So you can even do comparison of different JSON files as well. So this is a split view. This is a tree view. This is the overall you can directly purchase the full nextJS project. uh after purchasing it
you will be getting the source code from Google drive automatically. So this is the full directory structure. I coded this from scratch. So definitely check out this. The link is given in the description. So I basically show you all
the feature here. And then we also have the basically this feature as well. You can convert your JSON file into vable XML CSV all these things. So if you want to convert this into CSV, you basically
first of all you need to paste it. from anything. So if you are searching from a
if you're working with a API response as well let's suppose I
you can see you can copy to clipboard as well. You can see now it successfully converted and show the output. Again,
you can copy to clipboard. So, apart from these uh formatting, validating and minifying capabilities, we also have option to convert your JSON into YML, XML, CSV. So, if you're interested guys, this is a full fullyfledged single page
application having all the features. It's an offline editor. It doesn't require internet. So once you purchase it, it will be easy for you to deploy the application and also run this locally as well. So definitely check out
locally as well. So definitely check out this