Tree

Status: Planned — Tree is designed for the upcoming @bettertui/react adapter. It is not yet available in @bettertui/core.

Tree will display hierarchical data with expand / collapse and keyboard navigation.

Planned API

import { Tree } from '@bettertui/react';

const data = {
  name: 'root',
  children: [
    {
      name: 'src',
      children: [
        { name: 'App.tsx' },
        { name: 'index.tsx' },
      ],
    },
    { name: 'package.json' },
  ],
};

function App() {
  return (
    <Tree
      data={data}
      onSelect={(node) => console.log('Selected:', node.name)}
    />
  );
}

Planned Props

Prop	Type	Default	Description
data	TreeNode	—	Tree data (root node)
onSelect	(node: TreeNode) => void	—	Node selection handler
onToggle	(node: TreeNode) => void	—	Expand / collapse handler

Planned TreeNode Type

interface TreeNode {
  name: string;
  children?: TreeNode[];
  icon?: string;
  isExpanded?: boolean;
}

Planned Keyboard Navigation

Key	Action
Up / Down	Navigate nodes
Left	Collapse or move to parent
Right	Expand or move to first child
Enter	Select node
Home / End	Jump to first / last node

Vanilla Alternative

Build a tree view using Box and Text with expand / collapse state:

import { Box, Text, createCliRenderer } from '@bettertui/core';

const renderer = await createCliRenderer({ exitOnCtrlC: true });

function buildTree(
  renderer: typeof renderer,
  nodes: Array<{ name: string; children?: Array<{ name: string }> }>,
  depth = 0,
) {
  const container = new Box(renderer, { flexDirection: 'column' });
  for (const node of nodes) {
    const indent = '  '.repeat(depth);
    const prefix = node.children ? '▼ ' : '  ';
    const item = new Text(renderer, {
      content: `${indent}${prefix}${node.name}`,
      fg: node.children ? '#7aa2f7' : '#c0caf5',
    });
    container.add(item);
    if (node.children) {
      container.add(buildTree(renderer, node.children, depth + 1));
    }
  }
  return container;
}

renderer.root.add(buildTree(renderer, [
  { name: 'src', children: [{ name: 'App.tsx' }, { name: 'index.tsx' }] },
  { name: 'package.json' },
]));
renderer.start();