Uh hello guys, welcome to this uh video.
So in this video, I'll show you I built
out a complete uh NexJS
uh ReactJS 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
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.
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 are
using the latest Nex.js 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
purchase it, you will actually get the
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
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 add 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.
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
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
any sort of
so it exactly tells you the difference
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
editor. So if you're interested guys,
you can directly purchase the full ne
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 viable
XML CSV
all these things. So if you want to
convert this into CSV you basically
first of all
need to paste it.
You can basically bring the JSON file
from anything. So if you are searching
from a
if you're working with a API
response as well and let's suppose I
I just paste it. So now you will
it will convert this JSON into CSV. As
you can see you can copy to clipboard as
well.
Similarly, we can convert this into XML.
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
this