01
Choose the parser first
Select JS, JSX, TS or TSX before pasting a mixed syntax snippet. TypeScript generics and JSX angle brackets need the appropriate parser.
- The example button loads a valid snippet for the current mode.
HTML / CSS Dev Tools
JavaScript formatter
Choose the syntax and style, then inspect the result beside the original.
JavaScript formatter
Source code
Your code stays in this browser tab; this tool does not upload it.
Formatted result
Paste code or load an example.
A JavaScript formatter helps when a pasted snippet has become hard to review or a TypeScript example uses a different house style. Keep the original on the left while the formatted result appears on the right.
This JavaScript formatter parses code before printing it, so template strings, JSX and type annotations are handled as syntax rather than by replacing spaces. It reports the first parse error instead of guessing a repair. A JavaScript beautifier is useful for quick review, but this Prettier online view still follows only the options shown here.
Why use this JavaScript formatter?
A parser and explicit modes make the output easier to trust.
One workspace for four syntaxes
Switch among JS, JSX, TS and TSX before formatting. A TSX component keeps its type annotations and JSX structure; it is never silently treated as executable JavaScript.
See exactly which style changed
Change indentation, quotes, semicolons, line width or trailing commas, then compare against the untouched input. The JavaScript formatter marks an old result stale until it has been recalculated.
Three details that prevent a wrong result
02
Tune the visible style
Auto formatting starts after a 350 ms pause and reruns when a style option changes. Turn it off to make formatting explicit.
- With auto formatting off, Ctrl/Cmd+Enter runs the formatter.
03
Read the result state
Copy and download unlock only when the result matches the current input and options. A parse error points to its first line and column.
- Check Syntax does not claim to run TypeScript type checking.
What the code engine actually handles
Four parser modes
Format ordinary JavaScript, JSX markup, TypeScript annotations and TSX components using the matching Prettier parser.
Style controls
Set two or four spaces, tabs, quote preference, semicolons, line width and trailing comma policy without altering the source panel.
Check and minify
Check syntax separately, or minify plain JavaScript with Terser. The minified output is downloadable as a .min.js file.
Parser and output boundaries
- Syntax is not type correctness
- A successful parse only shows that the selected grammar accepts the snippet. No project tsconfig, dependencies or ESLint rules are loaded.
- Minify accepts JavaScript only
- JSX, TS and TSX must be transpiled by your own build chain first; the minify action is disabled in those modes.
- Invalid code stays invalid
- An unmatched bracket or unfinished string produces a line and column error. The tool does not invent missing code or execute the snippet.
- No project configuration
- The browser formatter uses only options shown here. It does not read .prettierrc files, plugins or ignore rules from your repository.
JavaScript formatter questions
How do I format TypeScript or JSX with the JS formatter?
Choose TypeScript or TSX for typed code and JSX for JSX without types. The JavaScript formatter uses the selected parser; it never removes TS types or compiles JSX.
Which style options can I control in the JS formatter?
You can control indentation, tabs, single or double quotes, semicolons, line width and trailing commas. These apply to formatting, not to the separate JS minifier.
Can I minify TypeScript or JSX as-is?
No. Terser accepts plain JavaScript here. Transpile TS, TSX or JSX in your project first, then paste the resulting JS in JavaScript mode.
Why does Format fail with a parse error?
The selected parser found invalid or incomplete syntax. Check the shown line and column, and confirm that the syntax mode matches the snippet.
Is my code sent to your servers?
The snippet is processed in your browser tab. It is not uploaded by this tool or placed into the URL.
Not answered?
Format code with the JavaScript formatter
Return to the editor with your chosen syntax mode. The original remains separate from the result, so you can review every change before copying it.
Processed locally in your browser.