Cosmovex Tools

Need to share TypeScript live? Edit it together and run it with a shared console

TypeScript with PairPad

The pad opens with main.ts: a typed shopping-cart reducer with a discriminated union of actions and one bug left in on purpose. Press Run and the types are stripped and the code executes, so the console prints the cart table and a failing check. Share turns it into a room where both of you edit the same file.

  1. Press Run (Ctrl/Cmd+Enter). Sucrase strips the type annotations and the code runs in a sandbox; the console shows the cart table, the total and one ✗ check.
  2. Read the Action union together: add, remove and setQty each carry their own fields, so the switch in reduce() narrows action to the right shape in every case.
  3. Fix the setQty TODO so a quantity of 0 removes the line, press Run again and look for ✓ mouse removed.
  4. Press Share and send the link. Your partner joins with a name and cursor colour and sees the same file and the same console output.
  5. Extend the union with a clear action and rename notes.md to keep a log of decisions. With Pro, download the room as a .zip at the end.
online typescript editor typescript online editor and compilertypescript playground online freeshare typescript code onlinecollaborative typescript editortypescript pair programming online
Open PairPad Free · Pro $29 one-time · no account

What to know

PairPad runs TypeScript the way many build tools do in development: it removes the types and runs the JavaScript that is left. That makes Run fast and means interfaces, type aliases, generics, unions, optional chaining, as const and access modifiers all work, but nothing is type-checked. A wrong type does not stop the run, so a session that is about the types themselves should read the errors in an editor that runs the compiler, or run npx tsc --noEmit locally and paste the output into the room.

The example uses a discriminated union because it is the TypeScript pattern people most often want to talk through with someone. Every member of Action has a literal type field, so inside case 'setQty' the compiler knows action has sku and qty, and inside case 'add' it knows action has item. Omit<Item, 'qty'> keeps the add payload in sync with Item without repeating fields. Money is a number of cents, which avoids the 0.1 + 0.2 rounding problems a float price would bring to the total.

The code runs in a browser worker, not Node.js. Browser APIs such as fetch, URL, Intl, structuredClone, timers and top-level await work; import from another file, require, npm packages and Node modules such as fs do not. Keep one exercise per .ts file and press Run with that tab open. Uncaught errors are reported with their line number, and a run that never ends is stopped after five seconds without freezing anyone's tab.

Rooms are anonymous: up to 3 people with the link edit a free room at once, with live cursors and selections, and edits on the same line merge through a CRDT rather than overwriting each other. Free rooms keep 2 files and are deleted 24 hours after the last activity. Pro ($29 once) adds rooms of up to 10 people, unlimited files, .zip download, keystroke replay, private interviewer notes, a question bank, room locking and rooms that never expire.

Updated · Cosmovex

Questions

Does PairPad type-check my TypeScript?

No. Run strips the types with Sucrase and executes the JavaScript, so type errors do not appear and do not stop the run. Use your editor or npx tsc --noEmit for type errors; the pad is for writing, running and discussing the code together.

Which TypeScript syntax is supported?

Type annotations, interfaces, type aliases, generics, unions, enums, as const, optional and non-null operators, parameter properties and access modifiers are all removed or compiled away. Decorators and namespaces that need emitted runtime code are the cases to avoid.

Can I import from another .ts file in the room?

No. Each file runs on its own in the sandbox, and import or require stops the run with a message. Put the helper code you need into the file you are running.

Can I use npm packages such as zod or lodash?

No. There is no package installer. Browser APIs work, and you can paste a small helper function into the file instead.

Can I use this for a TypeScript interview?

Yes. Replace main.ts with your question, press Share before the call and send the link; the candidate needs no account. Pro adds private notes and a scorecard that only you can read, and a replay of every keystroke afterwards.

The free plan covers everything on this page. PairPad Pro ($29, paid once) is described on the PairPad page.