Auto Type Table

Prop

Type

Server Component only

You cannot use this in a client component.

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.

mdx-components.tsx

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

const generator = createGenerator();

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

From File

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

path/to/file.ts

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.

import { AutoTypeTable } from 'fumadocs-typescript/ui';

<AutoTypeTable type="{ hello: string }" />

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

file.ts

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 } from 'fumadocs-typescript';

const generator = createGenerator({
  tsconfigPath: './tsconfig.json',
  // where to resolve relative paths (normally cwd)
  basePath: './',
  // disable file system cache
  cache: false,
});

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