Privacy
Do you allow measurement and integrations that are enabled for this host profile?
esbuild-wasm

esbuild Transform Playground

Transform one TS, TSX, JSX or JS snippet with esbuild in a browser worker. Tune loader, target, format, platform, minify and sourcemap without uploading code.

  • Dedicated worker
  • Same-origin WASM
  • Single file transform

Transform a single file

Choose a preset, adjust transform options and run esbuild-wasm inside a fresh worker for the current snippet.

Ready to transform

Type annotations, literal unions and export syntax transformed to readable browser ESM.

tses2018esmbrowserreadableno map

Source

Source chars
142 / 51200
Lines
8
Mode
ts -> esm

Output

Run a transform to see output code, metrics and diagnostics.

Fast transform feedback without a remote sandbox

Use the playground to compare how esbuild lowers TypeScript, JSX, module formats and targets before you touch a project build. It is designed for short snippets, review comments and configuration discussions.

Source stays in the browser. The tool loads esbuild.wasm from this site, blocks remote import/fetch/require URL patterns and does not run plugins, npm resolution or build scripts.

What this playground is honest about

Transform, not build

The page calls esbuild.transform for one source string. It is useful for loader, target, format and JSX decisions, not for package resolution.

No npm resolver

Remote imports, require(http...) and fetch(http...) are blocked before esbuild runs so the UI cannot imply bundling or network execution.

Worker/WASM boundary

The esbuild runtime is loaded inside a dedicated worker with a same-origin WASM asset and size and timeout limits.

Pair transform output with formatter, parser and AST views when you need to explain a frontend tooling decision.

Open Prettier ConfigOpen typescript-eslint ParserOpen TypeScript AST ViewerOpen JSON Schema Example Generator

FAQ

Does my code leave the browser?

No. The source is sent to a browser worker only. The page does not upload snippets to a backend.

Is this the same as esbuild build or bundle?

No. It uses transform for a single file. Bundling, plugins, file system access and npm resolution are intentionally out of scope.

Why are remote URLs blocked?

Remote imports and fetch calls suggest runtime networking or bundling. Blocking them keeps the public playground clear and predictable.

Why does the first run take longer?

The first run initializes the WebAssembly module. Later runs still use fresh workers, but browser caching usually keeps the WASM asset fast.