TypeTree

Display recursive type structures with expandable nested properties

The TypeTree component provides an elegant way to document complex type structures with nested properties. It automatically handles recursive rendering and provides an intuitive expandable interface for exploring deeply nested types.

Basic Usage

Import the component and pass it the type information.

TypeTree usage

import { TypeTree, TypeTreeGroup } from "/snippets/tsdocs/TypeTree.jsx"

const databaseField: TypeTreeProperty = {
  name: "database",
  type: "object",
  description: "Database configuration",
  required: true,
  properties: [
    { name: "host", type: "string", description: "Database host address", required: true },
    { name: "port", type: "number", description: "Database port number", defaultValue: "5432" },
    {
      name: "credentials",
      type: "object",
      description: "Database authentication credentials",
      properties: [
        { name: "username", type: "string", required: true },
        { name: "password", type: "string", required: true }
      ]
    }
  ]
};

<TypeTree {...databaseField} />

The TypeTree component will recurse through the properties using the ResponseField and Expandable Mintlify components to display the type information.

TypeTree Preview

Using the Auto-generated TypeInfo

When you run mint-tsdocs generate, it automatically creates a TypeInfo.jsx file containing structured type information for all documented API items. This makes it incredibly easy to document your types with full IDE autocomplete support.

Learn more about TypeInfo in the comprehensive TypeInfo guide, including how to explore available types, access nested properties, and best practices.

Quick Start

Simply import TypeInfo and spread it into a TypeTree component:

Document any type from your API

import { TypeInfo } from "/snippets/tsdocs/TypeInfo.jsx"

<TypeTree {...TypeInfo.PackageName.TypeName} />

The TypeInfo object is organized as TypeInfo.PackageName.TypeName, where package names are converted to PascalCase. For example, mint-tsdocs becomes MintTsdocs.

Live Example

Here’s the complete ResolvedConfig type from mint-tsdocs, automatically generated with full nested documentation:

Auto-generated from TypeScript source

IDE Autocomplete

Your IDE will provide autocomplete suggestions when you type TypeInfo. - making it easy to discover and reference all available types from your codebase.

Import Path Workaround

Due to a bug in the MDX extension for VSCode, you may not get TypeScript autocomplete with the absolute path. As a temporary workaround while editing:

1. Change import to relative path: import { TypeInfo } from "../snippets/tsdocs/TypeInfo.jsx"
2. Get autocomplete and make your changes
3. Change back to absolute path: import { TypeInfo } from "/snippets/tsdocs/TypeInfo.jsx"
4. Save and commit

The absolute path is required for the documentation site to load correctly.

Exploring Available Types

To see what types are available:

1. Check the generated file: Open docs/snippets/tsdocs/TypeInfo.jsx to browse all types
2. Use your IDE: Start typing TypeInfo. and let autocomplete show available packages and types
3. Check the TypeScript declarations: Open docs/snippets/tsdocs/TypeInfo.d.ts for the full type structure

For a complete guide on using TypeInfo, see the TypeInfo documentation.

Properties

name · string · required

The name of the property or type being documented

type · string · required

The TypeScript type annotation (e.g., string, number, object, Array<string>)

description · string

Human-readable description of what this property represents

required · boolean · default: "false"

Whether this property is required. Displays a red “required” badge when true

deprecated · boolean · default: "false"

Whether this property is deprecated. Displays an orange “deprecated” badge when true

defaultValue · string

The default value for this property, if any. Displayed below the description

properties · array

Array of nested properties for complex types. Each item should be an object with the same structure as TypeTree props

level · number · default: "0"

Internal property for tracking nesting depth. Automatically managed by the component (don’t set manually)

Nested Objects

TypeTree automatically renders nested properties with expandable sections. This example demonstrates 3 levels of nesting, showcasing the auto-expansion behavior:

Preview

apiConfig · object · required

API configuration settings

This example demonstrates the three-level nesting structure:

• Level 1: endpoint, authentication, retry (all expanded by default)
• Level 2: Under authentication: method, credentials, refreshToken; Under retry: maxAttempts, backoffMs, retryableErrors (all expanded by default)
• Level 3: Under credentials: clientId, clientSecret, scopes; Under retryableErrors: network, timeout, serverError (expanded by default per auto-expansion rules)

Auto-Expansion Behavior

TypeTree automatically expands the first two levels of nesting for better discoverability:

• Level 0 (root): Always visible
• Level 1: Expanded by default
• Level 2: Expanded by default
• Level 3+: Collapsed by default (user must click to expand)

This provides an optimal balance between information density and discoverability.

Grouping Multiple Types

Use TypeTreeGroup to organize multiple related types:

Preview

Request Parameters

id · string · required

Unique identifier

options · object

Optional configuration

Complex Type Examples

Union Types

Preview

status · 'pending' | 'active' | 'completed' · required

Current status of the task

Array Types

Preview

tags · Array<string>

List of tags associated with the item

Generic Types

Preview

response · Promise<Result<T>>

Async operation result

Function Types

Preview

handler · (event: Event) => void · required

Event handler callback

Deprecated Properties

Mark deprecated properties with the deprecated flag:

Preview

oldField · string · deprecated

This field is deprecated. Use 'newField' instead.

Optional vs Required

The component automatically displays badges for required and optional properties:

Preview

User Fields

email · string · required

User email address

phone · string

User phone number

Best Practices

Use Clear Descriptions

Write descriptions that explain what the property does and why it exists, not just restating the type.

// ❌ Not helpful
<TypeTree
  name="timeout"
  type="number"
  description="A number"
/>

// ✅ Clear and helpful
<TypeTree
  name="timeout"
  type="number"
  description="Maximum time in milliseconds to wait for a response before aborting"
  defaultValue="5000"
/>

Include Default Values

Always document default values to help users understand the expected behavior:

<TypeTree
  name="retries"
  type="number"
  description="Number of retry attempts for failed requests"
  defaultValue="3"
/>

Organize Complex Structures

For very complex types with many properties, use TypeTreeGroup to create logical sections:

<TypeTreeGroup title="Authentication Options">
  <TypeTree name="apiKey" type="string" />
  <TypeTree name="token" type="string" />
</TypeTreeGroup>

<TypeTreeGroup title="Request Options">
  <TypeTree name="timeout" type="number" />
  <TypeTree name="retries" type="number" />
</TypeTreeGroup>

Keep Nesting Reasonable

While TypeTree supports unlimited nesting, try to limit depth to 3-4 levels for readability. Consider breaking very deep structures into separate documentation pages.

Styling and Theming

TypeTree automatically adapts to Mintlify’s light and dark themes using Tailwind CSS:

• Light mode: Uses gray borders and backgrounds
• Dark mode: Uses darker backgrounds with lighter borders
• Hover states: Subtle background changes on expandable items
• Badges: Color-coded for required (red), deprecated (orange), optional (gray)

Comparison with ParamField

TypeTree is designed as a cleaner alternative to deeply nested ParamField components:

TypeTree (Recommended)

<TypeTree
  name="config"
  type="object"
  properties={[
    { name: "host", type: "string", required: true },
    { name: "port", type: "number", defaultValue: "5432" }
  ]}
/>

Advantages:

• Single component declaration
• Easy to maintain
• Properties defined as data
• Built-in expansion logic

Auto-Generated Documentation

When using mint-tsdocs to generate API documentation, TypeTree components are automatically created for complex type structures:

1. The tool analyzes TypeScript types
2. Extracts nested property information
3. Generates TypeTree components with full type information
4. Installs the component to your docs/snippets/ folder

This means you get clean, maintainable documentation without manual work!

Troubleshooting

Component not found

If you see Cannot find module "/snippets/TypeTree.jsx":

1. Ensure TypeTree.jsx exists in your docs/snippets/ folder
2. Run mint-tsdocs to auto-install the component
3. Check that the import path is correct (should start with /snippets/)

Properties not expanding

If nested properties don’t expand when clicked:

1. Verify the properties array is properly formatted JSON
2. Check browser console for JavaScript errors
3. Ensure each nested property has at least name and type fields

Styling issues

If the component doesn’t look right:

1. Ensure Tailwind CSS is properly loaded in your Mintlify site
2. Check that you’re using an up-to-date version of the component
3. Try refreshing the page to reload styles

Version History

v1.0.0

Initial release with full recursive rendering support

Future

• Syntax highlighting for code examples
• Copy-to-clipboard for type definitions
• Collapsible all/expand all controls

Related Components

RefLink

Type-safe API reference links

PageLink

Type-safe documentation page links

Preview

Styled wrapper for examples

ParamField

Standard Mintlify component for parameters

ResponseField

Document API response structures

Expandable

Create expandable sections