TreeView

Hierarchical collection navigator for files, objects, runtime routes, and graph indexes.

Category: Navigation

Slots: 8

States: 3

Writer: Legacy

cre8.primitive.tree-view

Live renderLegacy writer: TreeView

Workspace Hierarchy

📁 src/lib.rs, main.rs, router.rs3 files
📁 crates/cre8-view, cre8-core2 modules
📄 Cargo.tomlManifest and dependenciesmanifest

<TreeView
  items={[
    {
      children: [
        { badge: "2.4KB", id: "lib.rs", kind: "file", label: "lib.rs" },
        { badge: "1.1KB", id: "main.rs", kind: "file", label: "main.rs" },
        { badge: "5.6KB", id: "router.rs", kind: "file", label: "router.rs" }
      ],
      defaultExpanded: true,
      id: "src",
      kind: "folder",
      label: "src/"
    },
    {
      children: [
        { id: "cre8-view", kind: "module", label: "cre8-view" },
        { id: "cre8-core", kind: "module", label: "cre8-core" }
      ],
      id: "crates",
      kind: "folder",
      label: "crates/"
    },
    { badge: "toml", id: "Cargo.toml", kind: "file", label: "Cargo.toml" }
  ]}
  title="Project Workspace"
>
  <List title="Workspace Hierarchy">
    <ListItem subtitle="lib.rs, main.rs, router.rs" title="📁 src/">
      <Badge intent="info" label="3 files" />
    </ListItem>
    <ListItem subtitle="cre8-view, cre8-core" title="📁 crates/">
      <Badge intent="neutral" label="2 modules" />
    </ListItem>
    <ListItem subtitle="Manifest and dependencies" title="📄 Cargo.toml">
      <Badge intent="success" label="manifest" />
    </ListItem>
  </List>
</TreeView>

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

Slot	DOM class
root	.primitive-tree-view
tree	—
item	—
twisty	—
icon	—
label	—
badge	—
actions	—

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States

selectedexpandeddisabled

Platforms

webnativeruntime-node

Recipes

unstyledruntime-console

The example above still needs shared writers for: TreeView.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

Target	Renderer	Status
web	react	experimental
runtime-node	view-node	ready
ssr	html-navigation	ready
terminal	terminal-text	planned
native	native-adapter	experimental

Follows the tree and treeitem keyboard navigation pattern.

Arrow keys move focus through visible tree items.
Left and Right collapse and expand branches.
Selected and expanded states are exposed through ARIA.

TreeView

Preview

Anatomy

States and platforms

Renderers

Accessibility