Copy OrgChart Data to Clipboard

Copy OrgChart JS JSON data to clipboard with Ctrl+C.

When building interactive org charts, it is often useful to quickly copy chart data for debugging, export, or sharing.

With OrgChart JS, you can add a simple Ctrl + C shortcut that copies chart nodes as JSON.

Step 1. Include OrgChart JS

<script src="https://cdn.balkan.app/orgchart.js"></script>
<div id="tree"></div>

Step 2. Initialize the chart

const chart = new OrgChart(document.getElementById("tree"), {
  mode: "dark",
  mouseScroll: OrgChart.action.scroll,
  nodeBinding: {
    field_0: "name"
  }
});

chart.load([
  { id: 1, name: "Denny Curtis" },
  { id: 2, pid: 1, name: "Ashley Barnett" },
  { id: 3, pid: 1, name: "Caden Ellison" }
]);

Step 3. Add Ctrl + C copy shortcut

document.addEventListener("keydown", function (e) {
  if (e.ctrlKey && e.key.toLowerCase() === "c") {
    e.preventDefault();

    const data = chart.config.nodes;
    const json = JSON.stringify(data, null, 2);

    const textarea = document.createElement("textarea");
    textarea.value = json;
    textarea.style.position = "fixed";
    textarea.style.opacity = "0";
    document.body.appendChild(textarea);

    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  }
});

Step 4. Try it live

Code example: Copy to Clipboard

Press Ctrl + C and paste the result anywhere to get your chart JSON.