Code Formatter (Prettier)
Format JavaScript, TypeScript, CSS, SCSS, Less, HTML, JSON, GraphQL, Markdown and YAML with Prettier, entirely in your browser.
🔒 Runs entirely in your browser — nothing is uploadedWhat this code formatter does
This tool runs Prettier, the opinionated code formatter used by a large part of the JavaScript ecosystem, directly in your browser. Prettier does not simply re-indent lines: it parses your source into a syntax tree and prints it again from scratch according to a small set of rules. That is why the output is consistent no matter how messy the input was — long argument lists are wrapped, objects are broken across lines only when they exceed the print width, quotes and semicolons follow one convention, and trailing whitespace disappears.
You can format JavaScript, JSX, TypeScript and TSX, the three main stylesheet dialects (CSS, SCSS and Less), HTML with embedded styles and scripts, JSON, GraphQL schemas and queries, Markdown documents and YAML configuration files. Each language uses its own Prettier plugin, and only the plugin you need is loaded, so the page stays light until you actually format something.
Options explained
Print width is the line length Prettier tries to stay under; 80 is the default and 100 or 120 are common in teams with wide monitors. Tab width sets how many spaces one indentation level uses, and Indent with switches between spaces and real tab characters. Semicolons controls whether statements end with a semicolon in JavaScript and TypeScript; when it is off, Prettier only adds one where it is required to avoid ambiguity. Single quotes prefers ' over " for strings where it does not add escaping. These options map one-to-one to the settings in a .prettierrc file, so you can mirror your project configuration.
Private and practical
Everything happens locally: the formatter never uploads your code, stores it, or sends it to an API. That makes it safe for proprietary source, configuration files with internal hostnames, or snippets copied from a production incident. When the parser finds a syntax error, the message shows the line and column and the cursor jumps to that spot in the input, which makes this a quick way to find a missing bracket in a large JSON or YAML file. For day-to-day work, keep Prettier in your editor and CI; use this page when you are on a machine without your toolchain, reviewing a snippet from chat, or cleaning up code before pasting it into documentation.
How to use
- Pick the languageChoose the language of your snippet, or open a file to detect it from the extension.
- Set the optionsAdjust print width, tab width, tabs or spaces, semicolons and quote style.
- FormatClick Format code. Syntax errors are shown with their line and column.
- Copy or downloadCopy the formatted code back to your editor or download it as a file.