Skip to main content

Org Chart

JsPlumb makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around.
Vanilla JS
React
Angular
Vue
Svelte
Typescript
⌂
JsPlumb, build diagrams and rich visual UIs fast

The source code for this demo is available on Github.

Vanilla JS
Angular
Vue
React
https://github.com/jsplumb-demonstrations/orgchart

If you haven't got a license for JsPlumb, we offer 30 day evaluations.

Start a free trial
Org chart
What is an org chart?

An org chart is a diagram that visually conveys an organization's structure, detailing the names and roles of the various individuals.

Org charts have various names - Organization Charts, Hierarchy Charts, Organograms, Organogram charts, to name a few - but all of these terms refer to the same thing.

Making an organization chart with JsPlumb

JsPlumb has everything need to make building an org chart a very straightforward process - the demonstration on this page was created with around 190 lines of code in total.

Further information

Comprehensive documentation covering the coding of this app is available on our site here: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/starter-app-orgchart

More Demos
See all demos

Flowchart builder application - JsPlumb, build diagrams and rich visual UIs fast

Flowchart

Gantt chart builder application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Gantt

Chatbot builder application - JsPlumb, build diagrams and rich visual UIs fast

Chatbot

Callflow builder application - JsPlumb, build diagrams and rich visual UIs fast

Call Flow

Kanban application - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Kanban

Network topology diagram builder - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Network Topology

Database schema builder application - JsPlumb, build diagrams and rich visual UIs fast

Database Schema

Org Chart application - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Org Chart

Mindmap builder application - JsPlumb - Angular, React, Vue, Svelte diagramming library

Mindmap

Element grouping demonstration - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Nested Groups

Path tracing demonstration - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Path Tracing

Hello world demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Hello World

Image processor application - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Image Processor

Neighbour views dynamic selections demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Neighbourhood Views

Active filtering demonstration - JsPlumb, build diagrams and rich visual UIs fast

Active Filtering

Org chart layout demonstration - JsPlumb, build diagrams and rich visual UIs fast

Hierarchy Layout

CAD Drawing tools demonstration - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Connector Editors

Force directed layout demonstration, org chart layout demonstration - JsPlumb - Angular, React, Vue, Svelte diagramming library

Layouts

Collapsible hierarchy Italic language family demonstration - JsPlumb - Angular, React, Vue, Svelte diagramming library

Collapsible Hierarchy

Nested instances desktop example - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Nested Instances