TypeScript

TypeScript Code Screenshot Generator

Turn TypeScript snippets into images worth sharing, without leaving your Mac.

TypeScript is worth screenshotting precisely because the types are the point. A plain code block strips the thing you were trying to show.

Codeshot detects TypeScript from the code you paste, so there is no language picker to get wrong. Here is the same snippet in three of the 30 themes it ships with, rendered with the app's own stylesheets.

type Options = {
  theme: string;
  scale?: 1 | 2 | 3;
};

export const render = async (
  code: string,
  opts: Options
): Promise<Blob> => toImage(code, opts);

Atom One · dark

type Options = {
  theme: string;
  scale?: 1 | 2 | 3;
};

export const render = async (
  code: string,
  opts: Options
): Promise<Blob> => toImage(code, opts);

GitHub · dark

type Options = {
  theme: string;
  scale?: 1 | 2 | 3;
};

export const render = async (
  code: string,
  opts: Options
): Promise<Blob> => toImage(code, opts);

Tokyo Night · dark

Choosing a theme for TypeScript

Type signatures push lines out fast. Turn line numbers off unless they carry meaning, and give the window more horizontal padding so generics do not collide with the edge.

Getting the size right

Let the image follow your content, or lock it to a ratio — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, or 3:4 — then export at 1×, 2×, or 3× so it stays sharp on a retina display. Copy it straight to the clipboard with ⌘⇧C, or save with ⌘S.

See all 30 themes side by side, or read the full workflow.

Built for TypeScript, and 59 other languages

Everything runs on your Mac. Your code never leaves it.

Download for macOS