Org Chart Web App with Node.js and Express
Org Chart Web App with Node.js and Express
Build a Simple Org Chart Web App with Node.js and OrgChartJS
If you've ever needed to build an interactive organizational chart for the web, using Node.js with the OrgChartJS library is a powerful combination. In this quick tutorial, we'll create a simple org chart app that lets you view, add, edit, and delete team members — with data stored in a JSON file on the server.
Step 1: Set Up the Project
Create a new folder and add the following structure:
my-orgchart-app/
├── public/
│ ├── index.html
│ ├── json.json
│ └── script.js
└── server.js
Then initialize the project:
npm init -y
npm install express
Step 2: Create the Frontend
In public/index.html, we load the OrgChartJS library and our script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Org Chart</title>
<script src="https://cdn.balkan.app/orgchart.js"></script>
</head>
<body>
<div id="tree"></div>
<script src="script.js"></script>
</body>
</html>
In public/script.js, we initialize the chart and hook into the add, update, and remove events:
let chart = new OrgChart(document.getElementById("tree"), {
nodeBinding: {
field_0: "name",
field_1: "title"
},
nodeMenu: {
add: { text: "Add New" },
edit: { text: "Edit" },
remove: { text: "Remove" }
}
});
chart.onUpdateNode(function(args) {
fetch('/api/update', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(args)
});
});
chart.onRemoveNode(function(args) {
fetch('/api/remove', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ args })
});
});
chart.onAddNode(function(args) {
fetch('/api/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(args.data)
});
});
fetch('json.json')
.then(response => response.json())
.then(data => chart.load(data));
The public/json.json file contains initial org chart data:
[
{ "id": 1, "name": "Amber McKenzie" },
{ "id": 2, "pid": 1, "name": "Ava Field" },
{ "id": 3, "pid": 1, "name": "Peter Stevens" }
]
Step 3: Create the Server
In server.js, set up the Express server and simple APIs for manipulating the JSON data:
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
const PORT = 3000;
const DATA_PATH = path.join(__dirname, 'public', 'json.json');
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
function readData() {
return JSON.parse(fs.readFileSync(DATA_PATH, 'utf8'));
}
function writeData(data) {
fs.writeFileSync(DATA_PATH, JSON.stringify(data, null, 2));
}
app.post('/api/update', (req, res) => {
const updatedNode = req.body.newData;
let data = readData();
data = data.map(node => node.id === updatedNode.id ? { ...node, ...updatedNode } : node);
writeData(data);
res.json({ status: 'updated', node: updatedNode });
});
app.post('/api/remove', (req, res) => {
const nodeId = req.body.args.id;
const { newPidsForIds = {} } = req.body.args.newPidsAndStpidsForIds || {};
let data = readData();
data = data.map(node => (
newPidsForIds.hasOwnProperty(node.id) ? { ...node, pid: newPidsForIds[node.id] } : node
));
data = data.filter(node => node.id !== nodeId && node.pid !== nodeId);
writeData(data);
res.json({ status: 'removed', id: nodeId });
});
app.post('/api/add', (req, res) => {
const newNode = req.body;
let data = readData();
data.push(newNode);
writeData(data);
res.json({ status: 'added', node: newNode });
});
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});
Step 4: Run the App
Start the server:
node server.js
Visit http://localhost:3000 in your browser, and you'll see your org chart. You can now add, remove, and edit people — with changes saved back to the json.json file on disk.
This setup is great for prototyping org charts or integrating a visual hierarchy editor into internal tools. You can extend this further by adding a database, user authentication, or drag-and-drop features.
Author: BALKAN App
OrgChart Conditional Node Size
Add CSS on Export in OrgChart JS
OrgChart JS Angular Templates
Loading on Demand with Family Tree JS 2
Dynamic Colors Organizational Chart
Charlie Chaplin Family Tree
Introducing Family Tree JS 2: The Next Generation is Here!
React OrgChart
Create and run an OrgChart Single Page Application with Node.js – beginner's guide.
Export and Import Org Chart to Excel
Adding Custom HTML Elements into OrgChart JS container
Еasily Create a Template in an OrgChart
Node Swapping in an Organizational Chart
Vladimir Putin Family Tree
Add Field Data in Expand button with OrgChart JS
Bill Gates Family Tree
Create a Tooltip for a ForeignObject Element Hover in OrgChart JS
Custom Aligning Nodes in a JavaScript Organizational Chart
Center and Zoom on Search Click in OrgChart JS
Create Multiline Group Titles in OrgChart JS
Adding Arrows in OrgChart JS Links
Show a Custom Edit Form for a node in OrgChart JS
Jeff Bezos Family Tree
How to Add Material Icons in OrgChart JS
Leonardo DiCaprio Family Tree
Visualizing Dual Reporting Structures with OrgChart JS
Exporting OrgChart JS to A4 PDF: A Step-by-Step Guide
Genghis Khan Family Tree: The Lineage of the Great Khan
OrgChart JS now support Export to Visio
New Export Option: childLevels in OrgChart JS
Elon Musk Family Tree
AI for OrgChart JS: Revolutionizing Organization Charts
Family Tree JS 2 (Preview)
d3 org chart
Our Family Tree App is Now on Android!
Why BALKAN OrgChart JS is the Best Organizational Chart Library
How to Create a JavaScript Flow Chart
How to Add an Organizational Chart to a Mobile Application
How to Create a JavaScript Organizational Chart
OrgChart JS Now Supports PDF Export Per Team
Introducing Family Tree App
Donald Trump Family Tree
Discover Your Roots: Build Your Family Tree with BALKAN App
JavaScript Organization Chart
Instantly create interactive, intuitive flowcharts in seconds
JavaScript Hierarchy Chart
Mermaid js alternative
Create Flowcharts in Seconds with Flow Chart JS: Your New Favorite JavaScript Library
Customizing Filter UI - Code of The Week
Zoom Slider - Code of The Week
Bookmarks - Code of The Week
Customizing Search Results - Code of The Week
Introducing Undo Redo - Code Of The Week
Price adjustment announcement
The price will increase for new customers
Buttons for adding family members to a family tree - Code of The Week
Levels - Code of The Week
Change node color from a button in the Edit Form - Code of The Week
Filter and Highlight Nodes - Code of The Week
Up Expanding - Code Of The Week
Programmatically move the chart - Code of The Week
Siblings in Family Tree JS - Code of The Week
Purple template - Code of The Week
Assistant With Children - Code of The Week
Conditional Layout - Code of The Week
Conditional Color - Code of the Week
Sriniz Family Tree Template - Code of The Week
Color Picker - Code of The Week
Add company logo as watermark in exported PDF documents - Code of The Week
Mind map - Code of The Week
Create relationship with circle menu - Code of The Week
Animated Photos - Code of the Week
Grouped Dotted Lines - Code Of The Week
Dotted Lines - Code Of The Week
Department Dynamic Title - Code Of The Week
Add expand button for partners - Code of the Week
Change the sub levels with Drag and Drop - Code of The Week
Custom Edit From using Popover - Code of the Week
Sub levels tag option - Code of the Week
Highlights search results directly on Org Chart nodes - Code of the Week
Code of the Week/Relationship maps and Business process diagrams
Search using field name abbreviations - Code of the Week
Dynamic Template - Code of the Week
Read and Write local CSV file using File API and Org Chart JS - Code of The Week
Organizational Chart Path Highlighting and Selection
Modern Template - Org Chart JS
Performance - Org Chart JS
Single parent is supported in Family Tree JS
How To Develop a Flowchart Maker with Org Chart JS
How to upload a photo to Family Tree JS in .NET core
How to change the color of selected node - Family Tree JS
