HACKER Q&A
📣 meowface

Simple collaborative CSS editing tool?


I'm looking for a web app or Chrome extension that lets someone make CSS changes to a page on an existing website - kind of like when using Chrome DevTools' Elements tab - and have those changes be visible to other people in a team. Also with the ability for anyone to export the CSS modifications to a file.

It could be made visible either by everyone on the team using a Chrome extension and seeing those changes applied to the actual page itself as they're viewing it, or it could be some other rendering of it within a web app, or even just a screenshot. Just some way so others can look at the page with the modified CSS applied.

Figma was the first thing I thought of, but from what I can tell, it doesn't seem like it's really intended for starting with a website and editing its CSS. I tried using the HTML To Figma plugin (https://github.com/BuilderIO/html-to-figma), as well as its Chrome extension, but every time I try to import the resulting JSON into Figma, the design looks messed up and nothing like the actual page, with many of the CSS rules seemingly not being applied. The plugin's readme mentions not all HTML and CSS is supported.

I'm not even looking for anything fancy that abstracts away the CSS editing behind a visual editor. I'd just like something that lets you edit CSS rules, similar to what you can currently do with Chrome DevTools, in a way that lets other people see those changes immediately. Or even if not immediately, a few minutes of delay is perfectly fine, too.

Basically just anything to improve/avoid the workflow of someone editing some CSS in DevTools' Elements tab, exporting a CSS file containing their modifications, sending the exported CSS file to someone else, them importing it, them seeing the changes, them tweaking some of the modifications, them exporting the CSS file, them sending the CSS file back, ..., etc.


  👤 punknight Accepted Answer ✓
I built a tool to do this and supported it for 6 months, but I couldn't really find users. The basic idea was a web page that you could collaboratively work on through a server running socket.io, which included editing css, fonts, and the content of the website. The collaborative idea sounds cool, but in practice, it seemed easier to have a team pair program on a zoom call and edit a page live with google dev tools. Is there a reason this solution doesn't work for you?

👤 maybetrythis
I haven't tried it, but what if you were to use Chrome Headless [1] and port forward it so that others could connect with their local copy of chrome?

[1] https://developers.google.com/web/updates/2017/04/headless-c...


👤 gitgud
[1] Glitch is pretty cool, made by the same people who made Stackoverflow? Pretty sure it can do collaborative web development too...

[1] https://glitch.com/teams/


👤 meowface
I wonder if I'm just not phrasing my Google queries properly, because I feel like something like this should have existed for a while, but I can't find anything, for some reason.

👤 balazsdavid987
Have you considered using a version control system with automatic deployments when new code is pushed?

The CSS you see in the browser might not be the same as the CSS that developers write.