Chris Collins

Tools · dev

TypeScript playground

The real TypeScript 6 compiler in your browser — errors with line, column and TS code as you type, hover types, the emitted JavaScript and .d.ts, every strictness flag, a tsconfig.json explained option by option, advanced-type examples, and Run in a sandboxed page or a worker.

Added

How to use it

This is the TypeScript compiler itself — typescript@6.0.3, the last version written in TypeScript, loaded from jsDelivr — driven through its language service, the same API your editor uses. So the errors, their codes, the hover text and the output are exactly what tsc and VS Code give you for the same code and options. TypeScript 7 (the Go port, tsgo) checks the same language; its compiler is a native binary, so a browser can’t run it.

For a quick run of JavaScript, Python, Go, Rust and others, use the language sandbox. To get TypeScript types (or Zod schemas) from a JSON response, use JSON → types.

How to use it

Edit on the left. Problems are checked as you type and underlined in the editor (red for errors, yellow for warnings); the line numbers of lines with errors are red. The Problems list gives each one’s line:column, its TS code and the full message — click one to jump to it. Hover a name to see its type and documentation, as in VS Code; the bar under the editor shows the same for the name at the cursor, which also works on a phone.

Examples… loads one of fifteen small programs, mostly about the type system: conditional types and distribution, mapped types with key remapping, template literal types (parsing route parameters out of a string), infer, satisfies against an annotation, variance (in/out, and why methods are still bivariant under strictFunctionTypes), exhaustive switch with never, branded types, const type parameters and NoInfer, recursive types (DeepPartial, dotted Paths<T>), exactOptionalPropertyTypes, noUncheckedIndexedAccess, JSX with your own h(), and standard decorators. Several contain a deliberate error, with a comment saying why.

On the right:

  • JavaScript — what tsc writes for the current options (change target to es2015 and watch classes, ?? and ?. get down-levelled).

  • .d.ts — the declaration file tsc --declaration would write.

  • Console — the output of Run (Cmd/Ctrl+Enter). Page runs the JavaScript in a sandboxed frame with its own document, so DOM code works and draws there; Worker runs it in a Web Worker, where Stop ends even an endless loop. console.log of objects, Maps, Sets, errors and typed arrays is shown readably. Code still runs when there are type errors, as tsc still emits. Imports of npm packages can’t be resolved: there is one file and no node_modules.

  • Options — target, module, moduleResolution, jsx, DOM types, and every strictness and extra-check flag (strict and the flags it implies, exactOptionalPropertyTypes, noUncheckedIndexedAccess, noImplicitOverride, noPropertyAccessFromIndexSignature…). Hover a name for what it does. The panel also shows the options as a tsconfig.json to copy.

  • Explain tsconfig — paste a tsconfig.json (comments and trailing commas are fine) and every option is explained: the compiler’s own description, a note on what it means in practice, which flags strict switched on, options that don’t exist, and the compiler’s errors for the combination — TypeScript 6 deprecations such as baseUrl, moduleResolution: node and target: es5 show up here. Use in playground applies it (options that only make sense for a project on disk, like paths and outDir, are skipped).

Share link puts the code and any options you changed into the URL. Your code and options are also remembered in this browser.

Browser support

Any current browser. The editor is a plain text area with the highlighting drawn underneath, so it behaves like one: undo, IME input and screen readers work as usual, but there is no autocomplete.

Privacy

The page downloads the compiler (typescript.js, about 1.5 MB compressed) and the standard library declaration files it needs (about 0.3 MB compressed for the default options; more appear if you change target or lib) from cdn.jsdelivr.net. That is the only network traffic: your code is compiled and run in your browser and is never sent anywhere. A share link carries the code in the URL itself.

Runs entirely in your browser — network requests go only to the services named on this page.