Peek shows what a value is. TypeScript shows what it should be.

In TypeScript, the editor knows your types.

Pick TypeScript for a Snippet, with no tsconfig and no build step. The editor checks it as you type, and the code still runs.

Types on hover, mistakes underlined

Hover a name or a call to see its type. A type error is underlined as you type, and by default the code still runs, so you see what it does.

type Item = { name: string; cents: number }

1⌄type Item = { name: string; cents: number }

2⌄

3⌄const cart: Item[] = [

4⌄ { name: "Coffee", cents: 450 },

5⌄ { name: "Bagel", cents: 300 },

6⌄]

7⌄

8⌄function price(cents: number) {

9⌄ return `$${(cents / 100).toFixed(2)}`

10⌄}

11⌄

12⌄const total = cart.reduce((sum, item) => sum + item.cents, 0)

13⌄console.log(price(total))

14⌄console.log(price("12.50"))

$7.50

$0.13

Done in 3ms·Runs as you type

The underline explains the $0.13: price expects cents as a number, not a string.

Or hold the Run

Turn on “Don’t run with type errors”, and a TypeScript Snippet with an error shows the error instead of running.

function total(prices: number[]) {

1⌄function total(prices: number[]) {

2⌄ return prices.reduce((sum, price) => sum + price, 0)

3⌄}

4⌄

5⌄console.log(total([4, "5", 6]))

Line 5: Type 'string' is not assignable to type 'number'.

Didn’t run·Runs as you type

Nothing ran: the console shows the type error on line 5, and the footer says Didn’t run.

JavaScript or TypeScript, per Snippet

Each Snippet has its own Language. A type in JavaScript is an error until you pick TypeScript.

type Point = { x: number; y: number }

1⌄type Point = { x: number; y: number }

2⌄

3⌄function distance(a: Point, b: Point) {

4⌄ return Math.hypot(b.x - a.x, b.y - a.y)

5⌄}

6⌄

7⌄console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }))

Line 1: SyntaxError: Unexpected identifier 'Point'

Didn’t run·Runs as you type

Picking TypeScript in the footer’s Language menu clears the underlines, and the Snippet prints 5.

Completions

Names that fit appear as you type, with each one’s type and notes beside it, in JavaScript and TypeScript.

const word = "ha"

1⌄const word = "ha"

2⌄word.rep

Done·Runs as you type

word.rep offers repeat, replace and replaceAll. The pane beside them shows what repeat takes and returns.

Format Code

One key formats the code on screen with Prettier, built in, so it works offline.

const order={items:[{name:'Tea',price:3},{name:'Cake',price:4.5}],paid:false}

1⌄const order={items:[{name:'Tea',price:3},{name:'Cake',price:4.5}],paid:false}

2⌄function total(o){return o.items.reduce((sum,i)=>sum+i.price,0)}

3⌄console.log( total(order) );

7.5

Done in 2ms·Runs as you type

Three crowded lines, formatted in Prettier’s default style. The Run prints 7.5 before and after.

Vim keys

Switch the editor to Vim’s modes and motions. ⌘↵ and every other shortcut still work.

type Point = { x: number; y: number }

1⌄type Point = { x: number; y: number }

2⌄

3⌄function distance(a: Point, b: Point) {

4⌄ return Math.hypot(b.x - a.x, b.y - a.y)

5⌄}

6⌄

7⌄console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }))

insert·Done in 2ms·Runs as you type

The footer starts with the Vim mode, INSERT here, and the Snippet still runs: it prints 5.

Your format style JSpark+

Choose Prettier’s options or use a .prettierrc, format each time you press Run, and get Tailwind class suggestions as you type.

General

Editor

Console

Running

Timeline

Starters

License

About

Editor

Code colors

Mossconst a = "hi"Emberconst a = "hi"Inkconst a = "hi"Neonconst a = "hi"Orchidconst a = "hi"Contrastconst a = "hi"

Font

Fira Codea => b !== cFira Code + Ligaturesa => b !== cJetBrains Monoa => b !== cMenloa => b !== cMonacoa => b !== cCourier Newa => b !== c

Fira Code and JetBrains Mono come with the app. Other monospace fonts appear here once installed.

Text size15px

Wrap long lines

Off: a long line runs on and the editor scrolls sideways. On: it continues on the next row.

Grid behind code

A faint square grid behind the code, one square per line, like squared paper.

Vim keybindings

Modes, motions and operators, with the mode shown in the bar along the bottom. ⌘↵ and the app’s other shortcuts work in every mode.

Suggest while typing

Show a list of names as you type. Off, press ⌃Space to ask for it.

Show types on hover

Rest the pointer on a name to see its type. Values in the Timeline always show.

Format style

Semicolons

Single quotes

Spaces inside braces

Indent with tabs

Trailing commasAllES5None

Parentheses around one arrow parameter

On: (x) => x. Off: x => x.

A .prettierrc in the Working Folder wins over these.

Format before running

Tidy the code when you press Run or open the Timeline. Never while Auto-run runs as you type.

Settings → Editor: Prettier’s options, and Format before running switched on.

Good to know

No tsconfig, no build step: TypeScript is checked in the app and compiled with esbuild.
Offline: The editor, its types and Prettier are inside the app.
New Snippets start in JavaScript: Change it in Settings → Running → Language for new Snippets.
Vue and Svelte, typed: A Vue or Svelte Snippet is one component file. With lang="ts", it is type-checked too.

Read about JavaScript and TypeScript Read the editor docs All features

Next time a type puzzles you, hover it.

Download free for Mac

Not a trial: it doesn’t expire.

Windows: coming later