Orientation
Content Processing
Search Infrastructure
Rendering and UI
Developer Tooling
How It Works
The following files were used as context for generating this wiki page:
"TypeScript Tables" in Fumadocs serve as an automated documentation bridge between TypeScript source code and human-readable web documentation. By utilizing static analysis of source files, the system extracts type signatures, JSDoc comments, and structural metadata to render interactive, searchable tables directly into documentation pages. This eliminates the manual maintenance of API documentation, ensuring that public interfaces are always aligned with the actual implementation.
The subsystem operates through a multi-stage pipeline: a "Generator" (built on ts-morph) extracts the AST of target types, which is then processed into a generic intermediate format. This format is then handed off to React components (via AutoTypeTable or Remark plugins) to produce styled interfaces. The architecture is modular, allowing users to embed tables through React components or declaratively within Markdown files using a specialized MDX directive, essentially treating source code as the primary source of truth for documentation content.
The system addresses the "doc-sync" problem by embedding documentation generation into the build pipeline. It treats TypeScript definitions as data, allowing for recursive type expansion, union unwrap-strategies, and sophisticated comment parsing. By integrating closely with unified and mdast, the system provides a seamless experience for authors who want to document complex TypeScript APIs without leaving their Markdown documents.
The process begins with the Generator interface, which wraps ts-morph. When generateDocumentation is called, it identifies an export in a source file, determines the type, and recursively traverses the properties to build a GeneratedDoc object.
Sources: packages/typescript/src/lib/base.ts:137-190
remark-auto-type-table PluginThe Remark plugin translates Markdown directives (like <auto-type-table>) into mdxJsxFlowElement nodes containing the actual generated UI code. It is designed to work within MDX pipelines, enabling authors to place these tables anywhere in their content.
visit(tree, 'mdxJsxFlowElement', ...) scans the MDX content for the auto-type-table tag name.file.dirname or explicit cwd) to locate the source TypeScript file.generate function invokes the generator and creates an estree representation of the table props, ensuring that the React component receives typed data.Sources: packages/typescript/src/lib/remark-auto-type-table.ts:231-282
The "Type Tree" logic is responsible for converting ts-morph types into a serializable TypeNode object. It employs a chain-of-responsibility pattern where multiple handlers attempt to transform a type, with the baseHandler serving as the fallback.
Tip
The createTypeTreeBuilder function accepts a customHandlers array. These handlers are processed in order; place specific handlers (like literalEnumHandler) before the baseHandler to override default behavior.
Sources: packages/story/src/type-tree/builder.ts:233-248
Sources: packages/story/src/type-tree/builder.ts:243-264
The subsystem parses tags from JSDoc comments to enhance the displayed metadata, specifically looking for default, param, and returns tags. The parseTags function is the primary utility for converting raw tag data into a structured TypedTags object.
Caution
Tags are parsed using a simple string separator index; a missing separator - in a @param description results in the entire text being assigned to the parameter name, leaving the description empty.
Sources: packages/typescript/src/lib/parse-tags.ts:17-45
The TypeTable component provides the visual representation. It is designed for reusability, supporting both standard and Radix-themed interfaces. It handles collapsible entries, allowing users to inspect complex properties without cluttering the documentation view.
// Example usage: Rendering a table manually
<TypeTable
type={{
propName: {
type: "string",
description: <p>Description here</p>,
required: true
}
}}
/>Sources: packages/base-ui/src/components/type-table.tsx:52-78
Errors are handled at the plugin level by tracking the source of the mdxJsxFlowElement. If the generator fails, the onError utility provides the file path and line number, preventing the build from failing silently and making debugging significantly easier in large docs repositories.
Sources: packages/typescript/src/lib/remark-auto-type-table.ts:236-242
Note
The AutoTypeTable React component defaults to an empty object if no entries are returned; ensure the source path and exported name are accurate to avoid runtime discrepancies.