Skip to main content
Open Innovations is winding down and will no longer be commencing new work from May 2026.

A CSV editor in 50kB

On a recent project we wanted to have the ability to view and edit a CSV file within a web page.

Don't re-invent the wheel

There are plenty of tools that let you do this sort of thing already. One option is the excellent Grist CSV viewer. It has lots of features that we like: it is client side (no data goes to a server); it is open source; it has no tracking; and you can self-host it. It is very capable with a vast number of features. The initial Javascript (https://grist-static.com/csv-viewer.js) is also nice and small at 15.7kB (5.8kB transferred). However, as soon as you want to view/edit a CSV file, Grist loads a further 33.5MB (20MB transferred) of resources. If you want a simple viewer/editor, that is a lot.

Could we make our own very basic CSV viewer/editor using a lot fewer resources? The simple answer is: yes!

Re-inventing the wheel

In building our own CSV editor we limited the number of features that we think are must-haves and those that we think are should-haves and could-haves. So far we've added the following features:

  • an editable table showing the contents of the CSV;
  • delete columns;
  • duplicate a column;
  • shift columns left/right;
  • rename columns;
  • sort rows by the values in a particular column (increasing or decreasing)
  • strip non-numeric values from a column (useful for changing "£1,000.50" into "1000.50")
  • undo/redo buttons;
  • a "Save CSV" button which saves the edited version of the file.

We've split our code into two pieces:

  1. An initial page load of 3.3kB (1.4kB transferred) to attach events to buttons on the page.
  2. When someone wants to view/edit a CSV file a further 30.2kB (9.7kB transferred) is loaded.
Our examples show how you'd include it in your web page.

A standalone editor

We've also created a standalone CSV Editor tool that lets you drag-and-drop your own local CSV file onto. The tool doesn't upload your CSV file anywhere; it does everything in the page.

The standalone editor currently comes in at around 50kB (28kB transferred) to display a local CSV file. That gets it an A+ rating on the Website Carbon Calculator. In fact, because we've kept everything else so compact, around a fifth of that bandwidth budget is just to add our standard font family for headings! This all makes it many times faster to load than Grist albeit with a tiny fraction of the features.

It may be that we think of some extra features to add (for instance some of our should/could haves) so there's a chance the Javascript will increase in size a little bit in the future. But we will aim to keep increases in size as small as possible.

If you need a fully-fledged editor in your web page use something like Grist. But if you just need something very basic, try our CSV editor.