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.