Code Formatter

What it does

The code formatter takes cramped, minified or inconsistently indented code and prints it back in a clean, consistent style. It supports the languages you meet most in web work: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML and GraphQL.

Under the hood it runs Prettier, the formatter used by millions of projects, so the result looks exactly like code formatted in VS Code or by a pre-commit hook. Each language’s parser loads only when you pick it, which keeps the page fast.

How to use

1. Choose the Language of your code.
2. Paste the code, or open a file.
3. Pick an Indent style (2 spaces, 4 spaces or tabs) and a Line width. Lines longer than the width are wrapped where the language allows.
4. For JavaScript and TypeScript, choose whether statements end with semicolons. For scripts and stylesheets, choose single quotes if your project prefers them.
5. Copy the result or download it.

Example

The sample is a one-line HTML page with inline CSS and JavaScript. After formatting, each element sits on its own line, the CSS rules are expanded with one declaration per line, and the arrow function in the script gets parentheses and a semicolon:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Tips

• Formatting is also a quick syntax check. If Prettier cannot parse the input, the error message shows the line and column so you can jump straight to the mistake.
• XML is formatted with whitespace treated as insignificant so that nested tags are indented. If your document relies on exact whitespace inside elements, check the result before using it.
• Need the opposite? Use the JavaScript and CSS minifier to shrink code for production, or the JSON formatter for JSON validation and minification.