TypeScript Formatter & Beautifier - Format TS Online

About the TypeScript Formatter playground

The TypeScript Formatter cleans up dense or minified TypeScript into well-structured, indented code. It formats type annotations, interfaces, generics, and decorators alongside ordinary statements, and normalizes spacing around operators and braces. Because it runs entirely in your browser, your source, including type definitions that may reveal internal data models, is never uploaded to any server.

TypeScript is a typed superset of JavaScript that adds static types, interfaces, enums, and generics, compiling down to plain JavaScript. The type layer makes large codebases safer and more self-documenting, but it also adds syntax that benefits from consistent formatting. Readable TypeScript makes complex generic signatures and union types easier to understand during review, and a shared style keeps diffs focused on real logic changes rather than whitespace.

HostedTypeScript Formatter runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

External resources

typescriptlang.org— Official website
GitHub— Official spec repository

Messy input

interface User{id:number;name:string};const get=<T>(x:T):T=>x;function area(r:number):number{return Math.PI*r*r}

Formatted output

interface User {
  id: number;
  name: string;
}

const get = <T>(x: T): T => x;

function area(r: number): number {
  return Math.PI * r * r;
}

Generic class formatted

class Box<T> {
  constructor(private value: T) {}

  get(): T {
    return this.value;
  }
}

Enum and union messy input

enum Status{Active,Inactive}type Result<T>={ok:true;value:T}|{ok:false;error:string};

Enum and union formatted output

enum Status {
  Active,
  Inactive,
}

type Result<T> =
  | { ok: true; value: T }
  | { ok: false; error: string };

Async typed function formatted

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  const data: User = await res.json();
  return data;
}

Decorated class formatted

@Component({
  selector: 'app-root',
})
export class AppComponent {
  @Input() title: string = '';

  ngOnInit(): void {
    console.log(this.title);
  }
}

Mapped type messy input

type Options={readonly[K in keyof Config]?:Config[K]};function pick<T,K extends keyof T>(o:T,k:K):T[K]{return o[k]}

Mapped type formatted output

type Options = {
  readonly [K in keyof Config]?: Config[K];
};

function pick<T, K extends keyof T>(o: T, k: K): T[K] {
  return o[k];
}

Input

Output

Start typing to auto-process

TypeScript Formatter

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection