Code Formatter for JS, TS, CSS, HTML, Markdown, YAML

About the Code Formatter

The Code Formatter tidies source code with Prettier, the formatter most JavaScript projects already use, running entirely in your browser. It handles JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, Markdown and YAML. Paste your code into Code, press Format, and the result appears next to it with consistent indentation, spacing, quotes and line breaks.

Your code never leaves your device. Prettier runs in the page, so nothing is uploaded, logged or stored, and it is gone when you close the tab. That makes it fine for code you would rather not paste into a website that sends it to a server.

How to use it

Loaded only when you press Format

Prettier is large, so this page does not download it until you ask for it. When you press Format, the browser fetches the core and only the parts for your language: JavaScript and JSON use the babel and estree parts, TypeScript uses the TypeScript and estree parts, CSS, SCSS and Less use the postcss part, and HTML, Markdown and YAML each use their own. A different language later fetches its own parts the same way. Until then the page stays light and your first visit is fast.

Auto-detect is a guess

When Language is Auto-detect, the tool looks at the start of the text: markup that starts with an angle bracket is HTML, text that parses as JSON is JSON, # headings and bullet lists suggest Markdown, key: value lines suggest YAML, type annotations suggest TypeScript, and anything that looks like a rule set suggests CSS. Everything else is treated as JavaScript. These are cheap rules, so if the guess is wrong, choose the language yourself and the result updates when you press Format again.

Errors say where

If the code cannot be parsed, you see a message such as Line 1, column 7: Unexpected token and no output. The line and column come from Prettier's parser, and they point at the first thing it could not read. Prettier checks syntax only, not whether your code runs.

What formatting changes

Prettier changes layout and, for some options, punctuation: where lines break, how deep things are indented, whether strings use single or double quotes, and whether statements end in semicolons. It does not rename variables, reorder code or change what the program does. Options that mean nothing for a language are hidden, so Semicolons and Single quotes appear only for JavaScript and TypeScript.

Language notes

• JavaScript accepts modern syntax, including JSX, classes, async functions and modules.
• TypeScript accepts types, interfaces, enums and generics. If you paste TypeScript while JavaScript is selected, the parser reports an error, so switch the language.
• JSON is laid out the way Prettier lays out JSON, which keeps short arrays and objects on one line when they fit. For a strict check or exact big numbers, use the JSON Formatter instead.
• CSS, SCSS and Less get one declaration per line and consistent spacing around selectors and braces.
• HTML is formatted by Prettier's own HTML rules, which treat inline and block elements with care so the page looks the same.
• Markdown has its lists, emphasis and tables normalised, and code blocks inside it are left alone.
• YAML keeps comments and is re-indented with the width you choose; tabs are never used inside YAML, whatever the Indent setting says.

Formatting the same text twice gives the same result, so it is safe to run again after you edit.

Worked example

Input as JavaScript:

const a={b:1,c:[1,2]}

Output with the defaults:

const a = { b: 1, c: [1, 2] };

Large inputs work, but above 1 MB the page warns you that formatting may take a while, because Prettier runs on the main thread. For data only, the JSON Formatter is lighter and keeps big numbers exact, and for stylesheets the CSS Minifier can also beautify.

Frequently asked questions