Content is loading…
See how Babel transforms your JS/JSX/TS — pick presets, plugins, and target, side-by-side.
(compile output appears here)
Real @babel/standalone. Compiles as you type. Target controls preset-env browsers list; toggle React/TS presets and the 4 most-common proposal plugins individually.
Paste modern JavaScript / JSX / TypeScript and see exactly what Babel transforms it into. Toggle presets (env, react, typescript) and individual plugins (decorators, optional chaining, class properties, async-to-generator). Side-by-side input/output, multi-target presets (ES5 / ES2015 / ES2020 / modern), and copy-output button. Real @babel/standalone runs in your browser.
The Babel Transform Playground allows you to instantly transpile modern JavaScript, JSX, and TypeScript directly in your browser using real Babel standalone execution. You can toggle specific presets and individual plugins, adjust target environments, and inspect the resulting output side-by-side without installing any local development tooling.
Good to know: Not intended for managing large multi-file codebases or bundling production applications, which require a full local build pipeline.
Learn how to transpile modern JavaScript, JSX, and TypeScript into browser-compatible code using Babel presets and plugins.
Paste your code into the input
Enter your modern JavaScript, JSX, or TypeScript code into the left-hand input panel to begin the transformation process.
Select your desired Babel presets
Toggle presets like env, react, or typescript to define how the compiler should handle your specific syntax.
Configure individual plugins and targets
Enable specific plugins like decorators or class properties and set your target output to ES5, ES2015, or modern standards.
Review the transformed output code
Check the right-hand panel to see the real-time transpiled result generated by @babel/standalone running in your browser.
Copy the resulting code
Use the copy-output button to quickly grab the transformed code for use in your project or for debugging purposes.
Estimated time: PT1M
Share this tool
Real TypeScript compiler in the browser — see compiled JS, type errors, and AST live.
Explore the AST of JS/TS/JSON/CSS code with switchable parsers — click nodes to highlight source.
JSX → live React preview, with Tailwind preloaded. Babel + React 18, all client-side.
Beautify, minify, and validate JSON data instantly.
Encode and decode Base64 strings instantly.
Generate v4 UUIDs instantly, single or in bulk.
Explain any code in plain language — all languages supported.
Percent-encode or decode URL strings instantly.
Encode/decode HTML entities like < > &.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
