Write TypeScript with real-time transpilation to JavaScript, type checking, and error highlighting.
Write TypeScript in the left pane and the emitted JavaScript appears on the right as you type, with type errors and warnings listed alongside. All parsing, type checking, and emission happen in the browser tab, so there is no project setup and no tsc install. The surprise most users hit: a type error does not stop emission. The compiler strips type annotations and emits JavaScript anyway, so red squiggles and output can coexist - the diagnostics and the emitted code are separate results. Related surprise: interfaces and type aliases vanish entirely, while enums and namespaces become real runtime objects.
A concrete input and expected output from the current implementation.
Input
interface Point {
x: number;
y: number;
}
function distance(a: Point, b: Point): number {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
const p1: Point = { x: 0, y: 0 };
const p2: Point = { x: 3, y: 4 };
console.log(distance(p1, p2)); Expected output
function distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
const p1 = { x: 0, y: 0 };
const p2 = { x: 3, y: 4 };
console.log(distance(p1, p2)); The interface and every type annotation disappear because types exist only at compile time; only runtime constructs survive. With a target of ES2015 or later the emitted code keeps its shape (an ES5 target would turn const into var). Running the snippet would print 5, since sqrt(9 + 16) is sqrt(25).
The compiler separates type-only constructs - interfaces, type aliases, parameter and return annotations, as casts, generic parameters - from runtime constructs and emits only the latter. Emitted JavaScript follows the configured target and module options: const survives an ES2015 target but becomes var under ES5, and async/await or classes are likewise preserved or downleveled. No type information reaches the output.
Type checking runs over the source independently of emission and reports errors and warnings per line. Finding an error does not suppress output: the compiler emits JavaScript even for code with type errors unless noEmitOnError is enabled. Strictness options such as strict and noImplicitAny change which diagnostics appear, so the same source can pass clean under one configuration and fail under another.
Only if the tool's compiler options mirror your tsconfig. Target, module, and strictness flags all change which diagnostics appear, and the tool compiles a standalone snippet: types imported from your project are unavailable, so errors involving them will not show here even if your real build fails. Mirror the relevant options for a fair comparison.
No. Parsing, type checking, and emission all run in the browser tab, and the code never leaves your machine - closing the tab discards it. There is no upload step, no account, and nothing is cached on a server. If you need to share code, you copy the text yourself.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.