--- title: "TypeScript Type Table Extraction" description: "TypeScript type table extraction bridges raw source code types and rendered documentation interfaces by automatically inspecting TypeScript files, parsing JSDoc annotations, and transforming proper..." last_updated: "2026-10-12T07:53:59.736226+00:00" canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/developer-tooling/typescript-type-table-extraction" ---
Relevant source files The following files were used as context for generating this wiki page: - [packages/typescript/src/lib/type-table.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/type-table.ts) - [packages/typescript/src/lib/base.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts) - [packages/typescript/src/lib/remark-auto-type-table.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts) - [packages/typescript/src/ui/auto-type-table.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/auto-type-table.tsx) - [packages/python/src/convert.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/python/src/convert.ts) - [packages/mdx/src/runtime/server.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/mdx/src/runtime/server.ts) - [packages/typescript/src/lib/parse-tags.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts) - [packages/story/src/type-tree/builder.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/story/src/type-tree/builder.ts) - [packages/python/src/generated.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/python/src/generated.ts) - [packages/content/src/index.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/content/src/index.ts) - [packages/story/src/utils/generate.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/story/src/utils/generate.ts) - [packages/doc-gen/src/remark-ts2js.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/doc-gen/src/remark-ts2js.ts) - [packages/api-docs/src/components/schema/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/api-docs/src/components/schema/index.tsx) - [packages/typescript/src/ui/index.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/index.ts) - [packages/base-ui/src/components/type-table.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/components/type-table.tsx) - [packages/asyncapi/src/server/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/asyncapi/src/server/index.tsx) - [packages/twoslash/src/index.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/twoslash/src/index.ts) - [packages/core/src/mdx-plugins/remark-structure.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/core/src/mdx-plugins/remark-structure.ts) - [packages/typescript/src/index.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/index.ts) - [packages/radix-ui/src/components/type-table.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/components/type-table.tsx) - [packages/typescript/src/markdown.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/markdown.ts) - [packages/python/fumapy/mksource/document_module.py](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/python/fumapy/mksource/document_module.py) - [packages/content/src/runtime.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/content/src/runtime.ts) - [packages/preview/src/lib/source/storage.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/preview/src/lib/source/storage.ts) - [packages/python/src/components/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/python/src/components/index.tsx) - [packages/openapi/src/utils/schema.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/openapi/src/utils/schema.ts) - [packages/mdx/src/runtime/types.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/mdx/src/runtime/types.ts) - [packages/mdx/src/plugins/index-file.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/mdx/src/plugins/index-file.ts) - [packages/content-collections/src/configuration.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/content-collections/src/configuration.ts) - [packages/doc-gen/src/remark-docgen.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/doc-gen/src/remark-docgen.ts)
## Overview TypeScript type table extraction bridges raw source code types and rendered documentation interfaces by automatically inspecting TypeScript files, parsing JSDoc annotations, and transforming property definitions into interactive API tables [packages/typescript/src/lib/base.ts:1-164](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L1-L164), [packages/typescript/src/ui/auto-type-table.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/auto-type-table.tsx#L1-L80). Powered by `ts-morph` and unified remark plugins, the system extracts symbol metadata, processes tags like `@default` and `@param`, and serializes structured property entries for compile-time MDX replacement and runtime client rendering [packages/typescript/src/lib/base.ts:167-230](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L167-L230), [packages/typescript/src/lib/remark-auto-type-table.ts](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L108). Sources: [packages/typescript/src/lib/base.ts:1-164](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L1-L164), [packages/typescript/src/lib/base.ts:167-230](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L167-L230), [packages/typescript/src/lib/remark-auto-type-table.ts:49-108](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L108), [packages/typescript/src/ui/auto-type-table.tsx:1-80](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/auto-type-table.tsx#L1-L80) ## Type Table Generator Architecture ### Generator Factory and Configuration The type table generator exposes public APIs for initializing type inspection environments and processing source declarations. The `createGenerator` function accepts `GeneratorOptions`, configuring optional project instances and cache mechanisms. If no custom `Project` instance is provided via `options.project`, `createProject` instantiates a new `ts-morph` `Project` pointing to `tsconfigPath` (defaulting to `./tsconfig.json`) with `skipAddingFilesFromTsConfig` set to `true`. ```typescript export async function createProject(options: TypescriptConfig = {}): Promise { const { Project } = await import('ts-morph'); return new Project({ tsConfigFilePath: options.tsconfigPath ?? './tsconfig.json', skipAddingFilesFromTsConfig: true, }); } export function createGenerator(options: GeneratorOptions = {}) { const cache = options?.cache ? options.cache : null; let instance: Project | Promise | undefined = options?.project; function getProject() { if (instance) return instance; return (instance = createProject(options)); } ``` Sources: [packages/typescript/src/lib/base.ts:86-101](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L86-L101) | Option Property | Type | Default Value | Purpose | | :--- | :--- | :--- | :--- | | `tsconfigPath` | `string` | `'./tsconfig.json'` | Path to the TypeScript configuration file. | | `cache` | `Cache \| false` | `false` | Enables caching for generated documentation results. | | `project` | `Project` | `undefined` | Pre-instantiated `ts-morph` project instance. | | `allowInternal` | `boolean` | `false` | Allows fields tagged with `@internal`. | | `transform` | `Transformer` | `undefined` | Custom function to modify property documentation entries. | | `typeSimplifier` | `TypeSimplifierOptions` | `undefined` | Configuration options for type simplification. | Sources: [packages/typescript/src/lib/base.ts:53-84](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L53-L84) > [!NOTE] > When `options.cache` is active, documentation output is hashed using `generateHash` incorporating the file path, export name, file content, and package version before consulting the cache store. Sources: [packages/typescript/src/lib/base.ts:94-95](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L94-L95), [packages/typescript/src/lib/base.ts:129-134](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L129-L134) ### Type Table Properties and Output Resolution The `BaseTypeTableProps` and `GenerateTypeTableOptions` interfaces govern how individual type tables are located and generated from file paths or inline type definitions. The `getTypeTableOutput` helper resolves relative file paths against an optional `basePath`, reads source files asynchronously, and handles inline type strings. ```typescript export interface BaseTypeTableProps { /** * The path to source TypeScript file. */ path?: string; /** * Exported type name to generate from. */ name?: string; /** * Set the type to generate from. * * When used with `name`, it generates the type with `name` as export name. * * ```ts * export const myName = MyType; * ``` * * When `type` contains multiple lines, `export const` is not added. * You need to export it manually, and specify the type name with `name`. * * ```tsx * * ``` */ type?: string; } export interface GenerateTypeTableOptions extends GenerateOptions { /** * base path to resolve `path` prop */ basePath?: string; } ``` Sources: [packages/typescript/src/lib/type-table.ts:5-45](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/type-table.ts#L5-L45) When `type` contains multiple lines, it is appended directly to the file content without modification. If `type` is a single line, it is wrapped in an exported type declaration using the specified `name` or falling back to `$Fumadocs`. ```typescript if (type && type.split('\n').length > 1) { content += `\n${type}`; } else if (type) { typeName ??= '$Fumadocs'; content += `\nexport type ${typeName} = ${type}`; } ``` Sources: [packages/typescript/src/lib/type-table.ts:61-66](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/type-table.ts#L61-L66) > [!WARNING] > If a requested export `name` is provided but yields an empty documentation output array, `getTypeTableOutput` throws an error stating that the export does not exist in the target file. Sources: [packages/typescript/src/lib/type-table.ts:74-75](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/type-table.ts#L74-L75) ## Abstract Syntax Tree Extraction Pipeline ### AST Processing and Call-Chain Execution The AST extraction pipeline processes documentation requests through a strict sequence of calls initiated by remark plugins and handled by generator modules. The execution trace flows through `remarkAutoTypeTable` to `createGenerator`, then invokes `generate` before iterating over individual properties via `getDocEntry`. ```mermaid sequenceDiagram participant remarkAutoTypeTable as remark-auto-type-table.ts participant createGenerator as base.ts (createGenerator) participant generate as base.ts (generate) participant getDocEntry as base.ts (getDocEntry) remarkAutoTypeTable->>createGenerator: generateTypeTable(props, options) createGenerator->>generate: generate(id, name, entryContext) generate->>getDocEntry: getDocEntry(prop, entryContext) ``` Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:183-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L183-L186), [packages/typescript/src/lib/base.ts:153-153](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L153-L153), [packages/typescript/src/lib/base.ts:180-180](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L180-L180) 1. `remarkAutoTypeTable` triggers `generator.generateTypeTable` with configuration options and resolved paths. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:183-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L183-L186) 2. `createGenerator` resolves the source file within the `ts-morph` project instance and iterates over exported declarations matching the target name. Sources: [packages/typescript/src/lib/base.ts:136-141](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L136-L141) 3. `generate` constructs an `EntryContext`, extracts top-level documentation comments, and retrieves all type properties. Sources: [packages/typescript/src/lib/base.ts:167-182](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L167-L182) 4. `getDocEntry` inspects each property symbol, evaluating JSDoc tags, optional status, and formatting types via `ts-morph` and type simplifiers. Sources: [packages/typescript/src/lib/base.ts:192-229](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L192-L229) > [!WARNING] > If a class declaration property name starts with a hash character (`#`), `getDocEntry` immediately returns `undefined` to filter out private class fields. Sources: [packages/typescript/src/lib/base.ts:196-198](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L196-L198) ### Symbol Analysis and Declaration Handling The `generate` function extracts top-level documentation comments from compiler symbols using `getDocumentationComment` with the program's type checker compiler object, converting display parts into strings via `ts.displayPartsToString`. ```typescript const comment = declaration .getSymbol() ?.compilerSymbol.getDocumentationComment(program.getTypeChecker().compilerObject); ``` Sources: [packages/typescript/src/lib/base.ts:175-177](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L175-L177) For each property symbol discovered on the declaration type, `getDocEntry` evaluates tags and formats types using `ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope` combined with `ts.TypeFormatFlags.NoTruncation`. ```typescript type: subType.getText( context.declaration, ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope | ts.TypeFormatFlags.NoTruncation, ), ``` Sources: [packages/typescript/src/lib/base.ts:219-222](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L219-L222) > [!IMPORTANT] > When `allowInternal` is disabled (default `false`), any property containing an `@internal` JSDoc tag causes `getDocEntry` to abort and omit the entry entirely. Sources: [packages/typescript/src/lib/base.ts:204-205](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/base.ts#L204-L205) ## Tag Parsing and Metadata Extraction ### Call-Chain Execution Walkthrough The extraction of metadata from JSDoc tags follows a precise sequence starting from the remark plugin AST traversal down to individual tag parsing. 1. `remarkAutoTypeTable` initializes the transformation and invokes `generate` on the generator instance. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:183-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L183-L186) 2. `generate` processes document entries and passes them to `buildTypeProp` for property-level AST construction. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:49-52](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L52) 3. `buildTypeProp` executes `onItem` for each individual `DocEntry` record. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:53-53](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L53-L53) 4. `onItem` calls `parseTags` passing the raw tag array attached to the entry. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:55-55](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L55-L55) 5. `parseTags` iterates over the raw tags, mapping recognized field names into structured `TypedTags` objects. Sources: [packages/typescript/src/lib/parse-tags.ts:17-44](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts#L17-L44) ```mermaid sequenceDiagram participant remarkAutoTypeTable as remark-auto-type-table.ts participant generate as remark-auto-type-table.ts (generate) participant buildTypeProp as remark-auto-type-table.ts (buildTypeProp) participant onItem as remark-auto-type-table.ts (onItem) participant parseTags as parse-tags.ts (parseTags) remarkAutoTypeTable->>generate: generateTypeTable() generate->>buildTypeProp: buildTypeProp(doc.entries, renderer) buildTypeProp->>onItem: onItem(entry) onItem->>parseTags: parseTags(entry.tags) ``` Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:49-55](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L55), [packages/typescript/src/lib/remark-auto-type-table.ts:183-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L183-L186), [packages/typescript/src/lib/parse-tags.ts:17-17](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts#L17-L17) ### Tag Interpretation and Field Mapping The `parseTags` function inspects each `RawTag` item, evaluating its name key to extract configuration values, parameter lists, and return descriptions. When the tag name matches `default` or `defaultValue`, the text content is assigned directly to `typed.default`. ```typescript for (const { name: key, text } of tags) { if (key === 'default' || key === 'defaultValue') { typed.default = text; continue; } ``` Sources: [packages/typescript/src/lib/parse-tags.ts:20-24](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts#L20-L24) For `param` tags, text parsing splits strings around the first hyphen (`-`) separator to isolate the parameter name from its descriptive text. If no hyphen is present, the entire trimmed text serves as the parameter name with an empty description. ```typescript if (key === 'param') { const sepIdx = text.indexOf('-'); const param = sepIdx === -1 ? text.trim() : text.slice(0, sepIdx).trim(); const description = sepIdx === -1 ? '' : text.slice(sepIdx + 1).trim(); typed.params ??= []; typed.params.push({ name: param, description, }); continue; } ``` Sources: [packages/typescript/src/lib/parse-tags.ts:26-37](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts#L26-L37) | Tag Name Key | Mapped TypedTags Property | Interpretation Logic | | :--- | :--- | :--- | | `default`, `defaultValue` | `default` | Assigns raw text value directly to the default property. | | `param` | `params` | Splits text at the first `-` character into parameter name and description. | | `returns` | `returns` | Assigns return documentation text directly to the returns property. | Sources: [packages/typescript/src/lib/parse-tags.ts:20-41](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts#L20-L41) > [!NOTE] > Unrecognized tag names encountered during the iteration loop in `parseTags` are silently ignored without throwing errors or populating structured properties. Sources: [packages/typescript/src/lib/parse-tags.ts:20-43](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/parse-tags.ts#L20-L43) ## Markdown Transformation and AST Replacement ### Remark Plugin Traversal and Execution Flow The `remarkAutoTypeTable` plugin operates as a unified transformer, walking the markdown Abstract Syntax Tree to locate automatic type table directives and replace them with interactive MDX flow elements. The plugin initializes a markdown renderer using either custom render options or the default `markdownRenderer` configured with Shiki [syntax highlighting](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/core-architecture/syntax-highlighting). ```typescript export function remarkAutoTypeTable( config: RemarkAutoTypeTableOptions = {}, ): Transformer { const { name = 'auto-type-table', outputName = 'TypeTable', options: generateOptions = {}, remarkStringify = true, generator = createGenerator(), renderMarkdown, renderType, shiki, } = config; let renderer: MarkdownRenderer; if (renderMarkdown && renderType) { renderer = { renderMarkdownToHast: renderMarkdown, renderTypeToHast: renderType }; } else { renderer = markdownRenderer(shiki); if (renderMarkdown) renderer.renderMarkdownToHast = renderMarkdown; if (renderType) renderer.renderTypeToHast = renderType; } ``` Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:150-172](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L150-L172) During AST traversal, the execution walkthrough follows a strict call chain from the remark transformer down to object expression builders: 1. `remarkAutoTypeTable` processes document entries and invokes `generate`. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:173-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L173-L186) 2. `generate` calls `buildTypeProp` passing document entries and the markdown renderer. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:49-52](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L52) 3. `buildTypeProp` executes `onItem` for each individual `DocEntry` record. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:53-53](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L53-L53) 4. `onItem` invokes `objectBuilder` to construct property-level expression objects. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:54-54](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L54-L54) 5. `objectBuilder` accumulates property nodes and expression statements for estree serialization. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:15-35](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L15-L35) ```mermaid sequenceDiagram participant remarkAutoTypeTable as remark-auto-type-table.ts participant generate as remark-auto-type-table.ts (generate) participant buildTypeProp as remark-auto-type-table.ts (buildTypeProp) participant onItem as remark-auto-type-table.ts (onItem) participant objectBuilder as remark-auto-type-table.ts (objectBuilder) remarkAutoTypeTable->>generate: generate(...) generate->>buildTypeProp: buildTypeProp(doc.entries, renderer) buildTypeProp->>onItem: onItem(entry) onItem->>objectBuilder: objectBuilder() ``` Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:49-54](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L54), [packages/typescript/src/lib/remark-auto-type-table.ts:173-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L173-L186), [packages/typescript/src/lib/remark-auto-type-table.ts:15-20](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L15-L20) ### Prop Synthesis and AST Node Substitution The `buildTypeProp` function constructs an Estree `ObjectExpression` mapping property names to their serialized metadata. Each entry renders its simplified type, full type description, required flag, default value, return description, parameters, and deprecation status into hast nodes before converting them into estree expressions. ```typescript async function buildTypeProp( entries: DocEntry[], renderer: MarkdownRenderer, ): Promise { async function onItem(entry: DocEntry) { const node = objectBuilder(); const tags = parseTags(entry.tags); node.addJsxProperty('type', await renderer.renderTypeToHast(entry.simplifiedType)); node.addJsxProperty('typeDescription', await renderer.renderTypeToHast(entry.type)); node.addExpressionNode('required', valueToEstree(entry.required)); if (entry.typeHref) node.addExpressionNode('typeDescriptionLink', valueToEstree(entry.typeHref)); if (tags.default) node.addJsxProperty('default', await renderer.renderTypeToHast(tags.default)); if (tags.returns) node.addJsxProperty('returns', await renderer.renderMarkdownToHast(tags.returns)); if (tags.params) { node.addExpressionNode('parameters', { type: 'ArrayExpression', elements: await Promise.all(tags.params.map(onParam)), }); } if (entry.description) { node.addJsxProperty('description', await renderer.renderMarkdownToHast(entry.description)); } if (entry.deprecated) { node.addExpressionNode('deprecated', valueToEstree(true)); } return node.build(); } ``` Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:49-84](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L49-L84) The generated output forms an `MdxJsxFlowElement` node carrying attributes for the table ID, stringified JSON fallback, and embedded estree program body. ```typescript const rendered: MdxJsxFlowElement[] = []; for (const doc of output) { rendered.push({ type: 'mdxJsxFlowElement', name: outputName, attributes: [ { type: 'mdxJsxAttribute', name: 'id', value: `type-table-${doc.id}`, }, { type: 'mdxJsxAttribute', name: 'type', value: { type: 'mdxJsxAttributeValueExpression', value: remarkStringify ? JSON.stringify(doc, null, 2) : '', data: { estree: { type: 'Program', sourceType: 'module', body: [ { type: 'ExpressionStatement', expression: await buildTypeProp(doc.entries, renderer), }, ], }, }, }, }, ...attributes, ], children: [], }); } ``` Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:187-223](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L187-L223) > [!WARNING] > When `remarkStringify` is enabled in configuration options, `JSON.stringify` populates the attribute value string alongside the compiled estree program expression to support legacy stringifiers. Sources: [packages/typescript/src/lib/remark-auto-type-table.ts:157-157](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L157-L157), [packages/typescript/src/lib/remark-auto-type-table.ts:202-205](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/lib/remark-auto-type-table.ts#L202-L205) ## Interactive Client Table Rendering ### Runtime Component and Hast Conversion The `AutoTypeTable` component provides server-side or runtime rendering for interactive type tables by invoking the specified generator and transforming parsed doc entries into UI nodes. When `renderType` and `renderMarkdown` functions are omitted from `AutoTypeTableProps`, a default Markdown renderer initialized with Shiki options converts type signatures and docstrings into hast trees, which `toJsx` then transforms into React elements using `toJsxRuntime`. ```tsx export async function AutoTypeTable({ generator, options, renderType, renderMarkdown, shiki, name, path, type, ...props }: AutoTypeTableProps) { if (!renderType || !renderMarkdown) { const renderer = markdownRenderer(shiki); renderType ??= async (v) => toJsx(await renderer.renderTypeToHast(v)); renderMarkdown ??= async (v) => toJsx(await renderer.renderMarkdownToHast(v)); } ``` Sources: [packages/typescript/src/ui/auto-type-table.tsx:23-38](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/auto-type-table.tsx#L23-L38) The helper function `toJsx` wraps `toJsxRuntime` with the React JSX runtime and default MDX components while explicitly setting the `img` component override to `undefined`. ```tsx function toJsx(hast: Nodes) { return toJsxRuntime(hast, { ...JsxRuntime, components: { ...defaultMdxComponents, img: undefined }, }); } ``` Sources: [packages/typescript/src/ui/auto-type-table.tsx:81-86](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/auto-type-table.tsx#L81-L86) > [!NOTE] > The `AutoTypeTable` component exports from `packages/typescript/src/ui/index.ts`, making it available for direct inclusion in client and server component contexts. Sources: [packages/typescript/src/ui/index.ts:1-1](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/typescript/src/ui/index.ts#L1-L1) ### Table Display and Collapsible Row Management The `TypeTable` component from `fumadocs-ui` renders a container holding individual property rows using the `Item` subcomponent, utilizing translation notes keyed by `type table`. Each entry maps property keys to `TypeNode` definitions containing type elements, descriptions, defaults, required flags, and parameter lists. ```tsx export function TypeTable({ id, type, className, ...props }: { type: Record } & ComponentProps<'div'>) { const t = useTranslations({ note: 'type table' }); return (

{t('Prop')}

{t('Type')}

{Object.entries(type).map(([key, value]) => ( ))}
); } ``` Sources: [packages/radix-ui/src/components/type-table.tsx:52-78](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/components/type-table.tsx#L52-L78) | Property | Type / Interface | Default / Meaning | | :--- | :--- | :--- | | `description` | `ReactNode` | Additional description of the field. | | `type` | `ReactNode` | Short type signature displayed in the main row view. | | `typeDescription` | `ReactNode` | Full type signature displayed in the collapsible drawer. | | `typeDescriptionLink` | `string` | Optional hyperlink destination for the type. | | `default` | `ReactNode` | Default value expression or tag rendering. | | `required` | `boolean` | Indicates if the property is mandatory (`false` appends `?`). | | `deprecated` | `boolean` | Applies line-through and muted styling when active. | | `parameters` | `ParameterNode[]` | List of parameter names and descriptions for function types. | | `returns` | `ReactNode` | Return value description for function types. | Sources: [packages/radix-ui/src/components/type-table.tsx:11-48](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/components/type-table.tsx#L11-L48) The `Item` component wraps each table row inside a `Collapsible` primitive, synchronizing open state changes with browser history hash updates so that deep links matching `#${parentId}-${name}` automatically expand the targeted property row upon load. ```tsx function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns, }, }: { parentId?: string; name: string; item: TypeNode; }) { const t = useTranslations({ note: 'type table' }); const [open, setOpen] = useState(false); const id = parentId ? `${parentId}-${name}` : undefined; useEffect(() => { const hash = window.location.hash; if (!id || !hash) return; if (`#${id}` === hash) setOpen(true); }, [id]); return ( { if (v && id) { window.history.replaceState(null, '', `#${id}`); } setOpen(v); }} className={cn( 'rounded-xl border overflow-hidden scroll-m-20 transition-all', open ? 'shadow-sm bg-fd-background not-last:mb-2' : 'border-transparent', )} > ``` Sources: [packages/radix-ui/src/components/type-table.tsx:80-123](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/components/type-table.tsx#L80-L123) > [!WARNING] > If a window location hash matches a property row identifier on mount, the `useEffect` hook forces `open` to `true`, overriding default closed states for direct URL navigation. Sources: [packages/radix-ui/src/components/type-table.tsx:103-107](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/components/type-table.tsx#L103-L107) ## Related - [Twoslash Type Hover](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/developer-tooling/twoslash-type-hover) ## Sitemap See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.