Formats JavaScript and JSX exactly as Prettier does in your editor. Choose 2 or 4 spaces or tabs, a line width of 80, 100, 120 or 160 characters, single or double quotes, and semicolons on or off. A stray bracket shows up as an error with line and column instead of silently broken output.
How to use
- Pick the language (it is detected automatically when you paste or drop a file), then paste code or open a file.
- Beautify reformats with Prettier, or sql-formatter for SQL. Choose indent and line width; for JavaScript also quotes and semicolons, for SQL the dialect and keyword case.
- Minify strips comments and whitespace for HTML, CSS, JSON, XML, SQL and GraphQL. For JavaScript and TypeScript it only compacts whitespace and comments.
- Syntax errors show the exact line and column with a caret. Tap the error to jump there.
- Copy or download the result, or use it as the new input.
- Formatting runs in a background worker inside your browser, so big files don't freeze the page and your code is never uploaded.
- Language plugins load only when you first use that language.
- JSON with comments or trailing commas (JSONC) is accepted for beautifying; minifying requires strict JSON.
- YAML and Markdown can't be minified safely, so only Beautify is offered for them.
Why use a formatter
Consistent formatting makes code reviews about logic instead of spacing and keeps diffs small. Prettier is opinionated: it reprints the whole file from its syntax tree, so the result is the same no matter how the input was indented. You only choose a few options: indent width or tabs, line width (80 characters by default), and for JavaScript single or double quotes and whether to add semicolons.
Because the code is parsed first, a formatter is also a quick syntax check. A missing bracket or an unclosed tag stops formatting and shows a caret at the exact position, which is often faster than reading a stack trace.
Beautify or minify
Beautify adds line breaks and indentation for people. Minify removes comments and whitespace for machines: for HTML it collapses whitespace but keeps pre and textarea content intact, for CSS it strips comments except /*! license */ blocks, and for SQL, JSON, XML and GraphQL it produces a single compact line. For JavaScript and TypeScript, minify only compacts whitespace and comments; it does not rename variables like a bundler would. YAML and Markdown depend on whitespace, so only beautify is offered.
SQL formatting
SQL has no single standard style. Here keywords can be UPPERCASE or lowercase, and the dialect setting teaches the formatter the syntax of MySQL, PostgreSQL, SQL Server (T-SQL), Oracle PL/SQL, SQLite, BigQuery, Snowflake and others, such as backtick identifiers, :: casts or $1 parameters.
Frequently asked questions
Is my code uploaded to a server?
No. Formatting runs in a web worker inside your browser. The code never leaves your device, which matters for proprietary code and files with credentials.
Which languages are supported?
HTML, CSS, SCSS, LESS, JavaScript, JSX, TypeScript, TSX, JSON, SQL in 20 dialects, XML, YAML, GraphQL and Markdown. The language is detected when you paste or drop a file.
Does the output match Prettier in my project?
Yes, if you use the same options. The formatter is Prettier itself, so with the same indent, line width, quotes and semicolons the result matches what prettier --write produces.
Why does formatting fail with a syntax error?
The formatter parses the code before reprinting it, so invalid code cannot be formatted. The message shows the line and column; fix the error there and the code formats again.
Does minifying JavaScript here rename variables?
No. It only removes comments and unnecessary whitespace. For production bundles with name mangling and dead-code removal, use a build tool such as esbuild or Terser.
Can I format JSON with comments?
Yes for beautifying: JSON with comments and trailing commas (JSONC, as in tsconfig.json) is accepted. Minifying requires strict JSON.