JSX Minifier Online — Free React JSX Compressor

Strip comments, collapse whitespace, and shrink React JSX without changing rendered output. 100% client-side — never uploaded.

strip comments drop trailing ;

Input JSX

Minified Output

What is a JSX Minifier?

A JSX minifier shrinks React component source by removing whitespace and comments without changing the rendered output. It is the JSX-aware cousin of a JavaScript minifier — it knows that whitespace between adjacent tags (>…<) is safe to drop, but whitespace inside text content is preserved.

The OpenFormatter JSX minifier is a hand-rolled, browser-side tool. It tokenises strings, template literals, and comments first so removals never touch a string. Then it collapses runs of whitespace inside expression containers ({…}), strips line and block comments when requested, and optionally removes trailing semicolons. The output is byte-for-byte deterministic and your bundler will produce the same JavaScript before and after.

How to minify JSX online — 4 steps

Paste your JSX. Drop a React component or any JSX snippet into the Input panel above.
Choose options. Toggle strip-comments and drop-trailing-semicolons. Both default on for maximum savings.
Click Minify. The tool rewrites whitespace client-side and reports byte savings.
Copy the output. Use the Copy button to put the minified JSX on your clipboard.

Sample input & output

Before

// Card component
function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      {/* footer */}
      <Button label="OK" />
    </div>
  );
}

After

function Card(props){return(<div className="card"><h2>{props.title}</h2><Button label="OK"/></div>)}

Tag-Safe Stripping

Whitespace between adjacent tags is collapsed, but whitespace inside text content is preserved — the rendered output never changes.

Comment Removal

Strips // line comments, /* block */ comments, and JSX {/* */} comments. String contents that look like comments are protected.

Client-Side Only

Minification runs in JavaScript on your machine. Components with secrets, proprietary props, or unreleased features never leave the browser.

Common use cases

check_circleReact component cleanup — strip dev comments before pasting into a tutorial
check_circleCode review prep — produce a compact version for an inline diff comment
check_circleMigrating JSX to TSX — minify first, then reflow with the TSX formatter
check_circleCodebase consistency — produce a deterministic compact form for snippet libraries
check_circleEmail-template generators that emit React-rendered HTML strings
check_circleStatic site generators that inline JSX into MDX blog posts
check_circleBug repros — fit a component into a single tweet, gist, or code sandbox
check_circleSnippet sharing — shrink a React example for chat, Slack, or a chat-bot prompt

JSX vs HTML, JSX vs TSX

JSX vs HTML

JSX uses className, HTML uses class
JSX attributes are camelCase
JSX requires explicit /> on void tags
JSX braces { } embed JavaScript
JSX whitespace rules are stricter than HTML

JSX vs TSX

TSX adds type annotations
Generics <T> need angle-bracket disambiguation
satisfies, as, type assertions are TSX-only
Use .tsx for typed React
The minifier handles both extensions

More React + JS tools

Format, beautify, and convert React code without leaving the browser.

JSX Formatter TSX Formatter JSX to TSX

Frequently Asked Questions

What is JSX minification?

JSX minification removes unnecessary characters from React component source — comments, runs of whitespace between tags, blank lines, leading and trailing space inside expression containers — without changing the rendered output. It is the JSX equivalent of JavaScript minification, but it must be tag-aware so it does not collapse whitespace that would be visible to the user (text content between tags), and it must not alter strings or template literals.

When should I minify JSX manually?

In production builds you almost never minify JSX directly — you let your bundler (Webpack, Vite, esbuild, SWC) compile JSX to React.createElement calls and minify the resulting JavaScript. Manual JSX minification is useful for: shrinking inline JSX in markdown blog posts, fitting a component into a tight code-sample widget, generating compact JSX for an email template generator, or producing a one-line repro for a bug report.

Is whitespace between JSX tags ever significant?

Yes — whitespace inside text content rendered between two adjacent inline tags collapses to a single space and IS visible. The minifier preserves this: it only collapses whitespace that sits directly between a closing > and an opening <, never inside a text node. JSX-text whitespace rules are documented in the React docs and the babel-plugin-transform-react-jsx-source spec.

Does the minifier change runtime behaviour?

No. JSX outside string and template-literal contexts is whitespace-insensitive at the token level. The minifier removes whitespace and comments without touching identifiers, attribute values, or string literals — the AST your bundler parses is identical to the original. To verify, render before and after through the same Babel/SWC config; the emitted JavaScript should match.

What does the drop-trailing-semicolons option do?

Inside an expression container — for example {const x = compute(); x * 2;} (an IIFE-style expression) — the final semicolon before } is unnecessary in many JS engines and frameworks because automatic semicolon insertion handles it. Removing it shaves a few bytes per container. Disable the option if your codebase requires explicit terminators.

Will it remove JSX comments {/* … */}?

Yes when the strip-comments option is enabled. JSX comments are JS block comments inside an expression container, so the minifier sees them as both an expression container and a /* … */ block. Both are removed. // line comments inside expression containers are also removed. String contents that look like comments (e.g. const x = "// not a comment") are protected because strings are tokenised first.

Is my JSX uploaded to your servers?

No. Minification runs entirely in JavaScript inside your browser. Components containing API keys, proprietary algorithms, or unreleased features never leave the device. You can verify this in DevTools → Network — no requests are made when you click Minify.

How is this different from running a bundler?

A bundler does much more — it resolves imports, transforms JSX to React.createElement, applies Babel plugins, tree-shakes, and emits JavaScript that is then minified with terser or esbuild. This tool only does the JSX whitespace-and-comment pass. Use it for snippets, not for production builds.