Up next in 10
Build a React.js Microsoft Excel Viewer & Editor Clone in Browser Using xlsx Library in TypeScript
Jun 19, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-microsoft-excel-viewer-editor-clone-in-browser-using-xlsx-library-in-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:01
uh hello guys uh welcome to this video
0:03
so in this video I will show you a new
0:06
tool that I deployed on my website
0:08
freemediatools.com
0:10
uh basically it's kind of a Microsoft
0:12
Excel editor or viewer where you can
0:16
actually edit your Excel files or view
0:20
them inside a nice little editor so this
0:22
is the tool that I deployed on my
0:24
website freemediatools.com
0:26
the latest tool Microsoft Excel viewer
0:29
and editor it's developed inside ReactJS
0:32
and it is using XLS package which is
0:35
also known as a sheetjs as well so this
0:38
is actually the application which looks
0:41
like this if you land on this tool it
0:43
looks something like this so here you
0:44
need to upload or select a excel file uh
0:47
there is a button right here
0:50
you will simply select this and then you
0:52
need to select any Excel file
0:57
spreadsheet you may select so it's a
1:00
Microsoft Office Excel viewer and editor
1:02
clone so if I select the Excel file you
1:04
will see it will display the Excel
1:06
records in this nice little table like
1:08
structure and it will actually show all
1:11
the sheets so in this Excel file only a
1:13
single sheet is there so it is
1:15
highlighting this the sheet one and it
1:17
has all the records out there and it is
1:19
displaying it in a tableau like
1:21
structure and we have these columns here
1:24
first name last name gender country age
1:27
date so each and every record is
1:29
displaying right here and you can even
1:32
switch to light mode as well depending
1:34
upon it has various themes so now we
1:37
have this button here of edit sheet so
1:40
as soon as you click this this will
1:43
become editable so now you can actually
1:46
change the records you can display
1:49
you can edit your records in the Excel
1:51
file can edit all the columns
1:56
you can see that
1:59
you can change do the modifications so
2:02
once you are happy with these
2:04
modifications
2:06
once you do this you will see
2:14
so once you are happy making the changes
2:17
then you can simply click the save
2:19
changes button so as soon as you click
2:22
this automatically the new modified
2:24
Excel file will be downloaded as an
2:26
attachment so if you try to open this
2:28
you will see all the changes that you
2:30
done it's reflected back in the output
2:32
file here so this is a nice little
2:34
Microsoft Excel viewer and editor that I
2:38
developed inside the browser using
2:39
ReactJS so it's all happening in the
2:42
browser side no server side code is
2:44
involved if you refresh it it's a single
2:46
page application statically works in the
2:48
browser you simply select your Excel
2:51
file and then you have this option of
2:53
edit sheet click on that and you will be
2:56
able to edit and you can view the act
3:00
excel file content and then if you want
3:02
to change the content you can click the
3:04
edit sheet button and once you are done
3:07
you simply click the save changes button
3:09
and then output file will be downloaded
3:11
so this is the actual react project here
3:16
if you are interested in this project I
3:18
have given the full source code of this
3:20
you can purchase it from my website
3:22
procodestore.com the link is given in
3:24
the description so this is the overall
3:26
project of ReactJS so we are using the
3:29
latest version of ReactJS if you see we
3:31
using React 18 and for this we are using
3:35
this package XLS which is an open-source
3:38
package for modifying or view Excel
3:40
files in the browser if you just XLS
3:44
npmJS this is essentially this package
3:47
it's also known as sheetjs commonly
3:50
known as sheetjs which is an open-source
3:53
JavaScript library for editing excel
3:55
files right in the browser itself 3
3:58
million weekly downloads so we are using
4:00
this sheetjs library inside our reactjs
4:03
application
4:05
to build this so once you get the source
4:07
code you will be able to modify this and
4:09
look at how I built this project each
4:12
and every component is divided into
4:14
different components you will see that
4:17
it's developed inside Typescript so each
4:19
component is divided into multiple you
4:22
can see that
4:24
so once you purchase it all the source
4:27
code will be available from Google drive
4:29
automatically so the link is given in
4:31
the description at the check out page I
4:32
have also given the demo link you can
4:35
try out this application so at the check
4:37
out page you can go to this demo link
4:39
first of all try out this application if
4:42
you are interested then you can actually
4:44
purchase it so you can edit all these
4:48
records here you will see that it's
4:50
similar to Microsoft Excel clone so
4:53
don't need to use any sort of third
4:55
party software you can use this
4:57
application which runs entirely in the
4:59
browser you can change the records
5:02
and then after that click on save
5:04
changes and then it will download the
5:06
output file after
5:09
so this is actually the ReactJS
5:11
application uh now to run this
5:14
application it's very easy first of all
5:16
you simply npmi so this will install all
5:19
the NodeJS modules we'll create this
5:22
Node modules folder right in your
5:24
project directory after that you simply
5:27
say npm rundev this will start the
5:30
development server on localhost 5173
5:34
and it's very easy to run locally and
5:37
also deploy this as well so now if you
5:41
see we are running it on local host 5173
5:46
and uh this is
5:49
very easy to run so it will take some 5
5:52
to 10 seconds to start the project if
5:54
you're running it for the very first
5:55
time
5:58
and if you want to build out this
5:59
project the build command is very simple
6:01
npm run build so now you can see we are
6:04
running it on local host again you
6:06
select whatever Excel file that you want
6:08
to edit and also read it is also a
6:12
viewer as well you will see all the
6:13
Excel content will be displayed in a
6:15
tableau structure and then you have the
6:17
button here edit sheet and then you will
6:20
be able to edit the content very easily
6:24
and then click save changes you will see
6:27
the file will be downloaded so now if
6:30
you want to build out this application
6:32
and deploy this so there is a build
6:34
command as well npm run build so this
6:36
will create the dist folder
6:40
after this build command is successful
6:43
it will create this dist folder which
6:45
will contain the minified code like this
6:48
so it's very easy to modify once you get
6:51
the source code you will be able to see
6:53
how I built this you will be able to
6:54
change the user interface as well so the
6:57
link is given guys in the description of
6:59
the video and I will be seeing you in
7:02
the next video please hit that like
7:04
subscribe the channel as well
#Programming