How to pretty-print or minify HTML, CSS, and JavaScript
Local indent or compress for markup, styles, and scripts — a formatter, not a bundler, linter, or Prettier plugin host.
Three pages, same idea
HTML Formatter at /tools/html-formatter, CSS Formatter at /tools/css-formatter, and JS Formatter at /tools/js-formatter each pretty-print or minify in the browser. Pretty-print adds indentation so nested tags, rules, or blocks are readable. Minify strips extra whitespace for a smaller paste. These are not webpack, not ESLint, and not a full HTML5 parser — void tags are handled with a small list; broken markup may indent oddly.
Steps
1) Open the formatter that matches the language (do not run CSS through the JS page). 2) Paste the snippet. 3) Choose pretty-print or minify. 4) Copy the output. Invalid or incomplete JS may still “format” as text; this is not a syntax validator like JSON Validator. SQL Formatter and XML Formatter exist for those languages.
Worked example
HTML: <div><p>Hi</p></div> pretty-prints as nested lines. CSS: a{color:red} pretty-prints the rule; minify collapses it again. JS: function x(){return 1} becomes indented or one line. Minifying production bundles can break source maps you do not have here — use this for snippets, not for shipping a minified app.
HTML entities vs HTML format
HTML Encode / Decode at /tools/html-encode-decode turns < into < so text can sit in markup. That is not indentation. Markdown → HTML produces HTML from Markdown; format that output here if you need indent. JSON Formatter is for JSON, not JS object literals with unquoted keys.
Related
JSON Formatter, SQL Formatter, XML Formatter, Markdown Preview. CSS generators (gradient, shadow, border) emit CSS you can then format. Color Converter and Color Picker feed values into that CSS.
Privacy
Source stays in the browser. Related: /tools/css-formatter, /tools/js-formatter, /tools/html-encode-decode. Do not paste proprietary app source on a shared kiosk.