Auto Type Table

It generates a table for your docs based on TypeScript definitions.

Usage

npm install fumadocs-typescript

Initialize the TypeScript compiler and add it as a MDX component.

import { createTypeTable } from 'fumadocs-typescript/ui';
import defaultMdxComponents from 'fumadocs-ui/mdx';
 
const { AutoTypeTable } = createTypeTable();
 
<MDX
  components={{
    ...defaultMdxComponents,
    AutoTypeTable,
  }}
/>;

From File

It accepts a path prop that points to a typescript file, and name for the exported type name.

export interface MyInterface {
  name: string;
}

<AutoTypeTable path="./path/to/file.ts" name="MyInterface" />

From Type

You can specify the type to generate, without an actual TypeScript file.

import { AutoTypeTable } from 'fumadocs-typescript/ui';
 
<AutoTypeTable type="{ hello: string }" />

When a path is given, it shares the same context as the TypeScript file.

export type A = { hello: string };

<AutoTypeTable path="file.ts" type="A & { world: string }" />

When type has multiple lines, the export statement and name prop are required.

<AutoTypeTable
  path="file.ts"
  name="B"
  type={`
import { ReactNode } from "react"
export type B = ReactNode | { world: string }
`}
/>

Functions

Notice that only object type is allowed. For functions, you should wrap them into an object instead.

export interface MyInterface {
  myFn: (input: string) => void;
}

References

File System

It relies on the file system, hence, the page referencing this component must be built in build time. Rendering the component on serverless runtime may cause problems.

Deep Dive

Under the hood, it uses the Typescript Compiler API to extract type information. Your tsconfig.json file in the current working directory will be loaded.

To change the compiler settings, pass a options prop to the component.

Learn more about Typescript Docs Generation.