What Is a Transpiler? Source to Source Translation
A transpiler is a source-to-source compiler: it converts code in one language or dialect into another language at roughly the same level, rather than down to machine code.
A transpiler (short for "transcompiler") is technically a compiler, but its output is human-readable source in another language rather than a binary. The classic examples are turning TypeScript into JavaScript, or modern JavaScript into an older version that more browsers understand. The destination code still needs to be run or compiled by something else.
How a transpiler differs from a compiler
A traditional compiler lowers code toward the machine: high-level source becomes assembly or bytecode. A transpiler stays at a similar level of abstraction, mapping one high-level language onto another. Both parse and analyze code; only the target differs.
Common transpilation jobs
- TypeScript to JavaScript, stripping types and emitting plain JS.
- Modern JavaScript to an older standard for broader browser support.
- Sass or Less to CSS.
- One framework dialect to another, such as JSX to plain function calls.
Why teams transpile
Transpiling lets you write in a nicer, safer, or newer language while still shipping something the runtime accepts. You get modern syntax and type checking today without waiting for every browser or runtime to catch up.
Transpiling and source maps
Because the code that runs is not the code you wrote, transpilers emit source maps so debuggers can point back to your original source. Without them, a stack trace would reference generated output that is hard to read.
A quick example
Running tsc app.ts transpiles TypeScript into JavaScript, removing type annotations and producing app.js. The browser never sees TypeScript; it only runs the emitted JS.
Transpilers in CI
Frontend pipelines almost always include a transpile step, often bundled with minification and packaging. It is CPU-bound and scales with project size, so it slows down on small runners. Larger runners (Latchkey) cut this time, and transient toolchain or cache fetch failures can be retried automatically.
Key takeaways
- A transpiler is a compiler whose output is source code in another language, not machine code.
- Typical jobs are TypeScript to JavaScript, modern JS to legacy JS, and Sass to CSS.
- Source maps let you debug original code even though transpiled output is what runs.