Up next in 10
Build a JSON Editor to Format, Validate & Minify JSON in Browser Using HTML & JavaScript
Jun 26, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-json-editor-to-format-validate-minify-json-in-browser-using-html-javascript/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this video so
0:05
in this video I'll show you a JSON
0:07
editor that I developed uh directly in
0:09
the browser which can actually format
0:12
minify or validate your JSON directly in
0:15
the browser itself it's a single page
0:17
application developed in HTML CSS and
0:19
JavaScript all the source code is given
0:22
in the description the link is given you
0:25
can directly purchase it after
0:27
purchasing it you will get this index
0:29
html file here which is almost if you if
0:32
I show you it's almost thousand lines of
0:35
code here so I developed it from scratch
0:38
so after you get this you will get to
0:40
understand that how I developed this and
0:42
you can easily modify it very easily now
0:45
coming back to the tool the tool
0:47
actually is deployed on my website
0:50
freemediatetools.com
0:52
so before purchasing it you can actually
0:54
try out this tool JSON formatter
0:57
validator and minifier so now you simply
1:00
copy paste a bunch of JSON let's suppose
1:04
I copy paste this JSON inside this tool
1:07
so automatically we have various options
1:09
on the left hand side if you see you
1:11
have the option to format this validate
1:14
minify all these three options as I
1:17
click format instantly I will get this
1:20
warning that your JSON file is not
1:22
correct it will automatically detect
1:24
these errors and automatically show you
1:26
on line number one you are putting a
1:29
comment just remove this it will
1:32
basically have this red color
1:34
highlighting that you're having this
1:36
error in this line number so I will
1:39
remove this
1:41
if I remove this now click on format and
1:44
now in the right hand side your JSON
1:46
will be formatted
1:48
if you also want to minify it there is
1:51
this option of minify So the white spade
1:53
will be removed here you will see that
1:56
now you can copy the minified JSON right
1:59
here very simply if I make a mistake
2:01
here intentionally let's check if I
2:04
remove this at various times
2:08
now if I click validate it will give you
2:11
this message on line number four this
2:13
error has taken place so it's a complete
2:15
editor so you will get to know the
2:18
highlighting is will be there again you
2:21
click it will tell you on this line
2:24
number the quotes are missing so in this
2:28
easy way you can actually validate your
2:30
JSON files directly in the browser very
2:33
easily using this tool
2:36
so the link is given in the description
2:39
so if you want the full source code of
2:41
this tool we can even paste
2:45
or we if you have a JSON file you can
2:48
drag and drop
2:50
like this it can even accept
2:55
like this as well or you can from URL as
2:58
well so if you are having an API simply
3:00
plug the URL as well so we have all
3:02
these three options
3:06
so this will load this JSON data from
3:08
here also so it's a complete JSON editor
3:11
guys if you are interested the link is
3:13
given the description so you can
3:15
actually purchase the full source code
3:17
of this and you can easily run this
3:19
locally once you get the source codes
3:22
inside your VS code so now we are
3:24
running it on local host so it's very
3:26
simple to deploy this application as
3:28
well
3:30
so
3:32
if you are interested the link is given
3:34
in the description and thank you very
3:36
much for watching this video and I will
3:39
be seeing you in the next one
#Scripting Languages