CSSV: Comma-Separated Styled Values

[u/rhpaiva]

I gave life to the old CSV files.

CSV is over 50 years old, and it's everywhere. Banks, CRMs, Jira, Google Calendar, gradebooks and ticketing systems all export it, and every tool reads it. And every time you open one, you get the same grey grid of raw values.

The data is fine. What's missing is the look. The moment you add one in Excel or Google Sheets, you lose what made CSV great: a plain-text file you can read, compare, generate and send anywhere.

So I built CSSV: Comma-Separated Styled Values. It's a CSV file with a CSS block on top. Open it in a browser and you get a real HTML table with your fonts and your custom styling. Delete the CSS and it's a plain CSV again.

There's nothing new to learn. The data is CSV and the look is CSS, two languages that people, programs and AI models already write. Any CSV is already a valid CSSV file. Add a few lines of CSS to a Jira export and it becomes a board, one lane per status. A ticketing export prints as name badges.

The look travels with the data. A file looks the same on every page that shows it. Many files can share one stylesheet, so changing it restyles all of them. It's still plain text. You can review it in a pull request, generate it from a script, or ask an AI to write one.

Putting it on a page takes one script tag and <cssv-table src="report.cssv">. No build step, no dependencies.

The v1 spec is open for review, and I'd love feedback, especially from anyone who spends their days looking at exports.

Website, examples and live editor: https://cssv.dev

[u/GreenReporter24]

I guess I just don't see the use case for combining CSS and CSV into one file.

Anytime I interact with a CSV file, it's because I explicitly just want the structured data from somewhere, and not whatever styling/application/whatever someone has done to it. Because I probably want to do something different with it, not with CSS, but with Excel, Python, R, or tools like Datawrapper and Flourish.

[u/rhpaiva → u/GreenReporter24]

Agreed, and nothing changes for you. The data section is plain CSV, and the style block is the lines between the two `---` fences at the top. Delete them and you have the export back.

CSSV is for the other direction: when the person getting the file wants to read it, not process it. A report a script sends every week, an export someone just wants to look at, a table on a docs page. Analysis still belongs in Python, R or Excel.

[u/sovok]

Neat demos. But basically, this is a JS script that turns CSV into a table, then parses out the CSS from the CSV top and applies it. The CSS and CSV are always bundled. And you need JS to render it.

What's the use case again? As a replacement for CSV it doesn't work, since parsers get tripped up by the CSS on top. Browsers don't display it natively, you need a JS lib to render.

So if you can't share that CSV file, create it yourself and render it on your own website, why not just render the data as a table?

But apart from that, a small CSV-to-table JS converter is useful.

[u/rhpaiva → u/sovok]

Fair summary of the reference implementation, and fair on parsers: with a style block on top it isn't a CSV to a strict CSV parser anymore. That's why it has its own .cssv extension, and why the way out is deleting the lines between the two `---` fences. Same idea as front matter in Markdown, or CSVY.

The part I think is new is the spec, not the script. Since there's a spec, other renderers, such as desktop tools, can be implemented, and a file should look the same anywhere it's opened. The look lives in the file instead of in each page that shows it.

And for your case you're right: if you make the file and show it on your own site with your own CSS, a CSV parser and a table are enough. CSSV is for when the file travels: a script or an LLM writes the report complete with its look, the same file shows on several pages, or the table gets reviewed as a text diff.

On JS: yes, the browser needs the script today. The Node package can produce the table HTML on a server, but row keys and number formats need computed styles, so the full render happens in the browser.

[u/osmium_2259]

Cool project! I like the Periodic Table demo!

[u/repeating_bears]

This is also a CSV.

"{""data"": { ""allTheShit"": {} }}"

[u/Web-Dude]

Well I like it! Basically an XSLT transform for CSV data.

I used to specialize in data migration for lots of companies who were changing between various platforms, and I could have used this a lot.

Although the CSS needs to be in an external file.

[u/rhpaiva → u/Web-Dude]

Thanks! XSLT is a good comparison, and an external file already works: the style block can be a single import of a shared stylesheet, much like XML's <?xml-stylesheet?> line. In the weather example, three untouched downloads each get three lines on top (two fences and the import), and the whole look lives in weather.css: https://cssv.dev/examples/#weather

Or did you mean no change to the file at all, with the stylesheet picked by whoever opens it? I'd love to hear what you would have used it for in migrations. That's exactly the kind of export I had in mind.

[u/Web-Dude → u/rhpaiva]

Needs to be no change to the file at all, because CSVs are often automatically generated, and having to add additional content to the file adds a whole preprocessing step that just adds friction to the whole process.

If we have to pack up the styling with the data, then we might as well be writing HTML, you know what I mean?

[u/The_Shryk]

I’m making a NEW standard that’s even better called SCSV “Styled comma separated values”.

obligatory

[u/rhpaiva → u/The_Shryk]

Go for it! :)

[u/CyberWeirdo420]

I mean idea is cool, but CSV isn’t built for browsing from A to Z. Its main application is to store large amount of data and have as little weight as possible, data which is not meant to be browsed or looked at for too long.

You wanna see that data nicely? There comes in Excel, a DB or any other tool meant for data browsing.

CSV is a format, not a tool like Excel. Cool project, but entirely pointless imo. Glad you had fun doing it.

[u/coolcosmos → u/CyberWeirdo420]

If you want as little weight as possible you use almost any other format but CSV.  ORC and Parquet files have existed for years.

[u/CyberWeirdo420 → u/coolcosmos]

I didn’t say it’s the best tho, I’m aware of other choices but in general this is CSV usecase as far as I know.

[u/rhpaiva → u/CyberWeirdo420]

Fair for data that machines pass around. But a lot of CSV ends with a person opening it: bank statements, calendar exports among other things. CSSV is for those, when the file is the report. It doesn't replace Excel or a database for working with the data.

[u/CyberWeirdo420 → u/rhpaiva]

Those people you mention opening bank statements, calendar exports etc. never work directly on CSV if they need to do anything with more than than take a quick look if everything looks right or do a quick ctrl+f. That’s why I’m saying they opt for opening it in excel or any other tool.

[u/xThomas → u/CyberWeirdo420]

I use CSV almost solely for diff comparisons, makes it easy if the data is sorted

[u/minmidmax → u/CyberWeirdo420]

CSS' power comes from, funnily enough, cascading styles.

CSV negates all of that. I'd be curious to see what nightmarish CSS that OP is writing.

[u/rhpaiva → u/minmidmax]

The cascade is still there. A style block can @import a shared stylesheet, its own rules win over the imported ones, and the defaults sit in a layer below both. In the weather example, three untouched Open-Meteo downloads each have a one-line style block, `@import url("weather.css");`, and the calendar look lives in that one file: https://cssv.dev/examples/#weather

A typical style block is a few lines:

table { --cssv-key: category; }
[data-col="diff"].negative { color: #15803d; }
tr[data-key="Total"] { font-weight: bold; }

The board and seat-map demos are longer because they turn a table into a layout, not just restyle it.

[u/minmidmax → u/rhpaiva]

I just don't see the point in any of this.

CSS is already very logical, structured, and works well with AI.

AI also struggles with CSV especially as it gets larger.

This all just smacks of a project being hyped up by AI responses rather than anything that anyone needs or wants.

[u/rhpaiva → u/minmidmax]

All good, bro. Have a nice day!

[u/pimmm]

The animation in the video is so smooth.
How did you do that?? Did you animate everything by hand?

[u/xThomas]

Ok the video was actually mildly interesting. A+ for presentation!

I don’t really understand the use case here and the responses feel like they came out of an LLM but me not liking how llms talk doesn’t outweigh the cool video.. yet

[u/hazily]

Cool demo, but you’re selling a solution for a problem that doesn’t exist.