Typescript

Usage

npm install fumadocs-typescript

UI Integration

It comes with the AutoTypeTable component. Learn more about Auto Type Table.

Generate from MDX Files

Generate from existing MDX files statically.

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.

content/docs/file.model.mdx

---
title: Hello World
---
 
## All Exported Properties
 
---type-table---
./my/typescript/file.ts
---end---
 
## Specified Property
 
---type-table---
./my/typescript/file.ts#Property
---end---

Run this script with node ./script.mjs.

Generated MDX files assumes you are using the Tailwind CSS preset 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.

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.

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

Specify Type Name

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

interface MyInterface {
  /**
   * @remarks `timestamp` Returned by API.
   */
  time: number;
}

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

Demo

Below is an example generated from Typescript definitions.

NavbarProps

enabledboolean

No Description

componentReactNode

No Description

enableSearchboolean

Show/hide search toggle

Note: Enable/disable search from root provider instead

childrenReactNode

No Description

titleReactNode

No Description

urlstring

Redirect url of title

defaultValue: '/'

transparentMode"always" | "top" | "none"

Use transparent background

defaultValue: none

On this page