Up next in 10
Build a XML Viewer & Editor in Browser to Format,Validate & Minify in Browser Using HTML & JS
Mar 4, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-xml-viewer-editor-in-browser-to-formatvalidate-minify-in-browser-using-html-js/
Show More Show Less View Video Transcript
0:00
is welcome to this video. So in this
0:01
video I'll show you an XML uh editor and
0:05
viewer that I developed directly in
0:07
browser. So with the help of this
0:08
application you will be able to see the
0:11
XML files or edit them. So I've also
0:15
deployed this application inside my
0:18
website as well. I have also given the
0:20
link in the description of the video.
0:24
So I have deployed this on free
0:27
mediatools.com. You can basically check
0:30
XML formatter. You can even minify your
0:32
XML files or validate that as well. This
0:35
is the actual interface. You have also
0:37
the live preview as well.
0:40
So just wait. Let me open the zoom it
0:42
tools so that I can
0:47
zoom in on the screen.
0:50
So this is the actual demo link.
0:54
So in the description I've given the
0:56
link to purchase the full source code.
0:58
So right here you will find out the demo
1:00
link as well.
1:02
So in this is actually the editor you
1:05
can also have dark theme light theme as
1:08
well. So here we have a bunch of
1:10
options. We can format this XML code
1:13
minify or validate. So once you click
1:16
format it will format and once you click
1:18
minify it will minify the XML source
1:21
code and validate it will check and tell
1:24
you whether it's a valid XML file or
1:26
not. So you will get this notification.
1:28
This is a complete editor. So here you
1:31
can even paste some valid XML. So I
1:35
basically pasted this. You all also see
1:37
this live preview with full syntax
1:39
highlighting. [snorts] So this is the
1:42
application I made entirely in HTML, CSS
1:45
and JavaScript. And once you purchase
1:47
the source code, you will get this
1:48
single index.html file here
1:51
automatically from Google Drive. So it's
1:54
around about as you can see it's 700
1:57
lines of code. So it's very easy to
1:59
deploy as well. It's simply HTML, CSS
2:02
and JavaScript. So if you're running it
2:03
locally on VS code, you can simply open
2:06
a live server. And now we are running it
2:08
at local host as you can see. So again
2:11
you repeat the process. You come to this
2:13
XML editor and viewer. You simply paste
2:16
your XML code
2:18
right here. You will see this is a split
2:20
view. It shows you one side of code, one
2:23
side is live preview. So dark theme is
2:26
also supported. So it's entirely running
2:28
in the browser. No server side, no back
2:30
end is there. You can simply purchase
2:33
the source code. You can also minify
2:35
this as well. So once you minify, you
2:38
can save this. So as you save this, a
2:41
new XML file will be created. So it's
2:44
very simple.
2:46
And then you can even open an existing
2:49
XML file as well.
2:51
inside this editor. So you have this
2:53
open button or you can create a new file
2:56
as well. So right here you paste your
2:58
code or if you have an existing XML file
3:03
you basically can click this open button
3:06
as well.
3:10
So
3:15
definitely
3:18
before purchasing it, I have also given
3:26
the link at the check out page. So
3:28
before that you can simply check out
3:30
this
3:32
all these features are there.
3:35
So
3:39
you also have this pencil icon as you
3:41
can see. You can even click that as
3:43
well.
3:45
You have all these options. Format,
3:47
validate, minify or you can create a new
3:50
document as well. So it's right here in
3:52
the browser. So definitely check out
3:55
this if you're interested. I have given
3:57
the link to purchase the source code in
3:59
the description of the video. So
4:01
definitely check out this.