Composite Pattern | StrataForge

Problem

structural

A system needs to treat individual objects and groups of objects uniformly, but the hierarchy becomes difficult to manage with separate code paths.

Integration notes

Composite is useful when a hierarchy of nested objects should expose a common interface, such as files and folders, menus and submenus, org charts, widget trees, or scene graphs.

Tradeoffs

Can make the design more abstract and harder to follow.
May require careful handling of operations that only apply to some nodes in the tree.
Makes recursive tree operations and client code much simpler.

Languages

typescript, java, python, angular, react, react-native, csharp, dotnet

Platforms

web, backend, mobile, ui kits, cross-platform systems

Variants

frontend

Safe composite

java

Keep child-management operations only on composite nodes so leaves stay simpler and safer.

Intent: Avoid exposing meaningless tree operations on leaf nodes.

Problem: A fully uniform API can make leaf objects look like containers even when they are not.

Solution: Limit child manipulation to composite nodes while keeping shared read-only behavior common.

Dependencies

composite

Related variants

composite-transparentcomposite-iterable

Examples

composite

Useful when you want clearer boundaries between leaves and branches.

Scenarios

Menu composite

A menu system represents menu items and submenus together so the UI can render or invoke them the same way.

Context: A navigation system needs one structure for clicks, grouping, and nested submenus.

Problem: Different handling for items and groups makes menu rendering harder to maintain.

Solution: Use Composite to treat menu items and submenu containers as one menu component.

frontend

Language examples

Core languages

Frameworks and libraries

Menu compositetypescript

Represent menu items and submenus with one interface so the UI can render nested menus uniformly.

interface MenuComponent {
  render(): string;
}

class MenuItem implements MenuComponent {
  constructor(private label: string) {}
  render() {
    return this.label;
  }
}

class MenuGroup implements MenuComponent {
  constructor(private label: string, private children: MenuComponent[] = []) {}
  add(item: MenuComponent) {
    this.children.push(item);
  }
  render() {
    return `${this.label}: ${this.children.map((child) => child.render()).join(", ")}`;
  }
}

const fileMenu = new MenuGroup("File");
fileMenu.add(new MenuItem("New"));
fileMenu.add(new MenuItem("Open"));
const recent = new MenuGroup("Recent");
recent.add(new MenuItem("Report.docx"));
fileMenu.add(recent);
fileMenu.render();

Real-world examples

File browsers: File browsers often work with files and folders in the same tree structure, even though folders can contain more items.
Menu systems: UI menus frequently use nested submenus that behave like a single menu item from the client’s perspective.
Org charts: Organizations commonly model employees and managers in a hierarchy where managers contain subordinate nodes.