Formatters
Babel Formatter
Prettier's Babel parser — the most syntax-tolerant way to format modern and experimental JavaScript.
In short
Format code with prettier's Babel parser online: modern proposals, JSX, and experimental syntax handled. Exact error positions. Free, in-browser.
By NaveenKumar T · Updated
Learn: Pretty Print JSON in JavaScript: stringify and Beyond
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
Babel Formatter: input and output
A React cart-line component with its entire JSX tree on one line: a computed `className`, a quantity input with an inline handler, and a template-literal `aria-label`.
import React,{useState} from 'react'
export function CartLine({item,onRemove,currency='USD'}){
const [qty,setQty]=useState(item.qty??1)
const price=new Intl.NumberFormat('en-US',{style:'currency',currency}).format(item.price*qty)
return <li className={"cart-line"+(item.gift?" cart-line--gift":"")} data-sku={item.sku}><img src={item.image} alt="" width={48}/> <span>{item.name}</span> <input type="number" min={1} value={qty} onChange={e=>setQty(Number(e.target.value))}/><strong>{price}</strong><button onClick={()=>onRemove(item.sku)} aria-label={`Remove ${item.name}`}>×</button></li>
}import React, { useState } from "react";
export function CartLine({ item, onRemove, currency = "USD" }) {
const [qty, setQty] = useState(item.qty ?? 1);
const price = new Intl.NumberFormat("en-US", {
style: "currency",
currency,
}).format(item.price * qty);
return (
<li
className={"cart-line" + (item.gift ? " cart-line--gift" : "")}
data-sku={item.sku}
>
<img src={item.image} alt="" width={48} /> <span>{item.name}</span>{" "}
<input
type="number"
min={1}
value={qty}
onChange={(e) => setQty(Number(e.target.value))}
/>
<strong>{price}</strong>
<button
onClick={() => onRemove(item.sku)}
aria-label={`Remove ${item.name}`}
>
×
</button>
</li>
);
}
The returned tree is wrapped in parentheses, elements with several props split one prop per line with the closing bracket on its own line, and the space between `<span>` and `<input>` is preserved as an explicit `{" "}`.
Learn more
Formatting Babel, properly
The Babel parser is prettier's most progressive: stage-3 proposals, JSX, and bleeding-edge syntax land here before anywhere else. If your code uses features fresh enough to scare other parsers — or React components mixing JSX with modern operators — this is the formatter that accepts it.
Practically, this is the tab for React and proposal-heavy code: components that mix JSX with optional chaining and nullish coalescing, classes using fields and decorators, or a snippet lifted from a proposal README that your editor's parser hasn't caught up with yet. The output style is prettier's standard; the example below shows how a compact component unfolds.
Help
Frequently asked questions
Everything you need to know about the Babel Formatter.
01How do I format Babel code here?
Paste JavaScript or JSX that uses modern or experimental syntax (or load a file/URL) and press Format. Prettier's Babel parser accepts stage-3 proposals and JSX that other parsers reject, reprinting it in the same canonical style as the plain JavaScript formatter.
02When should I pick Babel over the plain JavaScript formatter?
Both pages hand prettier the `babel` parser, so they accept the same grammar: JSX, decorators, class fields, top-level `await` and the stage-3 proposals Babel's parser ships. The difference is focus. This page's example and notes are built around React components and proposal syntax — how JSX props wrap, when a returned element is parenthesized, how `{" "}` preserves inline whitespace — whereas the JavaScript Formatter's material centers on plain modules: quotes, semicolons, trailing commas, argument wrapping. Start here for anything containing JSX; error positions are reported the same way on both.
03How does prettier wrap JSX attributes and children?
An element whose opening tag fits within 80 columns stays on one line. Otherwise every attribute moves to its own indented line and the closing `>` or `/>` sits alone on the next line, since `bracketSameLine` is off. A multi-line JSX expression that is returned or assigned is wrapped in parentheses, string props get double quotes, and where a line break would swallow a meaningful space between inline children prettier inserts an explicit `{" "}` so the rendered output does not change.
Keep working