Up next in 10
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-csv-editor-to-view-edit-csv-in-browser-using-html-javascript/
Show More Show Less View Video Transcript
0:00
to a CSV editor and viewer tool that I
0:04
developed directly in browser using
0:05
HTML, CSS and JavaScript. With the help
0:07
of this web application, you will be
0:09
able to edit and create your CSV files
0:12
directly in the browser. So I basically
0:14
built this inside HTML, CSS and
0:16
JavaScript. Uh this is a single index
0:20
HTML file here. You will get after you
0:22
make the payment. I've given the link in
0:24
the description of the video to purchase
0:26
the full source code. So this is the
0:29
exactly the source code here about 700
0:32
lines of code. So it's a single file.
0:34
You can run this locally as well. Simply
0:37
open VS code and now we are running it
0:39
on local host. So you can try this. I've
0:43
given the link in the description. So
0:46
once you click that link, you will be
0:48
able to it will redirect you to the demo
0:52
link as well. I've given that demo link
0:54
at the checkout page. So this is the
0:56
actual tool I've deployed this. So it
0:59
has all the options. So once you land on
1:01
this tool, you can actually create CSV
1:04
files. So automatically some data and
1:07
columns have been there. So
1:11
you can click on the cross button to
1:13
delete this row. You can add new columns
1:16
as well.
1:18
So now if you want to create it from
1:21
scratch, you can click this new CSV
1:22
button. And now you can name your
1:25
columns whatever you want to. So here
1:28
you say name
1:33
age.
1:34
And now if you want to delete this
1:36
column you click the delete button. So
1:38
now we just have
1:40
so here you basically it's a fully
1:42
fleshed editor. So here you fill out the
1:44
entries.
1:48
You click on new add new row. So new row
1:52
will be added.
1:54
you fill out the entries.
1:58
Uh now if you're happy about this, you
2:00
can simply click
2:02
the download CSV button and as soon as
2:05
you click the CSV file will get
2:07
downloaded and all your data which you
2:10
entered is automatically saved. The CSV
2:13
file is automatically download and you
2:16
can even create a new column. Just name
2:18
your column whatever you want to
2:22
and just fill out the information once
2:24
again. You can even duplicate the row
2:26
just change. So now we have also these
2:29
duplicate button. So you just need to
2:30
duplicate click the copy button and just
2:33
change the values. So it will save you a
2:35
lot of time because many a times you
2:38
need to create CSV file. So it's an
2:40
ultimate editor. You can even change the
2:42
delimiter from comma to semicolon.
2:44
Whatever you want to from here, double
2:46
quote or single quote. These are some
2:49
settings you can control here.
2:54
So definitely check out this. And also
2:57
we have this option. If you have an
2:59
existing CSV file that you want to, you
3:02
can simply load that CSV file and
3:04
automatically all the content of the CSV
3:07
file will get loaded. So before you
3:09
purchase it, definitely try it. the demo
3:11
of this tool. I've given it at the check
3:14
out page. So definitely check this out
3:17
if you want to clear everything out. You
3:19
click clear all button.
3:22
So you can just see it's a very easy to
3:26
use tool. You name your columns, then
3:29
you name your rows. You can even
3:32
duplicate this as well.
3:36
So it's very you want to remove anything
3:38
you can click the cross button. It also
3:40
shows you the size as well. Realtime
3:42
size 245 bytes, how many rows are there,
3:46
columns, everything
3:48
it is there for you. So it's coded
3:51
entirely in HTML, CSS and JavaScript.
3:54
Almost 700 lines of code is there and uh
3:59
it's a complete offline editor. Once you
4:01
purchase it, you will get entirely the
4:04
source code. It's very easy to run this
4:06
as well. So definitely check out if you
4:08
are interested you can purchase the full
4:12
source