Up next in 10
Build React.js Microsoft Excel Clone Viewer & Editor to Edit Spreadsheets in Browser Using TS
Jun 19, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-react-js-microsoft-excel-clone-viewer-editor-to-edit-spreadsheets-in-browser-using-ts/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:07
uh hello guys welcome to this live
0:10
stream so in this live stream I will
0:12
show you a online tool that I deployed
0:15
on my website freemediatools.com
0:17
uh this tool actually allows you to
0:19
preview your Excel files it's a
0:22
Microsoft Excel uh viewer or editor
0:25
right in the browser itself so this is
0:27
actually the latest tool that I'd added
0:29
on my website freemediatools.com
0:32
you can check out this tool this tool
0:34
looks like this if you land on this tool
0:37
you have an option of selecting an Excel
0:40
file Microsoft Excel file and if you
0:43
view it simply select the file and then
0:46
it will display the file you can see all
0:48
the tables all the columns and rows of
0:51
data will be displayed in a tabular
0:53
structure is it will be displayed in a
0:55
table-like structure all the column
0:57
names rows of data will be displayed
0:59
here and apart from reading the data we
1:02
also have the option to edit this data
1:05
we have this pencil icon so if you try
1:07
to click you can see it's only contains
1:11
a single sheet in this Microsoft Excel
1:13
file so if you have this option edit
1:14
sheet click on that and as soon as you
1:17
click this option you will see all the
1:19
fields will be changed to editable and
1:22
here you can modify the data here
1:27
so in this easy way you can edit all the
1:31
values of all the columns here
1:37
so you can see it's very easy to modify
1:42
so once you're done you have the option
1:44
of uh save changes and as soon as you
1:48
click this save changes button the
1:50
output file with the modified changes
1:52
will be downloaded as an Excel file you
1:55
can see all the changes that you have
1:56
done is reflected back in the output
1:58
file so this is a very simple it's
2:01
developed inside ReactJS and it is using
2:04
sheetjs open-source package i built this
2:07
application from scratch in ReactJS if
2:10
you need the full source code of this
2:11
application the source code is given in
2:13
the description you can directly
2:15
purchase the full source code from my
2:17
website crowcodestore.com
2:19
at the checkout page also I've given the
2:21
demo link so before purchasing the
2:23
source code you can check out this tool
2:25
here which is deployed on free media
2:28
tools so here you select your Excel file
2:30
that you want to view and edit and after
2:33
that you can repeat this process change
2:36
whatever column names whatever rows of
2:39
data that you want to change it's all
2:41
happening in the browser side so no
2:43
serverside code is involved it's a
2:45
static single page application developed
2:47
in ReactJS
2:49
so if you're interested
2:51
you can first of all try out this
2:53
application at the checkout page the
2:55
live demo link is available so after you
2:57
purchase it you will automatically be
2:59
redirected to Google Drive where you
3:01
will actually get this full source code
3:04
so you can see it's built using
3:05
TypeScript each component
3:08
the application is divided into multiple
3:11
components
3:12
it's developed in Typescript here you
3:14
will see each component has its own set
3:16
of code and if I show you the
3:19
package.json file we are using the
3:21
latest version of React which is React
3:23
18 and for this we are using sheet.js
3:26
which is a open-source library
3:30
for editing your Excel file right in the
3:32
browser itself so this is its official
3:35
website sheetjs.com
3:37
and we are using this to edit the
3:40
spreadsheet right in the browser itself
3:42
so this is the overall application so if
3:44
you're interested guys you can directly
3:46
purchase the full source code the link
3:48
is given in the description so it's
3:52
readily developed inside ReactJS it's
3:55
very easy to run this as well so after
3:57
you purchase simply say npmi so this
3:59
will install all the modules it will
4:02
create this node modules folder after
4:04
that you just say npm rundev this will
4:07
start the development server and start
4:09
the application locally on localhost
4:12
5173
4:15
so if you just navigate to localhost
4:17
5173 your application will start
4:22
and if you also want to deploy this the
4:24
npm run build so this will create this
4:26
dist directory which will contain the
4:28
minified code so it's very easy to
4:30
deploy this application as well so now
4:32
it is running your local host 5173
4:36
again you repeat the same process select
4:38
your Excel file that you want to edit
4:41
and then this is a built-in editor right
4:43
in the browser itself here you can edit
4:46
the content of the Excel file and then
4:48
click on save changes and then your
4:51
output file will be readily downloaded
4:53
so this is a complete Microsoft Excel
4:56
clone kind of an application readily
4:58
available inside browser it's built
5:00
using ReactJS if you are interested the
5:04
link is given in the description you can
5:06
directly purchase the full source code
5:09
and thank you very much for watching
5:11
this video and I will be seeing you in
5:13
the next one
#Business & Industrial
#Software