Spectre.Console

Display Hierarchical Data

Visualize nested structures using tree views with customizable styling

When you need to show parent-child relationships, use Tree.

Create a Tree

To create a tree, pass a root label and call .AddNode().

var tree = new Tree("MyProject");
  
tree.AddNode("src");
tree.AddNode("tests");
tree.AddNode("docs");
  
AnsiConsole.Write(tree);

Add Nested Levels

To nest deeper, call .AddNode() on child nodes.

var tree = new Tree("MyProject");
  
var src = tree.AddNode("src");
src.AddNode("Program.cs");
src.AddNode("Startup.cs");
  
var controllers = src.AddNode("Controllers");
controllers.AddNode("HomeController.cs");
controllers.AddNode("ApiController.cs");
  
var tests = tree.AddNode("tests");
tests.AddNode("UnitTests.cs");
  
AnsiConsole.Write(tree);

Style the Tree

If you want colored nodes, use markup. To change line style, call .Guide().

var tree = new Tree("[yellow]MyProject[/]")
    .Guide(TreeGuide.BoldLine)
    .Style(Style.Parse("dim"));
  
var src = tree.AddNode("[blue]src[/]");
src.AddNode("[grey]Program.cs[/]");
src.AddNode("[grey]Startup.cs[/]");
  
var controllers = src.AddNode("[blue]Controllers[/]");
controllers.AddNode("[grey]HomeController.cs[/]");
controllers.AddNode("[grey]ApiController.cs[/]");
  
var tests = tree.AddNode("[green]tests[/]");
tests.AddNode("[grey]UnitTests.cs[/]");
  
AnsiConsole.Write(tree);

Embed Widgets

To embed panels or other widgets, pass them to .AddNode().

var tree = new Tree("[yellow]Components[/]")
    .Guide(TreeGuide.Line);
  
var header = new Panel("[bold]Navigation Bar[/]")
    .BorderColor(Color.Blue)
    .Padding(1, 0);
tree.AddNode(header);
  
var content = new Panel("[bold]Main Content[/]")
    .BorderColor(Color.Green)
    .Padding(1, 0);
tree.AddNode(content);
  
var footer = new Panel("[bold]Footer[/]")
    .BorderColor(Color.Grey)
    .Padding(1, 0);
tree.AddNode(footer);
  
AnsiConsole.Write(tree);

See Also