@tuicomponents/tree

Renders hierarchical data as an ASCII/Unicode tree

Installation

pnpm add @tuicomponents/tree

Quick Start

import { createTree } from "@tuicomponents/tree";
import { createRenderContext } from "@tuicomponents/core";

const component = createTree();
const context = createRenderContext();

const result = component.render(
  {
    root: {
      label: "root",
      children: [
        {
          label: "folder1",
          children: [
            {
              label: "file1.txt",
            },
            {
              label: "file2.txt",
            },
          ],
        },
        {
          label: "folder2",
          children: [
            {
              label: "file3.txt",
            },
          ],
        },
      ],
    },
  },
  context
);
console.log(result.output);

Examples

basic

Simple tree structure

{
  "root": {
    "label": "root",
    "children": [
      {
        "label": "folder1",
        "children": [
          {
            "label": "file1.txt"
          },
          {
            "label": "file2.txt"
          }
        ]
      },
      {
        "label": "folder2",
        "children": [
          {
            "label": "file3.txt"
          }
        ]
      }
    ]
  }
}

project-structure

Project directory structure

{
  "root": {
    "label": "my-project",
    "children": [
      {
        "label": "src",
        "children": [
          {
            "label": "index.ts"
          },
          {
            "label": "utils.ts"
          },
          {
            "label": "types.ts"
          }
        ]
      },
      {
        "label": "tests",
        "children": [
          {
            "label": "index.test.ts"
          }
        ]
      },
      {
        "label": "package.json"
      },
      {
        "label": "tsconfig.json"
      },
      {
        "label": "README.md"
      }
    ]
  }
}

Configuration Options

| Property | Type | Required | Default | Description | | ---------- | --------- | --------- | ---------- | ----------- | --- | --- | | root | object | object[] | ✓ | - | - | | style | "ascii" | "unicode" | "compact" | | - | - | | showRoot | boolean | | - | - | | indent | number | | - | - |

Render Modes

The component supports three render modes:

• ANSI: Rich terminal output with colors and Unicode characters
• Markdown: Plain text suitable for AI assistants and documentation
• Grayscale: ANSI output without colors (for terminals that don't support color)

You can specify the render mode when creating the context:

import { createRenderContext } from "@tuicomponents/core";

// ANSI mode (default)
const ansiContext = createRenderContext({ renderMode: "ansi" });

// Markdown mode
const mdContext = createRenderContext({ renderMode: "markdown" });

// Grayscale mode
const grayscaleContext = createRenderContext({ renderMode: "grayscale" });

API

For detailed API documentation, see the API docs.

License

UNLICENSED