Start building

Playcode Classic

TypeScript Playground

This TypeScript playground runs TypeScript online, in a live page in your browser. Type errors are underlined as you write, npm packages come with their types, and React .tsx components render in the preview. Nothing to set up, and no account to start; sign in to save and share. It’s part of Playcode Classic, Playcode’s free code tools.

Open the playground

Free. No account needed to start.

In a playground sandbox Play pushes a big square block at the round hole of a giant wooden shape sorter; it will not go in, and a red wavy line glows under the hole. A developer on the sandbox edge laughs over his laptop.

Type errors show up as you write

The editor checks your types with TypeScript 5.9 and underlines what’s wrong; hover for the reason. The check never blocks a run, so you can try an idea before it’s fully typed.

Rather describe a website than code it? Use Playcode’s AI website builder
On the sand a row of wooden blocks lies like a line of code, all cubes but one triangle; Play, a red chalk in hand, has drawn a wavy line under the triangle, and the developer points at it from the sandbox edge.

Packages arrive with their types

Import a package and the editor offers to install it from npm. Its type definitions come with it, so autocomplete knows every function and the checker knows every argument.

At a picnic table the developer slides a new tool into the one foam cut-out of an open tool case that fits it exactly, and Play, on the table beside him, clasps his hands in delight.

Got a .tsx file? See it render.

Open the React TypeScript starter, paste your component into a file and render it from index.tsx. It shows up in the preview, and its buttons work.

Open the React TypeScript starter
The developer turns the crank of a big jack-in-the-box and a little web card springs out on its spring, a picture and a flame-orange button on it, while Play watches, delighted.

Official playground, or this one?

Use the official TypeScript playground to read the compiled JavaScript and try other versions and compiler options.

Use this one when your TypeScript needs a page, packages or React:

  • A live page with HTML and CSS
  • npm packages, types included
  • React and .tsx
  • Several files that import each other
  • A link to share, and someone to edit with you
  • The AI chat, for questions about your code

Part of Playcode Classic

Playcode began in 2016 as a browser coding environment. This playground is one of its free code tools, which we now call Playcode Classic.

Playcode today is an AI platform for building and running websites and apps.

See the AI website builderAll Playcode Classic tools
Play stands at the open gate of an old playground and presents what lies beyond it: a rocket ready on its launch pad.

Questions people ask

  • What is a TypeScript playground?

    A TypeScript sandbox, or TS playground: a place to write TypeScript and run it straight away, without setting up a project or a compiler. This one runs your code in a live page in your browser and checks your types as you write.

  • Is this TypeScript online editor free?

    Yes. Writing and running code is free and needs no account. Saving and sharing need a free account, which keeps up to three saved projects, public or private; the AI chat uses credits.

  • Which TypeScript version does it use?

    The editor checks your code with TypeScript 5.9. To run it, esbuild compiles it to JavaScript without checking types, so a type error never stops a run.

  • Does it check types like tsc?

    Yes. It runs TypeScript’s own checker as you write and underlines errors, with strict mode on and strictNullChecks off.

  • Can I see the compiled JavaScript?

    Not yet. To read the JavaScript that TypeScript emits, use the official TypeScript playground.

  • Can I use npm packages?

    Yes. Import a package and the editor offers to install it from npm, with its type definitions.

  • How do I open a .tsx file online?

    Open the React TypeScript starter, paste your component into a file and render it from index.tsx. It appears in the preview, so the playground doubles as a TSX viewer online.

  • Can I open a .tsx file on my phone?

    Yes, in your phone’s browser, the same way. Longer code is easier on a bigger screen.

  • Does it support React and JSX?

    Yes. .tsx and .jsx files compile in the preview. Start from the React TypeScript starter.

  • Is this playground part of Playcode?

    Yes. This playground is part of Playcode Classic, Playcode’s free code tools. Playcode began in 2016 as a browser coding environment. Today it is an AI platform for building and running websites and apps.

More free code tools

Write a type. Watch it run.

Open the playground
A rocket waits with its door open and an empty seat, and Play invites you in. High above, another rocket climbs away.