HTML Formatter

Free Online HTML Formatter — Five Code Formatters in One

This page is a free, browser-based code formatting workstation. Five formatters are accessible from the left sidebar: HTML, CSS, JSON, XML, and JavaScript. Every formatter runs entirely in your browser — nothing is uploaded, nothing is stored, and there is no account to create. Choose your preferred indent size (2 spaces, 4 spaces, or tab) from the toolbar dropdown before you format.

Online HTML Formatter with Indent Size Control — Free

Most browser-based HTML formatters use a fixed two-space indent and give you no control over the output style. This formatter lets you choose between two spaces, four spaces, or a real tab character before you run the formatter — or switch at any time and the output re-runs automatically. This makes it easy to match the code style of your existing project.

How the HTML Formatter Works

The formatter splits your HTML into tokens — tags and text nodes — using a regular expression. It tracks nesting depth by counting block-level opening and closing tags. Block elements such as div, section, article, header, footer, nav, main, ul, ol, li, table, and all six heading levels each get their own line with depth-appropriate indentation. Inline elements such as span, a, strong, em, code, and img remain on the same line as their surrounding content. Void elements such as br, hr, input, and meta are not followed by an indent increment.

Formatting HTML Before Editing

CMS exports, email template builders, site generators, and build tools often produce single-line or minimally indented HTML. Before making manual edits to that output, run it through the formatter first. Indented code makes it far easier to locate the element you need, spot mismatched closing tags, and understand the document hierarchy. The formatter is also useful after copying HTML from a browser's DevTools source panel.

What the HTML Formatter Preserves

The formatter only adjusts whitespace between tags. Attribute values, inline styles, data attributes, class strings, href values, and text content are never modified. Content inside <script> and <style> blocks is left exactly as it was in the input.

Online CSS Formatter — Beautify Minified CSS Free

Minified CSS from a production build is impossible to read or debug. The CSS formatter takes compressed stylesheet output and restructures it with one declaration per line, a blank line between rule blocks, and consistent indentation inside nested at-rules. The output can be copied directly or downloaded as a .css file.

Handling @media and @keyframes

The CSS formatter tracks brace depth the same way the HTML formatter tracks tag depth. When a @media query, @supports block, or @keyframes animation opens a brace, the depth increases. All rule blocks and property declarations inside that at-rule are indented one additional level compared to top-level rules. This means deeply nested responsive or animation CSS is structured clearly with the outer at-rule visible and its inner blocks properly indented beneath it.

CSS Custom Properties and Variables

CSS custom properties — declared as --property-name: value — are treated as ordinary declarations and formatted on their own line like any other property. The formatter does not evaluate or expand var() references; it formats the code as written.

JSON Formatter and Validator — Free Online

JSON data returned by an API, embedded in a configuration file, or stored in a log is often sent as a single compact line with no whitespace. The JSON formatter takes that compact string, validates it using the browser's native JSON.parse, and then re-serialises it using JSON.stringify with your chosen indent size. The result is readable, copy-ready JSON with every key at its correct nesting depth.

Error Reporting for Invalid JSON

If the input is not valid JSON, the output pane shows the parse error message from the browser's JSON engine. Common errors — trailing commas, missing quotes around keys, single quotes instead of double quotes, JavaScript comments — are all caught and reported. The error output tells you exactly what was unexpected so you can fix the original source rather than guessing.

When to Use the JSON Formatter

• Inspecting API responses from a fetch call or Postman
• Debugging a package.json, tsconfig.json, or astro.config.* file
• Reading database export dumps that contain JSON columns
• Formatting webhook payloads before pasting them into documentation
• Checking that a JSON config file will parse before deploying

XML Formatter — Free Online for SVG, RSS, SOAP and Config Files

XML is used across an unusually wide range of formats: SVG graphics, RSS and Atom feeds, SOAP API envelopes, Maven POM files, Android manifests, Spring bean configurations, and many others. The XML formatter on this page handles all of them using a token-based approach that recognises opening tags, self-closing tags, closing tags, XML declarations (<?xml ... ?>), processing instructions, comments (<!-- ... -->), CDATA sections, and DOCTYPE declarations. Each type is placed at the correct indent level in the output.

Formatting SVG Files

SVG exported from design tools like Figma, Illustrator, or Inkscape is often written on a single line or with inconsistent indentation. Running SVG through the XML formatter makes it readable so you can locate and edit specific path elements, group attributes, or gradient definitions without wading through a wall of compact markup.

Formatting RSS and Atom Feeds

Feed validators and aggregators sometimes reject RSS that looks correct because of whitespace handling in certain parsers. Formatting your feed through this tool first gives you a clearly indented view of your channel, item, and link elements so you can spot structural problems before submitting the URL.

JavaScript Beautifier — Re-indent Minified JS Free Online

The JavaScript beautifier analyses brace depth line by line and re-indents the code with your chosen indent style. It handles function declarations, arrow functions, class bodies, object literals, if/else chains, for and while loops, try/catch blocks, and switch statements. It does not remove or add semicolons, and it does not reorder or rename anything — only indentation is changed.

Difference Between This and Prettier

Prettier is an opinionated AST-based formatter that rewrites code style completely — line length, quote style, trailing commas, and more. The JS Beautifier on this page is a lightweight brace-depth re-indenter that runs instantly in the browser without any dependencies. It is useful when you need to quickly make a minified script readable for debugging, not when you want to enforce a team code style. For production code formatting, use Prettier via your build toolchain.

TypeScript and JSX

The beautifier re-indents brace-based structure, so TypeScript files and JSX components that use standard function and class syntax are re-indented correctly. Type annotations, interface blocks, and JSX element content are treated as regular text at the current indent level. The beautifier does not parse or validate TypeScript type syntax.

How All Five Formatters Work Locally — No Upload Required

Every formatter on this page runs entirely in your browser. The HTML, CSS, XML, and JavaScript formatters are pure JavaScript functions. The JSON formatter uses the browser's built-in JSON.parse and JSON.stringify. The CodeMirror editor for syntax highlighting is loaded from a CDN the first time you visit. After that initial load the formatters work offline. None of your code is ever sent to a server, logged, or stored in any way.

This architecture means the tools respond instantly regardless of server load, work on any device, and are safe to use with sensitive code — internal configuration files, draft API responses, or proprietary templates — without any risk of that content leaving your machine.

Related HTML and Code Tools — Free Online

If you work with HTML or code files regularly, these tools on the site work well alongside the formatter:

• HTML Editor — full CodeMirror editor with live preview, HTML validator, entity encoder, HTML to Markdown converter, and snippet library
• HTML Viewer — live HTML preview, HTML minifier, strip tags, and Word to HTML converter in one page
• HTML Compressor — dedicated minifier with compression stats and download
• HTML to Text Converter — extract readable plain text from HTML source
• AI Table Generator — generate formatted HTML tables with AI
• AI HTML Generator — generate complete HTML pages with AI
• AI CSS Generator — generate CSS stylesheets with AI assistance