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.