JSX Minifier
FormattersTranspile JSX to React.createElement calls with Sucrase then minify with Terser. Instantly reduces React component file size. Shows compression ratio. Browser-based.
About JSX Minifier
The JSX Minifier is a two-stage browser-based tool that transforms JSX syntax to standard `React.createElement` calls using Sucrase's JSX transform, then minifies the resulting JavaScript with Terser (`compress: true`, `mangle: true`). The entire pipeline runs in a Web Worker so even large React component files process without blocking the page. Compression ratio and exact byte savings are displayed after each run. A download button saves the minified `.jsx` output directly.
Features
- ✓Two-stage pipeline: Sucrase JSX transform → Terser compression and mangling
- ✓Sucrase jsx transform: converts all JSX to React.createElement calls
- ✓Terser compression: dead code elimination, constant folding, inline expansion
- ✓Terser mangling: renames local identifiers to shortest possible names
- ✓Handles function components, class components, fragments, and JSX spread props
- ✓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 .jsx file with one click
- ✓Language picker — instantly switch to TSX, JavaScript, 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
- Reducing the size of React component files for CDN delivery without a build tool
- Minifying JSX utility components for inline embedding in larger applications
- Quickly checking JSX component compression ratio before choosing a bundler
- Producing compact JavaScript from JSX source for demo or prototype pages
- Reducing JavaScript payload for CDN-served React micro-frontend fragments
Frequently Asked Questions
QWhat does the JSX transform do?
Sucrase's JSX transform converts JSX elements (e.g. `<div className="x">`) to `React.createElement('div', {className: 'x'})` calls. This is the standard approach used by Babel and Vite to make JSX valid JavaScript.
QDoes this support the React 17 automatic JSX runtime?
The Sucrase JSX transform used here produces classic `React.createElement` calls (React 16 style), not the automatic `_jsx` import. The output requires `React` to be in 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.