BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Copy an OrgChart as image to Clipboard ​

Copy an OrgChart to Clipboard: How to Copy an OrgChart JS Chart Image to Clipboard Copy OrgChart JS 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 OrgChart JS and the modern Clipboard API, you can do exactly that.

In this tutorial, you will export your chart as SVG, convert it to PNG, and copy it directly to the clipboard without downloading any files.

Test it here

Full Code Example

How it works ​

The flow is simple:

  1. Trigger chart export with chart.exportToSVG().
  2. Intercept the export in onExportStart.
  3. Get SVG content from args.pages[0].
  4. Convert SVG to PNG using a temporary canvas.
  5. Write the PNG blob with navigator.clipboard.write.

Important notes ​

  • Clipboard image write requires a secure context (https:// or localhost).
  • Browsers usually require this action to be triggered by a user gesture (button click).
  • This approach copies a PNG image, so you can paste directly into chat tools and documents.

Summary ​

By combining OrgChart JS export events with the Clipboard API, you can add a smooth "Copy chart image" feature to your app in just a few lines of code.