Code Formatter
Format your JSON, HTML, CSS, JavaScript, or TypeScript code with syntax-highlighted output.
Formatted code will appear here.
What This Tool Does
Messy indentation, inconsistent spacing, and code crammed onto single lines all get in the way of actually reading a snippet. This tool takes JavaScript, TypeScript, HTML, CSS, or JSON and reformats it into a clean, consistently styled version, with syntax highlighting applied to the result so it's easier to scan at a glance.
How to Use It
Select a language from the dropdown, choose an Indentation style — 2 spaces, 4 spaces, or Tab — paste your code into the input box, and click Format Code. The formatted result appears below with syntax highlighting, along with a Copy button to grab it directly. If the code you pasted doesn't actually parse as valid code in the language you selected, you'll get a clear error message instead of a formatted result — this tool needs syntactically valid input to work, since it's genuinely parsing your code, not just adjusting whitespace around it.
The Formula
This is a real installation of Prettier — the same formatter widely used in JavaScript and TypeScript projects — running entirely inside your browser via its standalone build, so nothing you paste in is ever sent anywhere. JavaScript is parsed with Prettier's Babel parser, TypeScript with Prettier's dedicated TypeScript parser (so type annotations, interfaces, and generics are understood correctly rather than treated as syntax errors), HTML and CSS with their own dedicated parsers, and JSON is parsed with the same Babel parser configured for JSON specifically. The Indentation dropdown maps directly to Prettier's own tabWidth and useTabs options — 2 spaces and 4 spaces set tabWidth to 2 or 4 with useTabs off, and Tab switches useTabs on so the output uses literal tab characters instead of spaces. Every other formatting choice, like quote style, still uses Prettier's default and isn't currently configurable; you get Prettier's standard output in every other respect for whichever language you picked.
A Worked Example
Paste in cramped JSON like {"name":"Alice","age":30,"active":true}and select JSON, and Prettier expands it into properly indented, one-property-per-line output with consistent spacing around colons and commas — exactly the kind of readable structure that's tedious to add back in by hand once data has been minified or typed in a hurry. The same applies to a single dense line of CSS or an unindented block of HTML: select the matching language, and the formatter rebuilds the same underlying code with consistent line breaks and indentation applied throughout. For TypeScript, paste in interface Point<T>{x:T,y:T} and select TypeScript — Prettier recognizes the generic and the interface body and reformats it as properly spaced, multi-line code with each property on its own line, the same way it would for a JavaScript object. Switch Indentation to 4 spaces before formatting the same interface, and each property line gets four leading spaces instead of two; switch to Tab instead, and each property line is indented with one literal tab character.
FAQ
- Which languages are supported?
- JavaScript, TypeScript, HTML, CSS, and JSON, with syntax highlighting powered by Prism.js.
- Is my code sent to a server?
- No, all formatting happens directly in your browser. Your code never leaves your device.
- Can I configure indentation?
- Yes — use the Indentation dropdown to choose 2 spaces, 4 spaces, or Tab before formatting. Every other formatting choice, like quote style, still uses Prettier’s default.