How is this different from CSV Viewer?

CSV Viewer is read-only, its table cells are static text and sorting doesn't touch the underlying data. CSV Editor's cells are real inputs you can type into, plus buttons to add or remove rows and columns, and the output panel reflects your actual edits.

Does typing in the input box above the table update my edits automatically?

No, on purpose. Auto-syncing on every keystroke would overwrite in-progress edits in the table below. Instead, click "Load from input above" whenever you want to re-seed the table from a fresh paste.

What happens to the header row when I add or delete a column?

Adding a column appends a new, empty header cell (and an empty cell to every data row); deleting a column removes that header cell and the matching cell from every data row, so the grid always stays rectangular.

Can I get my edited table back out as a CSV file?

Yes, the output panel below the table always shows the live edited grid re-serialized as CSV text, downloadable as edited.csv.

CSV Editor - Edit Cells, Rows & Columns in a CSV Online

Overview

Introduction

Sometimes a quick sort or read-only preview isn't enough, you actually need to fix a typo, delete a bad row, or add a new column, without opening a spreadsheet program.

CSV Editor turns your pasted CSV into a real editable table: click into any cell and type, add or remove rows and columns with a button, and export the result whenever you're done.

What Is CSV Editor?

A browser-based CSV table editor where every cell is a real text input bound to component state, not a static display value.

It keeps the edited grid separate from the raw text input, so you can paste a fresh CSV, load it into the table deliberately, and edit freely without every keystroke in the input box fighting your in-progress edits.

How CSV Editor Works

Pasted CSV text is parsed once via the shared parseCsvGrid parser into a header array plus a rectangular rows array, which becomes the editor's live grid state.

Every edit (cell change, header rename, add/remove row, add/remove column) runs through a small set of pure, immutable grid-transform functions, and the output panel re-serializes the current grid back into CSV text after every change.

When To Use CSV Editor

Use this when you need to make a handful of targeted edits, fix a value, drop a row, add a column, to a CSV without pulling it into a full spreadsheet application.

It's also useful for quickly building up a small CSV by hand: start from an empty-ish sample, add rows and columns, and export.

Often used alongside CSV Viewer and CSV Splitter.

Features

Advantages

Real inline editing, every cell is an actual input, no read-only limitation.
Explicit add/remove controls for both rows and columns keep the grid always rectangular.
The deliberate "load from input" step means in-progress edits are never silently overwritten.

Limitations

Editing very large CSVs (many thousands of rows) as individual DOM inputs can get slow, this is best suited to small-to-medium edits.
There's no undo history, removing a row or column is immediate and only recoverable by re-loading from the input panel.

Examples

Fixing a typo and adding a row

Input

id,name,score
1,Ada,95
2,Grace,72

Output

id,name,score
1,Ada,95
2,Grace,95
3,,

Editing the "72" cell to "95" and clicking "Row" to append a new, empty data row both flow through the same immutable grid update, then the output panel shows the result as CSV.

Best Practices & Notes

Best Practices

Click "Load from input above" right after pasting a new CSV, the table won't update on its own.
Delete columns you don't need before adding many rows, it keeps the table narrower and easier to scan.
Copy or download the output panel's CSV as soon as you're happy with an edit, there's no undo.

Developer Notes

The grid lives as `useState<CsvEditorGrid | null>`, seeded once from the sample via `parseIntoGrid`; every mutation (updateCell, updateHeader, addRow, removeRow, addColumn, removeColumn) is a pure function in csv-editor.ts that takes the current grid and returns a brand-new one, so React state updates stay simple functional replacements rather than in-place mutation, and gridToCsvText wraps the shared stringifyCsvGrid for the live output panel.

CSV Editor Use Cases

Quickly fixing a handful of incorrect values in a CSV export without opening a spreadsheet program
Manually building a small CSV fixture by adding rows and columns from scratch
Removing a bad row or an unwanted column before pasting a CSV somewhere else

Common Mistakes

Expecting the table to update live as you type in the input box above it, you need to click "Load from input above" to re-seed the table.
Forgetting there's no undo, double-check before clicking a row or column's delete button.

Tips

Use CSV Size Analyzer afterward to check the edited CSV's row/column counts and byte size before exporting it elsewhere.
Pair with CSV Splitter if your edited CSV ends up large and you need to break it into smaller files.

CSV Editor