Using Bun’s Built‑in TypeScript/JSX Transpiler as a Zero‑Config Dev Tool

The problem: juggling multiple tools for simple JSX

When you start a React project with TypeScript, you usually need three separate pieces: the TypeScript compiler (tsc) to strip types, a Babel preset to turn JSX into plain JavaScript, and a bundler such as Webpack or Vite to produce browser‑ready bundles. Each adds its own config file, install step, and can slow down the feedback loop during development.

Thesis: Bun’s native transpiler replaces that stack

Bun ships with a JavaScriptCore‑based transpiler that understands .ts, .tsx, .js, and .jsx files out of the box. It emits ES‑module code that Node or the browser can execute directly, so you can run a dev server with a single bun run command and get sub‑second hot‑reload without installing tsc, @babel/preset-react, or a bundler.

How it works

When Bun encounters a file, it:

1. Parses the source using its own fast parser.
2. Strips TypeScript types (no type checking is performed).
3. Transforms JSX according to the configured factory (default is React.createElement).
4. Emits ES‑module JavaScript that respects the target you set (ES2022 by default).

Because the transpiler runs inside Bun’s runtime, there is no separate process to spawn, which keeps start‑up time low.

Worked example: a minimal React component

You can try this on any machine with Bun installed (≥0.9.0). The steps illustrate the zero‑config flow; they are not claimed to have been tested by the author.

# 1. Create a fresh project
mkdir bun-demo && cd bun-demo
bun init -y

# 2. Add a simple React component
cat > src/App.tsx <<'EOF'
import React from 'react'
export function App() {
  return Hello from Bun!
}
EOF

# 3. Add an entry point that renders the component
cat > src/index.ts <<<'EOF'
import React from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './App'

const root = createRoot(document.getElementById('root')!)
root.render()
EOF

# 4. Create a tiny HTML file
cat > index.html <<<'EOF'


Bun Demo



EOF

# 5. Add a dev script to package.json (bun init already created one)
# Edit the scripts section to include a watch command
bun add -d react react-dom
# Then modify package.json:
#   "dev": "bun run --watch src/index.ts"

# 6. Start the dev server
bun run dev

After step 6, editing src/App.tsx and saving the file triggers a rebuild that typically finishes in under 300 ms, and the browser updates instantly. No tsc or Babel output appears in the filesystem because Bun keeps the transpiled modules in memory.

Trade‑off and limitation

Bun’s transpiler aims to cover the majority of TypeScript syntax, but it does not perform advanced type‑only transforms such as custom enum emit or namespace merging that rely on tsc’s emit‑time logic. It also lags slightly behind the very latest TC39 proposals compared to a fully‑featured Babel setup with experimental presets. For most application code, however, the output size and runtime behavior are comparable to a traditional Webpack‑Babel pipeline.

Actionable closing

If you are evaluating Bun for a new component library or an internal tool, start by measuring the cold start time of bun run dev versus your current setup. Keep a type‑checking step in your CI (e.g., bun test or tsc --noEmit) to catch type errors that the transpiler skips. If the developer experience feels smoother and bundle sizes stay within expectations, consider a gradual migration of larger projects, using Bun’s config file (bunfig.toml) to adjust JSX factory or enable minification only when needed.

Practical verification

• Check that you are on a recent Bun version: bun --version (look for ≥0.9.0).
• Run the example above and observe that no dist/ or lib/ folder is generated.
• Compare the gzipped size of a production build: bun build --minify src/index.ts versus a comparable Webpack‑Babel build using webpack --mode production. The sizes should be within a few percent for a simple React app.