React JSX Formatter

A JSX formatter for React components

This JSX formatter runs Prettier with the Babel parser, the combination most React projects use. JSX has formatting rules of its own: when an element does not fit on one line, each attribute goes on its own line, the closing > gets a line to itself, and multi-line JSX returned from a function is wrapped in parentheses. Getting these details right by hand is tedious; Prettier applies them consistently.

Example component

function Card({title,children,onClose}){const [open,setOpen]=useState(true);if(!open)return null;return <div className="card"><h2>{title}</h2>{children}<button onClick={()=>{setOpen(false);onClose?.()}}>Close</button></div>}

function Card({ title, children, onClose }) {
  const [open, setOpen] = useState(true);
  if (!open) return null;
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
      <button
        onClick={() => {
          setOpen(false);
          onClose?.();
        }}
      >
        Close
      </button>
    </div>
  );
}

JSX formatting rules applied

• Parentheses around multi-line JSX. Avoids the classic bug where a return followed by a newline returns undefined.
• Attributes one per line once the element exceeds the line width; the closing bracket goes on its own line (Prettier's bracketSameLine: false default).
• Double quotes in JSX attributes. The Single quotes option affects JavaScript strings only; JSX attributes keep double quotes, following HTML convention (Prettier's jsxSingleQuote stays off).
• Meaningful whitespace is preserved. Where a space between inline elements matters, Prettier writes it as {' '} rather than losing it.
• Conditional rendering such as {items.length > 0 && <List />} and ternaries are broken over lines with the JSX in parentheses.

Hooks and effects

Hook calls are ordinary JavaScript, so they follow the same rules as any function call, with one helpful special case: when the last argument is an array and the first is a function, Prettier keeps the dependency array on the closing line.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, [tick]);

This layout keeps the dependencies visible at a glance, which matters because the react-hooks/exhaustive-deps lint rule reports missing entries there. To keep a hand-aligned block of JSX, put {/* prettier-ignore */} on the line before the element.

Options

Indent defaults to 2 spaces, the norm in the React ecosystem and the setting used by Create React App, Next.js and Vite templates. Line width (80 by default) decides when props wrap; many teams raise it to 100 or 120 for component-heavy code, because deeply nested JSX reaches 80 columns quickly. Semicolons and Single quotes map to the Prettier options of the same name.

Common JSX errors

• "Adjacent JSX elements must be wrapped in an enclosing tag." Return a single root element or a fragment <>...</>.
• "Expected corresponding JSX closing tag" – a tag is not closed, or a void element like <img> is missing its />. JSX requires every element to be closed.
• Comments inside JSX must be written as {/* comment */}; an HTML-style <!-- --> comment is a syntax error in JSX.
• class instead of className is valid syntax, so the formatter accepts it; React warns at runtime.
• Components written in TypeScript (.tsx) should go through the TypeScript Formatter.

Related tools

Converting a static HTML template into a component? Start with HTML to JSX, which renames attributes like class and for, then format the result here. For prop validation in plain JavaScript, JSON to PropTypes generates PropTypes shapes from sample data. Formatting runs in your browser; your component code is not uploaded.