Privacy
Do you allow measurement and integrations that are enabled for this host profile?
Babel transform

Transform snippets and inspect the Babel pipeline

Paste JavaScript, JSX, TypeScript or TSX, choose a curated Babel preset and plugin set, then review output, changed lines and pipeline notes without uploading code or executing the transformed result.

  • Browser worker
  • No output execution
  • Diff + pipeline

Live Babel transform

Curated presets keep the public tool bounded while still showing real Babel output.

Ready to transform

Strip TypeScript annotations and lower optional chaining/nullish coalescing for an older browser target.

typescriptlegacymodulenone2 plugins

Source

Source characters
140 / 51200
Lines
9
Mode
typescript -> legacy

Output

Run a transform to inspect Babel output, changed lines and pipeline notes.

Use Babel when syntax shape matters

Babel is useful when the question is how syntax is lowered: optional chaining, nullish coalescing, JSX, classes and TypeScript annotations can change before a bundler or runtime ever sees the file. This playground keeps that question focused on one pasted snippet.

The transform runs in a disposable browser worker. The page does not send source code to a backend, does not load plugins from user input and does not run transformed output.

How to read the result

Presets are pipeline decisions

preset-env lowers syntax for a target, preset-react handles JSX and preset-typescript strips type annotations. The pipeline panel lists which families were active.

TypeScript here is syntax transform

Babel does not typecheck. It removes TypeScript syntax so you can inspect emitted JavaScript, while type safety still belongs in TypeScript or your CI build.

Output is never executed

The playground renders transformed code as text. It does not evaluate alert, fetch, loops, imports or plugin code, which keeps the public route bounded and privacy-first.

Compare Babel with esbuild transform for speed and bundler-style options, or inspect parser-level structure in the TypeScript and linting tools.

esbuild TransformTypeScript AST Viewertypescript-eslint Parsertsconfig Validator

Babel Transform FAQ

Is this the same as the official Babel REPL?

No. This page is a focused Playground Forge tool with curated options, privacy-first worker execution, diff sampling and pipeline explanation for one snippet.

Does the page run transformed code?

No. Output is displayed as text only. The tool transforms syntax, but it does not execute the resulting JavaScript.

Can I add a custom Babel plugin?

No. Custom plugins execute JavaScript, so the public MVP only allows a curated plugin list.

Does TypeScript mode typecheck?

No. Babel strips and transforms TypeScript syntax, while typechecking remains a job for TypeScript, your editor or CI.