What is the JS formatter and what can it do?

It is a browser-based tool that beautifies or minifies JavaScript, TypeScript and JSX/TSX. Beautifying runs Prettier with full style options and minifying runs Terser to compress code for production.

How do I format TypeScript or JSX with the JS formatter?

Choose the parser: JS / JSX, TS / TSX or Auto. Auto tries the TypeScript parser first and falls back to Babel, so plain JavaScript, JSX and TypeScript all format correctly.

Does the JS formatter use Prettier and Terser?

Yes. Beautifying uses Prettier and minifying uses Terser, so the output matches the same tools you would use in a real build pipeline.

Which style options can I control in the JS formatter?

You can toggle single versus double quotes and semicolons, switch between tabs and spaces, set tab width to 2 or 4, pick a print width of 80, 100 or 120, and choose trailing commas of none, es5 or all.

Does the JS formatter send my code anywhere?

No. Prettier and Terser both run entirely in your browser, so your code never leaves your device and nothing is uploaded to a server.

JS / TS Formatter

Beautify or minify JavaScript, TypeScript and JSX/TSX with Prettier options.

Your code is formatted locally in your browser with Prettier and Terser, and nothing is uploaded to a server.

Need to format styles too? Try the CSS Formatter.

About JS / TS Formatter

This js formatter beautifies or minifies JavaScript, TypeScript and JSX/TSX directly in your browser. As a JavaScript beautifier it runs Prettier with a full options panel, while minifying uses Terser to shrink code for production. Pick the Auto parser to detect the syntax automatically, or force JS/JSX or TS/TSX when you need a specific TypeScript formatter. Tune semicolons, quote style, tab width, print width and trailing commas to match your project's style. It is built for developers cleaning up messy snippets, QA engineers inspecting bundled output, and anyone who wants a quick prettier online alternative. Everything is processed locally in your browser, so your source code never leaves your device and nothing is uploaded to a server.

Features

Beautify JavaScript, TypeScript and JSX/TSX with Prettier
Minify with Terser to shrink code for production
Auto parser detection, plus explicit JS/JSX and TS/TSX modes
Toggle semicolons, single or double quotes, and tabs vs spaces
Configurable tab width (2 or 4) and print width (80, 100, 120)
Choose trailing commas: none, es5 or all
Instant formatting as you adjust any option
Runs entirely in your browser

How to use the JS / TS Formatter

Paste your JavaScript or TypeScript into the input box.
Choose Beautify to pretty-print or Minify to compress.
Pick the parser: Auto, JS / JSX or TS / TSX.
Adjust options like tab width, quotes, semicolons and trailing commas.
Copy the formatted output from the result panel.

Example

Input

const  greet=(name)=>{return 'hi '+name}

Output

const greet = (name) => {
  return 'hi ' + name;
};

Beautified with default Prettier options (2-space indent, semicolons).

Common errors & troubleshooting

Output is empty or shows a parse error after pasting. — Make sure the snippet is valid JavaScript or TypeScript. Switch the parser to TS / TSX for type annotations, or JS / JSX for React syntax.
Auto mode mis-parses TypeScript-specific syntax. — Auto tries the TypeScript parser first and falls back to Babel; force TS / TSX explicitly if your file uses advanced type features.
Minified output looks unreadable. — That is expected. Terser strips whitespace and shortens code for production. Use Beautify if you want a readable result.
Quotes or semicolons are not what you wanted. — Toggle the Single quotes and Semicolons options before copying. Prettier reformats instantly when you change them.

Frequently asked questions

What is the JS formatter and what can it do?: It is a browser-based tool that beautifies or minifies JavaScript, TypeScript and JSX/TSX. Beautifying runs Prettier with full style options and minifying runs Terser to compress code for production.
How do I format TypeScript or JSX with the JS formatter?: Choose the parser: JS / JSX, TS / TSX or Auto. Auto tries the TypeScript parser first and falls back to Babel, so plain JavaScript, JSX and TypeScript all format correctly.
Does the JS formatter use Prettier and Terser?: Yes. Beautifying uses Prettier and minifying uses Terser, so the output matches the same tools you would use in a real build pipeline.
Which style options can I control in the JS formatter?: You can toggle single versus double quotes and semicolons, switch between tabs and spaces, set tab width to 2 or 4, pick a print width of 80, 100 or 120, and choose trailing commas of none, es5 or all.
Does the JS formatter send my code anywhere?: No. Prettier and Terser both run entirely in your browser, so your code never leaves your device and nothing is uploaded to a server.

Related tools

CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.
JSON Formatter — Beautify, minify and validate JSON with error locations.
JSON to TypeScript — Generate TypeScript interfaces from a JSON sample.
SQL Formatter — Format SQL for MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle.
GraphQL Formatter — Format or minify GraphQL queries and schemas, validate syntax and extract operations.
XML Formatter — Beautify, minify and validate XML, and convert XML ↔ JSON.
cURL to Fetch — Convert a curl command to a JavaScript fetch() call.