TSDoc Component

A component for generating documentation from type, interface, and function definitions using TSDoc annotations.

What it generates

For `type` and `interface`

Generates a properties table with:

Name
Type and description
Default Value
Permalink

For `function`

Parameters table, including:
- Name
- Type and description
- Default value
- Permalink
Return signature table, including:
- Description
- Return values table

Tip

Permalink is a # anchor link for easy reference to individual rows.
Descriptions are parsed from inline TSDoc comments or the @description tag.
Supports full Markdown/MDX syntax in descriptions.
Default values are extracted from the @default or @defaultValue tags.
Return descriptions come from the @returns tag.

Warning

Server Component Only – TSDoc component cannot be used in a client component.
Available from: Nextra 4.3 (alpha).
Dependency: Uses TypeScript Compiler API from ts-morph.

API

`TSDoc` props

Name	Type	Default
`definition`	`GeneratedType \| GeneratedFunction` Parsed `type`, `interface` or `function` definition from `generateDocumentation` function.
`renderMarkdown`	`(description?: string \| undefined) => Promise<ReactNode>` Override the function to render markdown into JSX nodes.	`async function renderMarkdownDefault(description?: string): Promise<ReactNode> { if (!description) return const rawJs = await compileMdx(description) return <MDXRemote compiledSource={rawJs} /> }`
`typeLinkMap`	`Record<string, string>` Type links map.	`{}`
`noParametersContent`	`ReactNode` Custom content to display when a function has no parameters.	`<Callout type="info">This function does not accept any parameters.</Callout>`

`generateDocumentation` signature

Parameters:

Name	Type	Default
`[0].code`	`string` TypeScript source code to be processed.
`[0].exportName`	`string` The name of the exported declaration.	`"default"`
`[0].flattened`	`boolean` Whether to flatten nested objects. E.g. `{ foo: { bar: string } }` will be represented as: `{ foo.bar: string }`	`false`

Returns:

GeneratedType | GeneratedFunction

Parsed TSDoc definition from TypeScript type, interface or function.

Example

To generate the props table for the TSDoc component shown on this page:


import { generateDocumentation, TSDoc } from 'nextra/tsdoc'
 
<TSDoc
  definition={generateDocumentation({
    code: `
import type { TSDoc } from 'nextra/tsdoc'
type MyProps = React.ComponentProps<typeof TSDoc>
export default MyProps`
  })}
/>

To generate the function signature table for generateDocumentation function:


import { generateDocumentation, TSDoc } from 'nextra/tsdoc'
 
<TSDoc
  definition={generateDocumentation({
    code: "export type { generateDocumentation as default } from 'nextra/tsdoc'",
    flattened: true
  })}
/>

Overriding a type

You can override the inferred type using the @remarks tag using backticks (`).


type Example = {
  /**
   * **Foo** description.
   * @default "dimaMachina"
   * @remarks `"not dimaMachina"`
   */
  foo: string
}

In this example, while the actual type of the property foo is string, the displayed type will be "not dimaMachina" as per the @remarks tag.

Name	Type	Default
`foo`	`"not dimaMachina"` Foo description.	`"dimaMachina"`

TSDoc Component

What it generates

For type and interface

For function

API

TSDoc props

generateDocumentation signature