Copy an OrgChart to Clipboard

How to Copy an OrgChart JS Chart Image to Clipboard

Have you ever wanted to quickly copy your organization chart and paste it into another app — like Slack, Word, or an email — as an image?

With the OrgChart JS library and the modern Clipboard API, you can easily do that!

In this tutorial, we’ll show how to export your chart as an image and copy it directly to the clipboard — without downloading any files.

Full Code Example

💡 Overview

We’ll use:

OrgChart JS to generate the chart.
exportToSVG() to export the chart as an SVG image.
Canvas and Blob to convert SVG → PNG.
navigator.clipboard.write() to copy the PNG into the clipboard.

Once done, you can press Ctrl + V to paste the image anywhere that supports pasting images (e.g., Word, Gmail, or Paint).

🧩 Full Example Code

Here’s the full working example — you can test it by pasting the code into an HTML file.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Copy OrgChart Image to Clipboard</title>
  <script src="https://balkan.app/js/OrgChart.js"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Helvetica;
      overflow: hidden;
    }
    #tree {
      width: 100%;
      height: 100%;
    }
    button {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 24px;
      z-index: 11111;
    }
  </style>
</head>
<body>

<button id="button">Copy</button>
<div id="tree"></div>

<script>
  let chart = new OrgChart(document.getElementById("tree"), {
      mouseScrool: OrgChart.action.none,
      nodeBinding: {
          field_0: "name"
      },
  });

  chart.onExportStart(function (args) {
      // For demo: open the example in a new tab if inside an iframe
      if (window.parent != window) {
          if (confirm("In order to test the Code you have to open it in a new tab. Would you like to open it in a new tab?")) {
              window.open("https://code.balkan.app/result/orgchart-js/copy-the-chart-to-clipboard");
          }
          return false;
      }

      // Get SVG and convert it to PNG
      const svg = args.pages[0];
      const svgData = new XMLSerializer().serializeToString(svg);
      const svgBlob = new Blob([svgData], { type: "image/svg+xml" });
      const url = URL.createObjectURL(svgBlob);

      const img = new Image();
      img.onload = () => {
          const canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);

          // Convert canvas to PNG and copy it
          canvas.toBlob(async (blob) => {
              try {
                  await navigator.clipboard.write([
                      new ClipboardItem({ "image/png": blob })
                  ]);
                  console.log("✅ PNG copied to clipboard!");
              } catch (err) {
                  console.error("❌ Copy failed", err);
              }
          }, "image/png");
      };
      img.src = url;

      return false; // prevent download dialog
  });

  // Load simple chart data
  chart.load([
      { id: 1, name: "Amber McKenzie" },
      { id: 2, pid: 1, name: "Ava Field" },
      { id: 3, pid: 1, name: "Peter Stevens" }
  ]);

  // Copy button triggers export
  document.getElementById("button").onclick = () => {
      chart.exportToSVG();
  };
</script>

</body>
</html>

⚙️ How It Works

chart.exportToSVG() Exports the chart as an SVG image.
Convert SVG → Canvas → PNG The SVG is drawn into a <canvas> element so we can generate a PNG blob.

Copy to Clipboard Using:

await navigator.clipboard.write([
  new ClipboardItem({ "image/png": blob })
]);

This copies the PNG image to the system clipboard.

Paste Anywhere! Open Word, Paint, or Gmail and press Ctrl + V — your chart appears as an image.

🧠 Notes

This works in modern browsers (Chrome, Edge, etc.) that support the asynchronous Clipboard API.
Some browsers might require a secure context (https://) to allow clipboard image access.
You can replace "image/png" with "image/jpeg" or "image/webp" if you prefer another format.

🚀 Try It Yourself

You can test this example Here or your own HTML file. Once it runs, click Copy, and paste your chart into any app that accepts images!

✅ Result:

After clicking Copy, just hit Ctrl + V — your org chart image appears instantly!

Here is a more simple example on How to copy the JSON data.

	Copy an OrgChart to Clipboard						lightdark
Copy an OrgChart to Clipboard How to Copy an OrgChart JS Chart Image to Clipboard Have you ever wanted to quickly copy your organization chart and paste it into another app — like Slack, Word, or an email — as an image? With the OrgChart JS library and the modern Clipboard API, you can easily do that! In this tutorial, we’ll show how to export your chart as an image and copy it directly to the clipboard — without downloading any files. Full Code Example 💡 Overview We’ll use: OrgChart JS to generate the chart. `exportToSVG()` to export the chart as an SVG image. Canvas and Blob to convert SVG → PNG. `navigator.clipboard.write()` to copy the PNG into the clipboard. Once done, you can press Ctrl + V to paste the image anywhere that supports pasting images (e.g., Word, Gmail, or Paint). 🧩 Full Example Code Here’s the full working example — you can test it by pasting the code into an HTML file. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Copy OrgChart Image to Clipboard</title> <script src="https://balkan.app/js/OrgChart.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Helvetica; overflow: hidden; } #tree { width: 100%; height: 100%; } button { position: absolute; top: 30px; right: 30px; font-size: 24px; z-index: 11111; } </style> </head> <body> <button id="button">Copy</button> <div id="tree"></div> <script> let chart = new OrgChart(document.getElementById("tree"), { mouseScrool: OrgChart.action.none, nodeBinding: { field_0: "name" }, }); chart.onExportStart(function (args) { // For demo: open the example in a new tab if inside an iframe if (window.parent != window) { if (confirm("In order to test the Code you have to open it in a new tab. Would you like to open it in a new tab?")) { window.open("https://code.balkan.app/result/orgchart-js/copy-the-chart-to-clipboard"); } return false; } // Get SVG and convert it to PNG const svg = args.pages[0]; const svgData = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgData], { type: "image/svg+xml" }); const url = URL.createObjectURL(svgBlob); const img = new Image(); img.onload = () => { const canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); // Convert canvas to PNG and copy it canvas.toBlob(async (blob) => { try { await navigator.clipboard.write([ new ClipboardItem({ "image/png": blob }) ]); console.log("✅ PNG copied to clipboard!"); } catch (err) { console.error("❌ Copy failed", err); } }, "image/png"); }; img.src = url; return false; // prevent download dialog }); // Load simple chart data chart.load([ { id: 1, name: "Amber McKenzie" }, { id: 2, pid: 1, name: "Ava Field" }, { id: 3, pid: 1, name: "Peter Stevens" } ]); // Copy button triggers export document.getElementById("button").onclick = () => { chart.exportToSVG(); }; </script> </body> </html> ⚙️ How It Works `chart.exportToSVG()` Exports the chart as an SVG image. Convert SVG → Canvas → PNG The SVG is drawn into a `<canvas>` element so we can generate a PNG blob. Copy to Clipboard Using: `await navigator.clipboard.write([ new ClipboardItem({ "image/png": blob }) ]);` This copies the PNG image to the system clipboard. Paste Anywhere! Open Word, Paint, or Gmail and press Ctrl + V — your chart appears as an image. 🧠 Notes This works in modern browsers (Chrome, Edge, etc.) that support the asynchronous Clipboard API. Some browsers might require a secure context (`https://`) to allow clipboard image access. You can replace `"image/png"` with `"image/jpeg"` or `"image/webp"` if you prefer another format. 🚀 Try It Yourself You can test this example Here or your own HTML file. Once it runs, click Copy, and paste your chart into any app that accepts images! ✅ Result: After clicking Copy, just hit Ctrl + V — your org chart image appears instantly! Here is a more simple example on How to copy the JSON data. Author: BALKAN App Add public comment... Copy OrgChart Data to Clipboard Pan on Node Is Now the Default in OrgChart JS Export 2 Charts in a Single PDF Introducing Liquid Glass Buttons in OrgChart JS OrgScribe: The Markdown-Style Way to Build Org Charts Achieve Any OrgChart Design Why Not Load on Demand in OrgChart JS JSON Export Slinks with Nodes in OrgChart JS OrgChart JS Privacy GEDCOM in Family Tree JS 2 Update a JSON File with Family Tree Members Hide Nodes in an OrgChart with CSS Pin (set as root) a node in an OrgChart WordPress OrgChart Plugin Family Tree in WordPress Organizational Charts with Multiple Parents Introducing new PDF and PNG Previews in OrgChart JS Building an Org Chart MVP Introducing PowerPoint Preview in OrgChart JS Change The Order in the OrgChart by Drag and Drop (Simple Example) Highlight to the root on search in OrgChart JS OrgChart JS Now Supports Export to PowerPoint OrgChart JS Now Supports Export to PowerPoint Dynamically changing an orgchart field Project Timeline Chart OrgChart Conditional Node Size Add CSS on Export in OrgChart JS OrgChart JS Angular Templates Org Chart Web App with Node.js and Express 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 Family Tree with live tiles

Copy an OrgChart to Clipboard

Copy an OrgChart to Clipboard

💡 Overview

🧩 Full Example Code

⚙️ How It Works

🧠 Notes

🚀 Try It Yourself

✅ Result:

Copy OrgChart Data to Clipboard

Pan on Node Is Now the Default in OrgChart JS

Export 2 Charts in a Single PDF

Introducing Liquid Glass Buttons in OrgChart JS

OrgScribe: The Markdown-Style Way to Build Org Charts

Achieve Any OrgChart Design

Why Not Load on Demand in OrgChart JS

JSON Export Slinks with Nodes in OrgChart JS

OrgChart JS Privacy

GEDCOM in Family Tree JS 2

Update a JSON File with Family Tree Members

Hide Nodes in an OrgChart with CSS

Pin (set as root) a node in an OrgChart

WordPress OrgChart Plugin

Family Tree in WordPress

Organizational Charts with Multiple Parents

Introducing new PDF and PNG Previews in OrgChart JS

Building an Org Chart MVP

Introducing PowerPoint Preview in OrgChart JS

Change The Order in the OrgChart by Drag and Drop (Simple Example)

Highlight to the root on search in OrgChart JS

OrgChart JS Now Supports Export to PowerPoint

OrgChart JS Now Supports Export to PowerPoint

Dynamically changing an orgchart field

Project Timeline Chart

OrgChart Conditional Node Size

Add CSS on Export in OrgChart JS

OrgChart JS Angular Templates

Org Chart Web App with Node.js and Express

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