Organization Chart

Build organizational charts that render as SVG. Hierarchical tree layouts with expandable nodes, photos, titles, and department grouping. Style every node and connector with Tailwind CSS. Works with any framework.

$npm install @chartts/core
example.tsx
import { org } from "@chartts/core"

const svg = org({
  data: {
    name: "Sarah Chen",
    title: "CEO",
    children: [
      {
        name: "James Lee",
        title: "CTO",
        children: [
          { name: "Ana Garcia", title: "Lead Engineer" },
          { name: "Mark Wilson", title: "Lead Designer" },
        ],
      },
      {
        name: "Maria Santos",
        title: "CFO",
      },
    ],
  },
})

Features

Hierarchical tree layout
Expandable/collapsible nodes
Photos and role badges
Department grouping
Horizontal and vertical orientations
Tailwind CSS on nodes and connectors
SVG rendering for export and print
Read the DocsSee DemosExamples