---
title: Typescript
description: Generate docs from Typescript definitions
---

## Usage

```package-install
fumadocs-typescript
```

### UI Integration

It comes with the `AutoTypeTable` component. Learn more about [Auto Type Table](/docs/ui/components/auto-type-table).

### Generate from MDX Files

Generate from existing MDX files statically.

```js title="script.mjs"
import { generateFiles } from 'fumadocs-typescript';
import * as path from 'node:path';

void generateFiles({
  input: ['./content/docs/**/*.model.mdx'],
  // Rename x.model.mdx to x.mdx
  output: (file) =>
    path.resolve(
      path.dirname(file),
      `${path.basename(file).split('.')[0]}.mdx`,
    ),
});
```

Create a model MDX file.

```mdx title="content/docs/file.model.mdx"
---
title: Hello World
---

## All Exported Properties

---type-table-demo---
./my/typescript/file.ts
---end---

## Specified Property

---type-table-demo---
./my/typescript/file.ts#Property
---end---
```

Run this script with `node ./script.mjs`.

Generated MDX files assumes you are using the [Tailwind CSS preset](/docs/ui/theme) of Fumadocs UI.
If you want to customise generated output, use the `templates` option.

### Generate from MDX Content

Same as generating from MDX files, but you can pass the MDX file content directly.

```tsx
import { generateMDX } from 'fumadocs-typescript';
import * as fs from 'node:fs/promises';

const out = generateMDX(`# Title

---type-table---
./my/typescript/file.ts
---end---`);

void fs.writeFile('./path/to/file.mdx', out);
```

## Annotations

### Hide

Hide a field by adding `@internal` tsdoc tag.

```ts
interface MyInterface {
  /**
   * @internal
   */
  cache: number;
}
```

### Specify Type Name

You can specify the name of a type with the `@remarks` tsdoc tag.

```ts
interface MyInterface {
  /**
   * @remarks `timestamp` Returned by API. // [!code highlight]
   */
  time: number;
}
```

This will make the type of `time` property to be shown as `timestamp`.

## Demo

Below is an example generated from Typescript definitions.

---type-table---
../props.ts#NavbarProps
---end---
