DEV3 Free Org Chart Maker — Source Code (React + Tailwind)

Source code of the DEV3 Org Chart Maker, an org chart editor with drag-to-reparent, a tidy tree layout (top-down or left-to-right), pan and zoom, photo or initials avatars, CSV and JSON import, and PNG, PDF and SVG export.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/org-chart-maker shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Flat people list with cycle-safe re-parenting by drag and drop or a manager picker
• Tidy-tree layout in two directions with collapse and expand per team
• CSV import by manager name with a readable list of problems (unknown manager, duplicates, loops)
• SVG chart with pan and zoom, exported to PNG, A4/A3 PDF and SVG
• Autosave in local storage plus validated, size-capped JSON import and export

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jspdf.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• Up to 500 people per chart; the chart lives in one browser and is not shared between users.