---
title: "TypeScript Tables"
description: "\"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 sys..."
last_updated: "2026-07-02T09:46:39.422825+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/rendering-ui/typescript-tables"
---

<details>
<summary>Relevant source files</summary>

The following files were used as context for generating this wiki page:

- [packages/typescript/src/ui/auto-type-table.tsx](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/ui/auto-type-table.tsx)
- [packages/typescript/src/lib/remark-auto-type-table.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/remark-auto-type-table.ts)
- [packages/story/src/type-tree/builder.ts](https://github.com/blade47/fumadocs/blob/main/packages/story/src/type-tree/builder.ts)
- [packages/core/src/mdx-plugins/remark-structure.ts](https://github.com/blade47/fumadocs/blob/main/packages/core/src/mdx-plugins/remark-structure.ts)
- [packages/typescript/src/lib/base.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/base.ts)
- [packages/core/src/content/md.ts](https://github.com/blade47/fumadocs/blob/main/packages/core/src/content/md.ts)
- [packages/local-md/src/md/renderer.ts](https://github.com/blade47/fumadocs/blob/main/packages/local-md/src/md/renderer.ts)
- [packages/mdx/src/runtime/server.ts](https://github.com/blade47/fumadocs/blob/main/packages/mdx/src/runtime/server.ts)
- [packages/mdx/src/loaders/mdx/remark-include.ts](https://github.com/blade47/fumadocs/blob/main/packages/mdx/src/loaders/mdx/remark-include.ts)
- [packages/doc-gen/src/remark-ts2js.ts](https://github.com/blade47/fumadocs/blob/main/packages/doc-gen/src/remark-ts2js.ts)
- [packages/api-docs/src/components/schema/index.tsx](https://github.com/blade47/fumadocs/blob/main/packages/api-docs/src/components/schema/index.tsx)
- [packages/core/src/source/llms.ts](https://github.com/blade47/fumadocs/blob/main/packages/core/src/source/llms.ts)
- [packages/typescript/src/lib/type-table.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/type-table.ts)
- [packages/python/src/convert.ts](https://github.com/blade47/fumadocs/blob/main/packages/python/src/convert.ts)
- [packages/api-docs/src/schema/to-string.ts](https://github.com/blade47/fumadocs/blob/main/packages/api-docs/src/schema/to-string.ts)
- [packages/twoslash/src/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/twoslash/src/index.ts)
- [packages/typescript/src/markdown.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/markdown.ts)
- [packages/base-ui/src/components/type-table.tsx](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/src/components/type-table.tsx)
- [packages/typescript/src/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/index.ts)
- [packages/radix-ui/src/components/type-table.tsx](https://github.com/blade47/fumadocs/blob/main/packages/radix-ui/src/components/type-table.tsx)
- [packages/openapi/src/utils/pages/to-static-data.ts](https://github.com/blade47/fumadocs/blob/main/packages/openapi/src/utils/pages/to-static-data.ts)
- [packages/content-collections/src/configuration.ts](https://github.com/blade47/fumadocs/blob/main/packages/content-collections/src/configuration.ts)
- [packages/story/src/utils/generate.ts](https://github.com/blade47/fumadocs/blob/main/packages/story/src/utils/generate.ts)
- [packages/typescript/src/ui/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/ui/index.ts)
- [packages/typescript/src/lib/parse-tags.ts](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/parse-tags.ts)
- [packages/api-docs/src/schema/index.ts](https://github.com/blade47/fumadocs/blob/main/packages/api-docs/src/schema/index.ts)
- [packages/core/src/source/source.ts](https://github.com/blade47/fumadocs/blob/main/packages/core/src/source/source.ts)
- [packages/story/src/type-tree/types.ts](https://github.com/blade47/fumadocs/blob/main/packages/story/src/type-tree/types.ts)
- [packages/python/src/generated.ts](https://github.com/blade47/fumadocs/blob/main/packages/python/src/generated.ts)
- [packages/doc-gen/src/remark-docgen.ts](https://github.com/blade47/fumadocs/blob/main/packages/doc-gen/src/remark-docgen.ts)
</details>

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

## Core Generation Pipeline
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.

```mermaid
flowchart TD
    A["File Source (ts-morph)"] --> B["getExportedDeclarations"]
    B --> C["getType (ts-morph)"]
    C --> D["getDocEntry"]
    D --> E["Extract Tags/Comments"]
    E --> F["Generate GeneratedDoc"]
```
Sources: [packages/typescript/src/lib/base.ts:137-190](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/base.ts#L137-L190)

## The `remark-auto-type-table` Plugin
The 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.

1. **Visitor Traversal**: `visit(tree, 'mdxJsxFlowElement', ...)` scans the MDX content for the `auto-type-table` tag name.
2. **Path Resolution**: It uses the file context (`file.dirname` or explicit `cwd`) to locate the source TypeScript file.
3. **Execution**: The `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](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/remark-auto-type-table.ts#L231-L282)

## Type Tree Builders and Handlers
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](https://github.com/blade47/fumadocs/blob/main/packages/story/src/type-tree/builder.ts#L233-L248)

| Design Choice | Benefit | Cost |
| :--- | :--- | :--- |
| Recursive Traversal | Handles nested objects and interfaces naturally | Susceptible to stack overflow with circular types |
| WeakMap Caching | Prevents redundant parsing of large type graphs | Higher memory usage during build |
| AST-based Extraction | Type-safe extraction independent of runtime | Slower build performance due to full TS analysis |

Sources: [packages/story/src/type-tree/builder.ts:243-264](https://github.com/blade47/fumadocs/blob/main/packages/story/src/type-tree/builder.ts#L243-L264)

## JSDoc and Tag Parsing
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](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/parse-tags.ts#L17-L45)

## UI Components and Rendering
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.

```tsx
// 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](https://github.com/blade47/fumadocs/blob/main/packages/base-ui/src/components/type-table.tsx#L52-L78)

## Error Handling and Lifecycle
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](https://github.com/blade47/fumadocs/blob/main/packages/typescript/src/lib/remark-auto-type-table.ts#L236-L242)

> [!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.

## Related

- [Twoslash Highlight](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/rendering-ui/twoslash-highlight)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.