Universal File Formatter

This page runs Prettier 3 inside your browser. Prettier is the formatter most JavaScript projects standardise on, and the standalone build used here is the same engine that the command line tool ships. Six languages are available from the dropdown above the output pane: JSON, JavaScript, HTML, CSS, Markdown and YAML. The formatter uses a print width of 80 columns and 2-space indentation, which are also Prettier's own defaults, so the output matches what a fresh npx prettier run would produce for a project with no configuration file.

There is no automatic language detection. Pick the language yourself, paste text or load a file, then press Format. A parse error replaces the output with Prettier's message, which includes the line and column where the parser gave up and a small code frame pointing at the token.

Opinionated formatting, explained

Prettier does not tidy your text in place. It parses the input into a syntax tree and prints that tree again from scratch, keeping only a handful of signals from the original layout, such as blank lines between statements and whether an object literal had a line break after its opening brace. Everything else (quote style, spacing, line breaks, trailing commas) is decided by the printer. That is why a team that adopts it stops arguing about style: there is almost nothing left to configure, and code review diffs show logic changes instead of whitespace churn.

The defaults you will see in the output: double quotes, semicolons in JavaScript, trailing commas wherever a list is broken across lines (Prettier 3 changed this default to all), lines wrapped at 80 columns, and LF line endings. Formatting is not linting. Prettier will not rename a variable, flag an unused import or fix a logic bug.

What changes in each format

• JSON. Single-quoted strings become double-quoted, trailing commas are removed, and keys keep their original order; nothing is sorted. Comments are kept, so JSON-with-comments files such as tsconfig.json format cleanly, but the result is then not strict JSON. Number literals are normalised (1.10 is printed as 1.1) without being evaluated, so a 20-digit integer keeps every digit. A short object that fits within 80 columns is collapsed onto one line unless the input had a newline right after the opening brace.
• JavaScript. Parsed with Babel, so modern syntax and JSX are fine. TypeScript is not offered on this page, and type annotations will produce a syntax error. Quotes, semicolons and trailing commas follow the defaults described above.
• HTML. Inline elements such as span and b stay on one line because whitespace between them is significant in CSS, while block elements each get their own line. This follows Prettier's default whitespace sensitivity setting.
• CSS. One declaration per line, hex colours and units lowercased (#FFAABB becomes #ffaabb, 0PX becomes0px), selectors left as written. Only the plain CSS parser is loaded; SCSS and Less syntax may be rejected.
• Markdown. Bullet markers are normalised to -, bold is printed as **bold** and emphasis as _em_, and pipe tables are aligned. Long paragraphs are not re-wrapped, because the default prose setting is to preserve line breaks.
• YAML. Comments survive, indentation is normalised to two spaces, single-quoted strings become double-quoted, document separators and flow collections such as [1, 2] are kept. Scalars are never reinterpreted: nostays no and 0755 stays exactly as typed, which is different from what a converter does. Use the YAML to JSON converter when you need the parsed values.

Silent changes to watch for

Prettier 2 and later default to LF line endings, so a file with Windows CRLF endings comes out with LF. Trailing whitespace is removed, indentation tabs are replaced by spaces, and the output always ends with exactly one newline. If your repository requires CRLF, run the CLI with --end-of-line crlf instead of using this page. Uploaded files are read as UTF-8; a file saved in another encoding will show garbled accented characters in the input pane, so convert it to UTF-8 first.

Reading an error

A message like Unexpected token (1:7) means line 1, column 7. In JSON the usual causes are a missing comma between properties, an unquoted key, or a stray character after the closing brace. In JavaScript it is most often an unbalanced bracket or a keyword typo. Prettier formats all or nothing, so the output stays empty until the input parses.

Using Prettier in your own project

npm install --save-dev prettier
npx prettier --write "src/**/*.{js,jsx,json,css,md,yml,yaml}"
npx prettier --check .                  # exit code 1 if anything is unformatted (use in CI)
npx prettier --parser json < data.txt   # format stdin as JSON

A minimal .prettierrc that matches this page is { "printWidth": 80, "tabWidth": 2, "endOfLine": "lf" }. Add a .prettierignore for build output, enable format-on-save in your editor, and wire prettier --check into CI or a pre-commit hook so unformatted files never reach the main branch.

Privacy

Files you load are read with the browser's FileReader API and formatted locally. Nothing is uploaded, and the Download button builds the file on your machine.

1. Pick the language from the dropdown above the output pane. JSON is selected by default and there is no auto-detection.
2. Paste text into the input, or press Load File to read a local .json, .js, .html, .css, .md, .yaml, .yml or .txt file.
3. Press Format. If the parser fails, the output pane shows the error with its line and column.
4. Copy the result, or press Download to save it as formatted.<extension> (for example formatted.json or formatted.js).

• Expanding a minified JSON config or API response into readable form before committing it as a fixture.
• Normalising a YAML file where different editors mixed 2-space and 4-space indentation, without losing comments.
• Tidying a README whose contributors used a mix of *, - and + list markers.
• Cleaning a CSS block copied out of browser developer tools, where colours and units come in mixed case.
• Reformatting a JavaScript snippet from a forum answer to your project style before pasting it into the codebase.
• Converting a CRLF file to LF and stripping trailing whitespace in one step.