Open the Playground and add TypeScript
Open Codectionary’s Playground. Its default project contains index.html, style.css and script.js. In the file explorer, use the plus button and choose TypeScript to create a .ts file. Keep an HTML file in the project: the preview starts from that HTML document. If there is no HTML file, the preview displays No HTML file found instead of running a standalone TypeScript program.
For a quick first run, leave index.html in place, put console.log("Hello from TypeScript") in the new TypeScript file, and click Run. Open the Console panel to read the message. You can edit index.html to add a button or other elements, then use DOM APIs from the TypeScript file to update them.
What the preview does
The application loads the TypeScript library when a TypeScript file is present. For the preview it calls transpileModule on each .ts file with an ES2020 target and no module output, joins the generated JavaScript with any JavaScript files, and inserts the scripts into a sandboxed HTML preview. The Run button refreshes that preview; Live preview can also update it while you type.
This is a fast per-file transformation, not a full type check. The Playground does not apply a tsconfig.json project, resolve imports between files, or show normal cross-file TypeScript diagnostics. A bad type annotation may still be transformed into JavaScript that runs. Run local npx tsc --project tsconfig.json --noEmit when type correctness matters.
Where results and errors appear
Visual changes appear in the Preview pane. console.log, console.warn and console.error messages are forwarded to the Console panel. Runtime exceptions and unhandled promise rejections are also reported there. If a script has a compile-time type mistake, do not rely on this panel to detect it; use a local TypeScript checker.
If nothing appears, first check that index.html exists, that the .ts file contains code which runs in a browser, and that the Console panel is open. DOM code needs elements with matching IDs in the HTML file. If the preview shows No HTML file found, add or restore an HTML file.
What this environment does not provide
The preview is a browser sandbox. It is not Node.js and does not provide Node-only APIs such as filesystem access, a terminal, npm installation, or a package.json build. It does not bundle or resolve external packages for a TypeScript file. Avoid imports and external packages in this simple preview unless a separate project toolchain actually supplies them.
The browser still supplies its normal DOM APIs to the preview, subject to sandbox restrictions. Network and browser security rules still apply. For multi-file modules, npm dependencies, deliberate compiler options or reliable diagnostics, use the local setup and browser-project guides instead of treating a successful preview as proof that a project builds.
Syntax
TypeScript file + HTML file → browser previewExamples
First Playground TypeScript file
Create a TypeScript file beside the default index.html, enter this code, run it, and read the Console panel.
const greeting: string = "Hello from TypeScript";
console.log(greeting);- The greeting annotation describes a string for a full TypeScript checker. The Playground removes this type syntax when preparing its browser preview.
- console.log writes the message to the Console panel. The preview requires an HTML file even though this example does not access the DOM.
- Change greeting to another string and run again. A successful preview confirms the JavaScript executed; it does not confirm a full project type check.
Best practices
- Keep an HTML file in the Playground project.
- Use the Console for logs and runtime errors, and the Preview for visual changes.
- Run a local project type check before relying on TypeScript annotations.
- Use a local toolchain when you need npm dependencies or module resolution.
Runtime & versions
Compiled to JavaScript. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
TypeScript Handbook