PrettyCSS Live Demo!

PrettyCSS is a project on GitHub to provide a CSS lint checker, validator and pretty printer.

Nothing says more than actually seeing a product in action, so below is a live demo of the PrettyCSS engine at work. It updates live; as you type in CSS, the bottom text area updates with a pretty printed version. It also reflects how a browser sees the CSS, so invalid markup is removed. To understand this more, try typing in a {garbage} and you won't see "garbage" because the structure of the declaration is invalid.

Check out the errors and warnings tab to see exactly what's wrong and where the problem was located. From there, you can ignore selective codes, just like using the command-line interface.

Before - Minify - Default

After - Invalid CSS grammar is automatically removed or fixed Warnings detected Errors detected Errors and warnings detected - go to Errors and Warnings tab

Errors:

Warnings:

For the whitespace settings below, "\n" will insert a line break and "\t" will add a tab character.  Spaces are automatically converted to a dot (·) so you can see them in this form.

The above interface uses the latest committed version from the repository automatically, so it might be broken one day or not the same as what you would get when you install PrettyCSS with npm. When that happens, please file a bug.