web/typescript
Online TypeScript Editor with Types and Live Preview
Write TypeScript against a real browser with full editor inference — types where they help you, stripped when the code runs, and no tsconfig to argue with before the first line.
type Item = { id: string; price: number }
export function total(items: readonly Item[]): number {
return items.reduce((n, i) => n + i.price, 0)
}
const bad = total([{ id: 'a' }])
// ~~~~~~~~~~~ price is missing01 platform
Two different things people mean by TypeScript online
Both are useful and they are not the same tool. Picking the wrong one costs an afternoon, so this is worth settling first.
-
TypeScript that builds an interface — that is here
Types over the DOM,
fetch, npm packages and a live preview. The editor gives you full inference and errors as you type, and what runs is the JavaScript your annotations strip down to. -
TypeScript that prints to a console — that is /compiler/typescript
A program that takes input and writes output, the shape exercises and interview questions use. That runs on a real engine on a server, and XCODX has a page for it.
-
Editing is checked; running is not
Type errors appear in the editor with full inference. They do not block the preview, because a
tscpass between every keystroke and every render is the thing that makes a local loop slow. -
That is the same trade a dev server makes
Vite, esbuild and Sucrase all strip types rather than verify them during development, and leave checking to CI. This is that model, with no configuration in front of it.
02 deep dive
Types that help while you write
The value of TypeScript in an editor is not the compiler — it is knowing what a thing is without going to look it up.
Inference reaches through your own code. A function that returns Item[] gives the caller a typed array, and the property you misspell three files later is underlined where you typed it.
@types packages install from npm. Bring in a library and its declarations come with it, so third-party APIs autocomplete rather than guess.
Strictness is a setting, not a ceremony. strictNullChecks and the rest are on by default in the editor; a project that wants them looser says so once.
Generics and utility types work fully. Partial, Pick, Record, conditional and mapped types — the editor resolves them, because it runs the real language service rather than a syntax highlighter.
- inference
- full, cross-file
- declarations
- @types from npm
- strict
- on by default
- service
- real, not a highlighter
type Result<T> =
| { ok: true; value: T }
| { ok: false; error: string }
export async function load<T>(url: string): Promise<Result<T>> {
const r = await fetch(url)
return r.ok ? { ok: true, value: await r.json() } : { ok: false, error: r.statusText }
}03 features
What ships with a TypeScript project
Everything below is on when the editor opens. There is no tsconfig.json to write before the first line and no build to configure.
-
.tsand.tsxon one pathRename a
.jsfile and keep going. JSX and TypeScript strip in the same single pass, so adding types to a component costs nothing. -
Errors as you type
The language service reports type errors inline with the same messages
tscwould give, so what you learn here transfers. -
npm with declarations
Install a package and its
@typesresolve alongside it, which is most of what makes a typed codebase pleasant. -
Decorators and modern syntax
Decorators,
satisfies,consttype parameters and the rest of the current language surface all parse. -
Live preview beside the code
Types are for editing; the preview is for seeing. Both are on screen at once rather than in separate tools.
-
Git and a real file tree
Types pay off across files, so the workspace holds a project rather than a buffer.
04 ecosystem
A typed file among other languages
This file can sit beside a React component and a Python script; XCODX picks the right handling per file rather than per project.
05 languages
Every language the editor types
Highlighting and IntelliSense cover 70+ languages. These are the ones XCODX also compiles or executes for you.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
06 questions
TypeScript on XCODX — common questions
The questions that decide whether this fits your work.
Does it type-check my code before running it?
The editor checks continuously and shows errors inline. The preview does not gate on them: annotations are stripped so the browser can execute the result. That is the same trade Vite and esbuild make during development, with a full tsc pass belonging in CI where it can take its time.
Then why write types at all here?
Because most of TypeScript's value is delivered while you type — completion, inference, catching a misspelled property three files away. The compile-time gate is the smaller half, and it is the half that belongs in a pipeline rather than in a keystroke loop.
Can I run a TypeScript program that reads input?
Not here — that needs a runtime with a console, which is /compiler/typescript. This editor is for TypeScript that ends up in a page.
Do @types packages work?
Yes. Install a library from the npm panel and its declarations resolve with it, so third-party APIs autocomplete properly rather than falling back to any.
Is strict mode on?
Yes, including strictNullChecks. It is the default most projects land on eventually, and starting there costs nothing while starting loose costs a migration.
Can I use decorators or the newest syntax?
Yes. Decorators, satisfies, const type parameters and the rest of the current surface all parse and strip correctly.
Does JSX work with TypeScript?
Yes — .tsx files compile on the same path as .ts, so a typed React or Solid component needs no extra configuration.
Is this a good place to learn TypeScript?
Yes, and inference is the reason. Hovering a value to see what the compiler worked out is how the type system stops feeling like bureaucracy, and that is instant here.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the TypeScript editor
Types inferring and a preview updating in seconds, with no tsconfig to write and nothing to install.