TSX Minifier
FormattersCompile TSX with Sucrase (strips TS + transforms JSX), then minify with Terser. Produces production-ready JS from TypeScript React files. Browser-based.
About TSX Minifier
The TSX Minifier is a two-stage browser-based tool that processes TypeScript React (.tsx) files through both Sucrase transforms — `typescript` (strips type annotations) and `jsx` (converts JSX to `React.createElement` calls) — and then applies Terser with full compression and mangling for maximum size reduction. The entire pipeline runs in a Web Worker. Compression ratio and exact byte savings are shown after each run. A download button saves the minified output as a `.tsx` file. Your code never leaves the browser.
Features
- ✓Two Sucrase transforms applied in sequence: typescript (strip types) + jsx (convert JSX)
- ✓Strips all TypeScript type annotations, interfaces, generics, and decorators
- ✓Converts TSX JSX expressions to React.createElement calls
- ✓Terser compression: dead code elimination, constant folding, inline expansion
- ✓Terser mangling: renames all local identifiers to shortest possible names
- ✓Handles typed props, generic components, hooks with typed state, and React patterns
- ✓Runs fully in a Web Worker — pipeline never blocks the UI
- ✓Displays compression ratio and exact byte savings after minification
- ✓Download minified output as a .tsx file with one click
- ✓Language picker — instantly switch to JSX, TypeScript, CSS, or other minifiers
- ✓One-click clipboard copy of minified output
- ✓Mobile-responsive layout with a dedicated Minify button
- ✓100% client-side — your code never leaves the browser
Common Use Cases
- Producing minified JavaScript from TypeScript React components for CDN delivery
- Reducing TSX component file size for distribution as part of a micro-frontend library
- Quickly checking how much a TypeScript React component compresses
- Generating compact JavaScript from Next.js Server or Client components for embedding
- Minifying TSX utility components before bundling into a headless component library
Frequently Asked Questions
QWhat transforms does Sucrase apply to TSX?
Both the `typescript` transform (strips all type syntax) and the `jsx` transform (converts JSX to React.createElement) are applied sequentially, producing standard ES2020-compatible JavaScript.
QDoes the output require React to be in scope?
Yes — the JSX transform produces classic React.createElement calls, which require `React` to be available in the module scope.
QIs my code sent to a server?
No. Sucrase and Terser both run in a Web Worker inside your browser. Nothing is transmitted to any server.