I am currently planing to implement this feature for my app. I am thinking about using the clipboard api and defining a custom Content-Type for my app. This should also allow me to copy and paste nodes across flows. Similar to the drag-and-drop example. For this behavior one also needs custom validation to check, if the pasted node is a valid one. I think that another prop like onNodeValidation or something similiar would be needed.

onNodeValidation should receive a function with the following definition:

(node: Node) => boolean;

It returns true, if the to be inserted node is valid and and false if not. Only if the node is valid, it will be inserted into the elements array.

What is the status on this?

Hi is this now possible to do with the latest version? if not can someone please share your working fork?
thanks so much!

Bumping to say this would be a very much appreciated feature!

Would love to have this feature!

I think this feature is cool!
Recently I implemented node duplicate by the contextMenu which pops up by right click the node. The interaction is similar to duplicating a folder on the Mac, so copy and paste and duplicate would be better if both supported.
Copy / Paste Nodes and Edges may be means that copy nodes and their edges together.
btw, I am curious about if we can only copy one edge, it may be useful in some cases because the edge data config work may be expensive. And I wonder whether this idea is feasible in terms of product interaction and technical implementation. Can we just paste the Independent edge to the canvas ? And I think this is a bit like the feature request post #2394

Example hook

import { ReactFlowInstance, Node } from "@xyflow/react";
import { useCallback, useEffect } from "react";

export const useCopyPaste = (
  rfInstance: ReactFlowInstance | null,
) => {

  const onCopyCapture = useCallback(
    (event: ClipboardEvent) => {
      event.preventDefault();
      const nodes = JSON.stringify(
        rfInstance?.getNodes().filter((n) => n.selected)
      );

      event.clipboardData?.setData("flowchart:nodes", nodes);
    },
    [rfInstance]
  );

  const onPasteCapture = useCallback(
    (event: ClipboardEvent) => {
      event.preventDefault();
      const nodes = JSON.parse(
        event.clipboardData?.getData("flowchart:nodes") || "[]"
      ) as Node[] | undefined;
      if (nodes) {
        const randomId = () => Math.random().toString(16).slice(2);
        rfInstance?.setNodes(
          [
            ...rfInstance.getNodes().map((n) => ({ ...n, selected: false })),
            ...nodes.map((n) => ({
              ...n,
              selected: true,
              id: randomId(),
              position: { x: n.position.x + 10, y: n.position.y + 10 },
          }))
        ]);
      }
    },
    [rfInstance]
  );

  useEffect(() => {
    window.addEventListener("copy", onCopyCapture);
    return () => {
      window.removeEventListener("copy", onCopyCapture);
    };
  }, [onCopyCapture]);

  useEffect(() => {
    window.addEventListener("paste", onPasteCapture);
    return () => {
      window.removeEventListener("paste", onPasteCapture);
    };
  }, [onPasteCapture]);
};