Skip to Content
🎉 Nextra 4.0 is released. dimaMachina is looking for a new job or consulting .

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

  1. Parameters table, including:

    • Name
    • Type and description
    • Default value
    • Permalink
  2. 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

NameTypeDefault
definitionGeneratedType | 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} /> }
typeLinkMapRecord<string, string>

Type links map.

{}
noParametersContentReactNode

Custom content to display when a function has no parameters.

<Callout type="info">This function does not accept any parameters.</Callout>

generateDocumentation signature

Parameters:
NameTypeDefault
[0].codestring

TypeScript source code to be processed.

[0].exportNamestring

The name of the exported declaration.

"default"
[0].flattenedboolean

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.

NameTypeDefault
foo"not dimaMachina"

Foo description.

"dimaMachina"
Last updated on