Live preview of vanilla CSS as I change it?
Is there a tool that lets me see my CSS in one pane and the rendered HTML file in another, such that if I tweak the CSS I can see the rendered changes live in the HTML? Bonus if Markdown is supported.
Is there a tool that lets me see my CSS in one pane and the rendered HTML file in another, such that if I tweak the CSS I can see the rendered changes live in the HTML? Bonus if Markdown is supported.
A zero-install solution would be to use the "workspace" feature of Chrome's Dev Tools:
1. Open your index.html file in Chrome.
2. Open the Dev Tools.
3. In the "Sources" tab, activate the "Filesystem" sub-tab.
4. Click on "+ Add folder to workspace" and choose the directory containing your index.html and index.css files.
5. Edit the index.css file with autocompletion and live preview.
6. Save your work so that it is synchronized with your filesystem.
In action: https://i.imgur.com/slcSt9X.gif
You of all people may be amused to know Charlie Parker’s son taught me saxophone.
"Orthogonally to that, I had userContent/Chrome.css opened in the sidebar and on every key up I unregister and loadAndRegisterSheet with it :) (the styles were applied live to documents or browser when the sidebar was open and saved on unload)." https://news.ycombinator.com/item?id=33924565
> The zero configuration build tool for the web.