About

Sharing tabular data as plain CSV often results in formatting loss across platforms. Email clients strip structure, chat apps collapse columns, and social media ignores whitespace entirely. This tool parses raw CSV input using an RFC 4180-compliant state machine and renders it onto an HTML5 Canvas element as a pixel-perfect table image. The output is a downloadable PNG or JPEG file with configurable font size, header color, row striping, and cell padding. It handles edge cases including quoted fields containing commas, embedded newlines within double-quoted cells, and escaped quote characters (""). Note: rendering is constrained by browser canvas size limits. Most browsers cap at approximately 16384 × 16384 pixels. Datasets exceeding 5000 rows may be truncated.

Formulas

The CSV parser operates as a finite state machine with four states:

{

S₀ = FIELD_START → branch on quote or charS₁ = UNQUOTED → consume until delimiter or newlineS₂ = QUOTED → consume until closing quoteS₃ = QUOTE_IN_QUOTED → escaped quote or field end

Column width calculation uses canvas text measurement:

W_col = max(measureText(cell_i,col).width) + 2 ⋅ padding

Where measureText uses the Canvas 2D context ctx.measureText() method to compute pixel width for each cell string, iterating all rows per column. The final image dimensions are:

W_img = ∑col W_col + (cols + 1) ⋅ borderWidth

H_img = rows ⋅ (fontSize + 2 ⋅ padding) + (rows + 1) ⋅ borderWidth

Reference Data

Feature	Detail	Limit / Note
CSV Standard	RFC 4180	Full compliance including quoted fields
Max Rows	5000	Browser canvas size constraint
Max Columns	100	Practical rendering limit
Delimiter	Comma (,)	Auto-detect tab/semicolon support
Quoted Fields	Double-quote (")	Escaped as ""
Output: PNG	Lossless compression	Larger file size, sharp text
Output: JPEG	Lossy, configurable quality	Smaller file, slight artifacts
Font Size Range	10 - 24 px	Canvas text rendering
Cell Padding	4 - 20 px	Horizontal & vertical
Header Row	Bold, colored background	First row treated as header
Row Striping	Alternating background	Configurable colors
Max Canvas Width	16384 px	Browser-dependent
Max Canvas Height	16384 px	Browser-dependent
Copy to Clipboard	Clipboard API	Requires HTTPS or localhost
File Upload	Drag & Drop or file picker	.csv, .tsv, .txt

Frequently Asked Questions

The parser implements an RFC 4180 state machine. When it encounters a double-quote at the start of a field, it enters QUOTED state and treats all characters - including commas, newlines, and other special characters - as literal field content until it finds the closing double-quote. Two consecutive double-quotes inside a quoted field are interpreted as a single escaped quote character.

The tool calculates the maximum column count across all rows and pads shorter rows with empty cells. This prevents misalignment in the rendered table. A warning toast notification appears if the column count variance exceeds 2, indicating the CSV may be malformed.

Canvas rendering uses a device pixel ratio multiplier (typically 2× on Retina displays) to produce sharp output. If you select JPEG format, compression artifacts may introduce slight blurriness. Use PNG for lossless, pixel-perfect results. Additionally, very large tables may hit the browser canvas size limit of approximately 16384 × 16384 pixels, causing the renderer to scale down.

Yes. The tool auto-detects the delimiter by analyzing the first 5 lines of input. It counts occurrences of comma, tab, semicolon, and pipe characters, then selects the most frequent one. You can also manually override the delimiter in the settings panel.

The practical limit is approximately 5000 rows × 100 columns. Beyond this, the canvas dimensions may exceed browser limits. For typical use (under 500 rows), rendering completes in under 200ms. The tool displays a progress indicator for datasets exceeding 1000 rows.

The Clipboard API requires a secure context (HTTPS or localhost). On HTTP pages, the copy button falls back to creating a temporary download link. Safari has additional restrictions: clipboard write for images must be triggered by a direct user gesture, which this tool handles by binding the copy action to the button click event.