`TSDoc` Component

A built-in component lets you generate 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.

Exported from nextra/tsdoc.

Props

Name	Type	Default
`definition`	`GeneratedDefinition & (GeneratedType \| GeneratedFunction)` Parsed `type`, `interface` or `function` definition from `generateDefinition` 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>`

Example

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


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

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