TSX Formatter & Minifier
Beautify TSX (React + TypeScript) with Prettier, or minify it. This tool beautifies and minifies TSX on one page — paste your code, pick a mode, and click. Everything runs on your device, nothing is sent to a server.
Everything runs in your browser. Your code is never sent to our servers.
Example
Example Input
const A=():JSX.Element=><div/>
Example Output
const A = (): JSX.Element => <div />;
How to Use
- 1Choose Format or Minify mode at the top.
- 2Paste your TSX code into the Input field.
- 3If needed, set the indent width in "More settings".
- 4Click the button (or press Ctrl+Enter) to process. The result appears in the Output field.
- 5Click Copy to copy the result.
About the TSX Formatter
The TSX Formatter beautifies TSX code — JSX with TypeScript — using Prettier, understanding both JSX markup and TS type annotations.
How it works: Format uses Prettier's TypeScript parser which handles JSX + types together, then reprints it consistently. Minify removes whitespace and comments.
TSX is the most common format for modern TypeScript-based React components. Formatting it keeps components tidy and typed with a uniform style.
FAQ
Can this TSX tool both format and minify?
Yes. One page with a toggle — Format mode prettifies (beautifies) with indentation, and Minify mode compacts it. No need for two separate pages.
Is my code sent to a server?
No. TSX is processed entirely in your browser using JavaScript/WebAssembly. Your code never leaves your device.