A pannable, zoomable company org chart, built with Vite + React. Live at zoobean.github.io/joyful-org-chart.
- Pan/zoom canvas — drag, scroll wheel, double-click/double-tap, or the zoom controls
- One-click PDF export at full resolution, no print dialog
- A toggle to show/hide job titles
- A lightweight session-based password gate (blurs the chart until unlocked; resets when the browser session ends)
src/data/org.js is the single source of truth, and deliberately keeps three concerns separate:
org— the reporting tree (who reports to whom)teams— team/function metadata (a name + the id of its head)layout— the visual column arrangement, left to right
Visual placement and reporting line are independent: a person can be rendered in one column while
reporting to someone elsewhere in the tree (see the extras field in layout, e.g. Lindsey Hill
renders beside Business Operations but reports to Lainey Franks).
Requires Node 22 (pinned in .tool-versions) and pnpm (pinned in package.json's packageManager
field; run via corepack).
pnpm install
pnpm dev # start the dev server
pnpm build # production build to dist/
pnpm preview # serve the production build locallyPushing to main triggers .github/workflows/deploy.yml, which builds the app and deploys it to
GitHub Pages automatically.