sp-org-chart

Hierarchical org chart web component with drag-and-drop reorganization, search/filter, user selection, and full keyboard navigation support. Pass an array of user objects via the users property; the component builds the hierarchy automatically from reportsTo relationships.

Installation

Install from a GitHub Release:

npm install https://github.com/StephanWald/trm-ai-webcomponents/releases/download/v0.0.1/skillspilot-webcomponents-0.0.1.tgz

Or load via script tag:

<script type="module" src="https://stephanwald.github.io/trm-ai-webcomponents/wc/skillspilot.esm.js"></script>

Examples

Basic Org Chart

A flat user array with reportsTo relationships. The component builds the hierarchy automatically.

View / Edit Source

<sp-org-chart id="chart1"></sp-org-chart> <script> const chart = document.getElementById('chart1'); chart.users = [ { id: '1', name: 'Alice Johnson', title: 'CEO', department: 'Executive', avatarUrl: '' }, { id: '2', name: 'Bob Smith', title: 'CTO', department: 'Engineering', reportsTo: '1', avatarUrl: '' }, { id: '3', name: 'Carol White', title: 'CFO', department: 'Finance', reportsTo: '1', avatarUrl: '' }, { id: '4', name: 'Dave Lee', title: 'Lead Engineer', department: 'Engineering', reportsTo: '2', avatarUrl: '' }, { id: '5', name: 'Eve Davis', title: 'Engineer', department: 'Engineering', reportsTo: '4', avatarUrl: '' } ]; </script>

Editable Mode

Enable drag-and-drop reorganization with editable="true". Users can long-press (500ms) on a tile and drag it to a new manager.

View / Edit Source

<sp-org-chart id="chart2" editable="true"></sp-org-chart> <script> const chart = document.getElementById('chart2'); chart.users = [ { id: '1', name: 'Alice Johnson', title: 'CEO', department: 'Executive', avatarUrl: '' }, { id: '2', name: 'Bob Smith', title: 'CTO', department: 'Engineering', reportsTo: '1', avatarUrl: '' }, { id: '3', name: 'Carol White', title: 'CFO', department: 'Finance', reportsTo: '1', avatarUrl: '' }, { id: '4', name: 'Dave Lee', title: 'Lead Engineer', department: 'Engineering', reportsTo: '2', avatarUrl: '' } ]; </script>

Filtered View

Use the search input to filter users by name, title, or department. Filtered results show the full ancestor chain so context is preserved.

View / Edit Source

<sp-org-chart id="chart3"></sp-org-chart> <p style="margin-top:8px;font-size:0.85rem;color:#666"> Try typing "Engineering" in the search box above the chart. </p> <script> const chart = document.getElementById('chart3'); chart.users = [ { id: '1', name: 'Alice Johnson', title: 'CEO', department: 'Executive', avatarUrl: '' }, { id: '2', name: 'Bob Smith', title: 'CTO', department: 'Engineering', reportsTo: '1', avatarUrl: '' }, { id: '3', name: 'Carol White', title: 'CFO', department: 'Finance', reportsTo: '1', avatarUrl: '' }, { id: '4', name: 'Dave Lee', title: 'Lead Engineer', department: 'Engineering', reportsTo: '2', avatarUrl: '' }, { id: '5', name: 'Frank Brown', title: 'Accountant', department: 'Finance', reportsTo: '3', avatarUrl: '' } ]; </script>

Event Handling

Listen to user-click, user-dblclick, user-delete, and hierarchy-change events emitted by the component.

View / Edit Source

<sp-org-chart id="chart4" editable="true"></sp-org-chart> <div id="log" style="margin-top:8px;padding:8px;background:#f5f5f5;border-radius:4px;font-family:monospace;font-size:0.8rem;min-height:60px;"></div> <script> const chart = document.getElementById('chart4'); const log = document.getElementById('log'); function addLog(msg) { const p = document.createElement('p'); p.style.margin = '2px 0'; p.textContent = msg; log.prepend(p); if (log.children.length > 5) log.lastChild.remove(); } chart.users = [ { id: '1', name: 'Alice Johnson', title: 'CEO', department: 'Executive', avatarUrl: '' }, { id: '2', name: 'Bob Smith', title: 'CTO', department: 'Engineering', reportsTo: '1', avatarUrl: '' }, { id: '3', name: 'Carol White', title: 'CFO', department: 'Finance', reportsTo: '1', avatarUrl: '' } ]; chart.addEventListener('userClick', e => addLog('userClick: ' + e.detail.name)); chart.addEventListener('userDblclick', e => addLog('userDblclick: ' + e.detail.name)); chart.addEventListener('hierarchyChange', e => addLog('hierarchyChange: ' + JSON.stringify(e.detail).substring(0, 60))); </script>

Dark Mode

Apply the theme-dark class (or set the theme attribute) to switch to the dark color scheme using DWC design tokens.

View / Edit Source

<div class="theme-dark" style="background:#1a1a2e;padding:16px;border-radius:8px"> <sp-org-chart id="chart5" theme="dark"></sp-org-chart> </div> <script> const chart = document.getElementById('chart5'); chart.users = [ { id: '1', name: 'Alice Johnson', title: 'CEO', department: 'Executive', avatarUrl: '' }, { id: '2', name: 'Bob Smith', title: 'CTO', department: 'Engineering', reportsTo: '1', avatarUrl: '' }, { id: '3', name: 'Carol White', title: 'CFO', department: 'Finance', reportsTo: '1', avatarUrl: '' }, { id: '4', name: 'Dave Lee', title: 'Lead Engineer', department: 'Engineering', reportsTo: '2', avatarUrl: '' } ]; </script>

API Reference

Properties

Property	Attribute	Type	Default	Description
editable	editable	boolean	true	Enable/disable edit mode for drag-and-drop and deletion
filterBranchId	filter-branch-id	string	''	Branch ID to filter by when filterMode is not 'none'
filterMode	filter-mode	"highlight" | "isolate" | "none"	'none'	Branch filter mode — 'none' shows all, 'highlight' dims non-matching, 'isolate' hides unrelated branches
noDataMessage	no-data-message	string	'No data available'	Custom message when users array is empty
theme	theme	"auto" | "dark" | "light"	'auto'	Theme override for standalone usage
users	—	User[]	[]	Flat array of users with reporting relationships

Events

Event	Detail Type	Description
hierarchyChange	HierarchyChangeDetail	Emitted when hierarchy changes via drag-and-drop
userClick	UserEventDetail	Emitted when a user tile is clicked
userDblclick	UserEventDetail	Emitted when a user tile is double-clicked
userDelete	UserEventDetail	Emitted when a user is deleted

Methods

Method	Signature	Description
clearHighlight	() => Promise<void>	Clear all highlights
getSelected	() => Promise<User | null>	Get the currently selected user
highlightUser	(userId: string) => Promise<void>	Highlight a specific user by ID
scrollToUser	(userId: string) => Promise<void>	Scroll a user tile into view with smooth animation

CSS Custom Properties

Property	Description
--dwc-border-radius	Border radius for user tiles and drop zones
--dwc-border-radius-full	Full (circular) border radius for user avatars
--dwc-border-radius-lg	Large border radius for the floating drop zones container
--dwc-border-radius-sm	Small border radius for branch badge
--dwc-color-border	Border color for tiles, children connector, and drop zones
--dwc-color-danger	Danger color for countdown ring and delete drop zone
--dwc-color-primary	Accent color for selected tile, avatar initials background, branch tile border
--dwc-color-primary-surface	Light primary surface for branch badge background
--dwc-color-primary-text	Text color on primary-colored surfaces (avatar initials)
--dwc-color-surface	Background color for user tiles and drop zones
--dwc-color-surface-alt	Alternate surface for branch tiles
--dwc-color-text	Primary text color for user names
--dwc-color-text-secondary	Secondary text color for role/email/phone labels
--dwc-color-warning	Warning color for highlighted tile border
--dwc-font-family	Base font family for all text in the org chart
--dwc-font-size-base	Base font size for names and body text
--dwc-font-size-lg	Large font size for avatar initials and empty-state message
--dwc-font-size-sm	Small font size for role labels and secondary text
--dwc-font-size-xs	Extra-small font size for branch badge
--dwc-font-weight-medium	Medium weight for labels and badges
--dwc-font-weight-semibold	Semibold weight for user names
--dwc-line-height-normal	Normal line height for body text
--dwc-shadow-md	Medium box shadow on hovered user tiles and drag preview
--dwc-shadow-sm	Small box shadow on resting user tiles
--dwc-shadow-xl	Extra-large box shadow on the floating drop zones container
--dwc-spacing-2xl	Double extra-large spacing for empty-state padding
--dwc-spacing-lg	Large spacing for drop zone gaps (20px default)
--dwc-spacing-md	Medium spacing for tile padding and container padding (12px default)
--dwc-spacing-sm	Small spacing (8px default)
--dwc-spacing-xl	Extra-large spacing for children indentation (32px default)
--dwc-spacing-xs	Extra-small spacing (4px default)
--dwc-transition-fast	Fast transition duration for hover and drag states

CSS Parts

Part	Description
drop-zone	Drop zone for drag-and-drop
no-data	No data message container
tree-container	Main tree container
user-tile	Individual user tile