Auto Type Table

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

Usage

npm i fumadocs-typescript

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

import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { createGenerator, createFileSystemGeneratorCache } from 'fumadocs-typescript';
import { AutoTypeTable, type AutoTypeTableProps } from 'fumadocs-typescript/ui';

const generator = createGenerator({
  // set a cache, necessary for serverless platform like Vercel
  cache: createFileSystemGeneratorCache('.next/fumadocs-typescript'),
});

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultComponents,
    AutoTypeTable: (props: Partial<AutoTypeTableProps>) => (
      <AutoTypeTable {...props} generator={generator} />
    ),
    ...components,
  } satisfies MDXComponents;
}

You can now reference <AutoTypeTable /> in your MDX content.

See TypeScript DocGen for more usages.

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" />

The path is relative to your project directory (cwd), because AutoTypeTable is a React Server Component, it cannot access build-time information like MDX file path.

From Type

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

<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;
}

TypeScript Compiler

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.

You can change the compiler settings from createGenerator().

import { createGenerator, createFileSystemGeneratorCache } from 'fumadocs-typescript';

const generator = createGenerator({
  tsconfigPath: './tsconfig.json',
  // where to resolve relative paths (normally cwd)
  basePath: './',
  // other options...
});

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.

References