Typescript

Generate docs from Typescript definitions

Usage

npm install fumadocs-typescript

UI Integration

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

Generate MDX Files

You may generate 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.

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.

enabledboolean

No Description

componentReactNode

No Description

githubUrlstring

GitHub url displayed on the navbar

titleReactNode

No Description

urlstring

Redirect url of title

  • defaultValue: '/'
enableSearchboolean

Show/hide search toggle

Note: Enable/disable search from root provider instead

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

When to use transparent navbar

  • defaultValue: none
childrenReactNode

No Description

Last updated on