---
title: Twoslash
description: Use Typescript Twoslash in your docs
---

## Usage

Thanks to the Twoslash integration of [Shiki](https://github.com/shikijs/shiki), the default code syntax highlighter, it is as simple as adding a transformer.

```package-install
fumadocs-twoslash twoslash
```

For Next.js, you need to externalize the following deps:

```js title="next.config.mjs (Next.js)"
const config = {
  reactStrictMode: true,
  // [!code ++]
  serverExternalPackages: ['typescript', 'twoslash'],
};
```

Add to your Shiki transformers.

```ts title="source.config.ts (Fumadocs MDX)"
import { defineConfig } from 'fumadocs-mdx/config';
import { transformerTwoslash } from 'fumadocs-twoslash';
import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';

export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
      transformers: [...(rehypeCodeDefaultOptions.transformers ?? []), transformerTwoslash()],

      // important: Shiki doesn't support lazy loading languages for codeblocks in Twoslash popups
      // make sure to define them first (e.g. the common ones)
      langs: ['js', 'jsx', 'ts', 'tsx'],
    },
  },
});
```

Add styles, Tailwind CSS v4 is required.

```css title="Tailwind CSS"
@import 'fumadocs-twoslash/twoslash.css';
```

Add MDX components.

```tsx title="components/mdx.tsx"
import * as Twoslash from 'fumadocs-twoslash/ui'; // [!code ++]
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultComponents,
    // [!code ++]
    ...Twoslash,
    ...components,
  } satisfies MDXComponents;
}
```

Now you can add `twoslash` meta string to codeblocks.

````md
```ts twoslash
console.log('Hello World');
```
````

### Cache

Optionally, you can enable filesystem cache with `typesCache` option:

```ts twoslash title="source.config.ts"
import { transformerTwoslash } from 'fumadocs-twoslash';
import { createFileSystemTypesCache } from 'fumadocs-twoslash/cache-fs';

transformerTwoslash({
  typesCache: createFileSystemTypesCache(),
});
```

### Example

Learn more about [Twoslash notations](https://twoslash.netlify.app/refs/notations).

````ts twoslash title="Test" lineNumbers
type Player = {
  /**
   * The player name
   * ```php
   * $a = "60"
   * ```
   *
   * @default 'user'
   */
  name: string;
};

// ---cut---
// @noErrors
console.g;
//       ^|

const player: Player = { name: 'Hello World' };
//    ^?
````

```ts twoslash
const a = '123';

console.log(a);
//      ^^^
```

```ts twoslash
// @errors: 2588
const a = '123';

a = 132;
```
