Code Formatter
Format and minify XML, HTML and CSS, and minify JavaScript, in your browser.
Related tools
- JSON ToolsFormat, minify, repair and validate JSON with exact error positions, browse it as a tree, and convert between JSON, CSV and YAML.
- Encoder / DecoderEncode and decode Base64, URLs and HTML entities, and convert number bases.
- Text UtilitiesCount words and characters, change case and turn titles into URL slugs.
About this tool
Code Formatter is four languages behind one switch. XML is handed to the browser's own XML parser and rebuilt with 2 or 4 space indentation, or minified, keeping comments (formatted output only) and CDATA sections; a document that does not parse returns the parser's own error message. CSS and HTML each have a Format mode and a Minify mode. The CSS formatter indents rules and nested at-rules and copies strings, comments and bracketed values through as written; the HTML formatter puts block elements on lines of their own and leaves the contents of pre, textarea, script and style byte for byte as they were. Both are checked against the input before the result is shown, and hand the input back untouched rather than print a copy that does not match it. HTML minifying exposes three rules - remove comments, keep conditional comments, collapse boolean attributes - each with the thing it can break. JavaScript is minify only: it strips comments and indentation but keeps line breaks, and renames nothing. Nothing here merges rules, removes unused code or renames identifiers, and the XML mode checks only that the document is well formed - it is not validated against a DTD or an XSD schema.
All four languages run in the page you have open. XML is parsed by the browser's built-in DOMParser; the CSS and HTML formatters and the three minifiers are plain functions in the page bundle. Your code is never sent to the XGM API, never written into the URL and never stored in this browser. The address bar keeps the language only, as ?lang=html, ?lang=css or ?lang=js - XML is the default and carries no parameter - so a link you share opens the right mode with an empty input. Copy, download and the JSON export are built from the result already on screen. The one request the page makes on its own is the page-view event sent after you accept analytics, which carries the page path and the tool name, never your code.
How to use it
- Open the Code Formatter tool.
- Paste or type the input you want to inspect.
- Read the result, which is computed in your browser; the input is not sent to XGM.
- Copy the output only after checking it looks correct.
- Use related XGM tools if you need a broader diagnostic view.
FAQ
Why did the XML formatter collapse my empty elements into self-closing tags?
The output is written from the parsed document tree, not from your original text, and an element with no child nodes is written in the empty-element form. XML 1.0 defines an open tag followed immediately by its close tag and the self-closing form as the same element, so nothing about the document changed. A consumer that reads XML with a real parser will not notice; one that matches on raw text might.
Why is the spacing inside my elements different after formatting?
Text nodes are trimmed and whitespace-only text between elements is dropped, so indentation can be added or removed around your content. That is safe for data documents but not for mixed content, where the space between a word and an inline element is part of the text. If whitespace is significant in your document, minify it or leave it as it is; CDATA sections are copied through unchanged either way.
What does the JavaScript minifier guarantee, and what does it not?
It removes comments and indentation but keeps every line break, so automatic semicolon insertion resolves exactly as it did in your source - a return on its own line still returns undefined. It does not rename variables, drop dead code, fold constants or change syntax level, so the saving is far smaller than a build tool gives you. Comments that start with /*! or contain @license or @preserve are kept on purpose.
Why did the CSS minifier keep the space in “a :hover” but remove it in “color : red”?
A space before a colon is a descendant combinator in a selector and pure noise in a declaration, so the minifier looks ahead to the next {, ; or } to decide which one it is reading. Strings, the spacing inside calc() and spaces around selector combinators are left alone; a final ; before } is dropped, and comments are removed unless they start with /*!.
Why is the script inside my HTML still unminified, and why did my text run together?
The HTML mode lifts out every pre, textarea, script and style block and puts it back untouched, so embedded CSS and JavaScript are not minified - run them through the CSS or JavaScript mode separately. What is left has its comments removed, conditional comments excepted, and the whitespace between tags collapsed, which also removes the rendered space between adjacent inline elements such as two links or two spans. The Saved figure compares raw UTF-8 bytes, not what a compressed response will actually cost.