JS Bundler
Bundle JavaScript in the browser.
Output
What is JS Bundler?
JS Bundler runs esbuild in your browser to transpile TypeScript to JavaScript and minify it — a free online way to minify JS without installing anything. Paste your code, toggle minify, and copy or download the result as bundle.js; modern syntax and type annotations are compiled down to ES2017.
Key features
- Runs the esbuild engine in-browser via WebAssembly
- Transpiles TypeScript and modern syntax down to ES2017
- Minify toggle to shrink the output
- Copy the result or download it as bundle.js
- Reports syntax errors with clear messages
How to minify and transpile JavaScript / TypeScript
This runs esbuild — the same compiler used by real build pipelines — compiled to WebAssembly and executed in your browser tab. Paste TypeScript or modern JavaScript, and it strips the types and downlevels the syntax to something that runs in older environments, optionally minified. It's the quick answer to "I just need to minify this snippet" or "turn this TS into plain JS" without spinning up Node, installing packages, or configuring a bundler.
Steps
- Paste your code — JavaScript or TypeScript, one file's worth.
- Toggle Minify (on by default), then click Run. The first run downloads the esbuild WebAssembly binary once; every run after that is instant.
- Copy the output or download it as
bundle.js.
What "transpile" means here
Type annotations and modern syntax are compiled down to ES2017. So a TypeScript arrow function with a typed parameter comes out as a plain JS arrow function; optional chaining (?.) and nullish coalescing (??), which are newer than ES2017, get rewritten into equivalent older code. async/await is ES2017 and stays as-is. Minify, when on, drops whitespace and comments and renames local variables, typically cutting size by more than half on real code.
The one thing to understand about the name
Despite "Bundler," this tool uses esbuild's transform step, not its bundle step — it processes exactly what you paste as a single file. It does not follow import/require statements to pull in and merge other modules. Your import { x } from "./utils" line is left untouched in the output; there's no filesystem in the browser for it to resolve ./utils against. If you need true multi-file bundling with dependency resolution, that requires a local esbuild/Rollup/Vite setup. What this is genuinely great at is transpiling and minifying self-contained code.
It doesn't type-check
esbuild is a transpiler, not a type checker — it deletes TypeScript types without verifying them. Code that assigns a string to a number will transpile with zero complaints. The only errors you'll see are syntax errors (an unclosed brace, an illegal token), reported with a clear message pointing at the line. So a clean run here is not a guarantee your types are sound; it only means the code parses.
A couple of practical limits
- The loader is set to TypeScript, which is a superset of JavaScript, so plain JS and
.tsboth work. JSX/TSX is not enabled, so raw<div>tags in the source will error — convert components without JSX, or use a full toolchain. - Because it minifies one file at a time, it won't tree-shake across modules or deduplicate shared dependencies — there are none to see.
Privacy
esbuild runs as WebAssembly directly in your tab. The code you paste is never uploaded or transmitted, which matters when the snippet is proprietary or contains keys you're only reformatting.
Frequently asked questions
- Does it actually bundle my imports into one file?
- No — despite the name, it uses esbuild's transform step on a single file, so import and require statements are left in the output untouched rather than resolved and merged. There's no filesystem in the browser to pull ./utils from; true multi-file bundling needs a local esbuild, Rollup, or Vite setup.
- Does it check my TypeScript types?
- No. esbuild deletes type annotations without verifying them, so assigning a string to a number transpiles with zero complaints. The only errors reported are syntax errors like an unclosed brace, so a clean run means the code parses, not that your types are sound.
- What JavaScript version does the output target?
- ES2017. Newer syntax such as optional chaining (?.) and nullish coalescing (??) is rewritten into equivalent older code, while async/await — which is ES2017 — is kept as-is. That makes the output safe for reasonably old runtimes.
- Can I paste React or JSX code?
- No. The loader is set to TypeScript, not TSX, so raw JSX tags like <div> will throw a syntax error. Convert components to plain function calls without JSX, or use a full toolchain that enables the JSX loader.
- How much smaller does minify make the code?
- Minify strips whitespace and comments and renames local variables, which typically cuts real-world code by more than half. The toggle is on by default; turn it off if you want readable, transpiled output rather than a compact single line.
Privacy
esbuild runs compiled to WebAssembly directly in your browser tab; the code you paste is never uploaded or seen by anyone but you.
