#Twoslash

Twoslash is a special code block mode that enables TypeScript type inspection, inline errors, and hover tooltips directly inside your code blocks.

It is especially useful for writing documentation that needs to stay in sync with actual TypeScript types.

#Enable Twoslash

To enable Twoslash, add the twoslash keyword to your code block language.

```ts twoslash
const message = "Hello World"
```

This tells the code block renderer to analyze the code using TypeScript.

#Hover Tooltip (^|)

The ^| marker shows type information when the code is hovered.

```ts twoslash
Number.parseInt('123', 10)
//      ^|
```

It will show the inferred type when you hover the highlighted code.

var Number: NumberConstructor
An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.p
parseFloat
parseInt
prototypeNumberConstructor.parseInt(string: string, radix?: number): number
Converts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`.
If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
All other strings are considered decimal.arseInt('123', 10)
 
 

#Persist Query (^?)

The ^? marker displays type information immediately, without requiring hover.

This is useful when you want the explanation to always be visible.

```ts twoslash
interface User {
  name: string
}
 
const user: Readonly<User> = {
  name: "Alice",
//   ^?
}
```

It will render the type information inline, attached to the code.

interface User {
  User.name: stringname: string
}
 
const const user: Readonly<User>user: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonlyReadonly<User> = {
  
name: stringname: "Alice",
}

#Errors and Diagnostics

Twoslash can also display TypeScript errors inline.

```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}
 
const todo: Readonly<Todo> = {
  title: "Hello"
}
 
todo.title = "World"
```

The error will be rendered directly in the code block.

interface Todo {
  Todo.title: stringtitle: string
}
 
const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonlyReadonly<Todo> = {
  title: stringtitle: "Hello"
}
 
const todo: Readonly<Todo>todo.title = "World"
Cannot assign to 'title' because it is a read-only property.

#Notes

• Twoslash runs at build time, not in the browser.
• Type information is generated using the TypeScript compiler.
• Hover tooltips (^|) are ideal for lightweight hints.
• Persist queries (^?) are best for explanations that should always be visible.

Twoslash helps keep documentation accurate, expressive, and closely aligned with real TypeScript behavior.