Woodn’t you know, Lip Gloss has trees!

Lip Gloss now ships with a tree rendering sub-package!

:::go
import "github.com/charmbracelet/lipgloss/tree"

Define a new tree.

:::go
t := tree.Root(".").
  Child("A", "B", "C")

Print the tree.

:::go
fmt.Println(t)

// .
// ├── A
// ├── B
// └── C

Trees have the ability to nest.

:::go
t := tree.Root(".").
  Child("Item 1").
  Child(
    tree.Root("Item 2").
      Child("Item 2.1").
      Child("Item 2.2").
      Child("Item 2.3"),
  ).
  Child(
    tree.Root("Item 3").
      Child("Item 3.1").
      Child("Item 3.2"),
  )

Print the tree.

:::go
fmt.Println(t)

Trees can be customized via their enumeration function as well as using lipgloss.Styles.

:::go
enumeratorStyle := lipgloss.NewStyle().Foreground(lipgloss.Color("99")).MarginRight(1)
itemStyle := lipgloss.NewStyle().Foreground(lipgloss.Color("212")).MarginRight(1)

t := tree.Root("Makeup").
  Child(
    "Glossier",
    "Claire’s Boutique",
    "Nyx",
    "Mac",
    "Milk",
  ).
  Enumerator(tree.RoundedEnumerator).
  EnumeratorStyle(enumeratorStyle).
  ItemStyle(itemStyle).
  RootStyle(lipgloss.NewStyle().Foreground(lipgloss.Color("#04B575")))

Print the tree.

The predefined enumerators for trees are DefaultEnumerator and RoundedEnumerator.

If you need, you can also build trees incrementally:

:::go
t := tree.New()

for i := 0; i < repeat; i++ {
    t.Child("Lip Gloss")
}

There’s more where that came from

See all the tree examples.

---

Changelog

New Features

• 0618c73743d90bb724af8f5a75e4c17bced1ff87: feat(test): add test for JoinHorizontal (#346) (@aditipatelpro)
• feb42a9be4a0577fd10b8e9ba80541ca759fb60c: feat: move tree to root (#342) (@caarlos0)

Bug fixes

• 8a0e6405b71da72f705fbdb6a98eba0095ddbabe: fix: remove unnecessary if (@aymanbagabas)

Documentation updates

• bc0de5ca26463c5d6f6f8abcb28a5d3090019fd8: docs(README): make tree example match output (@bashbunni)
• bb3e3398bb98de0faf2966331c4686b360f7eab4: docs(README): match tree example alignment with list examples (@bashbunni)
• 185fde35318b966319d590e960e3382233f72c6f: docs(README): update tree images (@bashbunni)
• ed7f56e2a7e910c5a63983683c2d7e387d09d024: docs: fix CompleteColor example (#345) (@bashbunni)
• cf0a7c615f558ed2a522babdcf6288f46667a5bb: docs: fix tree screenshot (@caarlos0)

---

Thoughts? Questions? We love hearing from you. Feel free to reach out on Twitter, The Fediverse, or on Discord.