diff --git a/ui/src/utils.tsx b/ui/src/utils.tsx
index 1941a05..5375011 100644
--- a/ui/src/utils.tsx
+++ b/ui/src/utils.tsx
@@ -14,7 +14,7 @@ import {
 } from "./const";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare let LiteGraph: any, LGraph: any;
+declare let LiteGraph: any, LGraph: any, LGraphCanvas: any;
 
 // copied from app.js
 function sanitizeNodeName(string: string): string {
@@ -198,13 +198,25 @@ export function insertWorkflowToCanvas(json: string, insertPos?: number[]) {
   }
 
   let tempGraph = new LGraph();
-  tempGraph.configure(graphData);
-  const prevClipboard = localStorage.getItem("litegrapheditor_clipboard");
+  const hiddenCanvas = document.createElement("canvas");
+  hiddenCanvas.style.display = "none"; // Make it hidden
+  document.body.appendChild(hiddenCanvas); // Append to the body to make it part of the DOM
+  let tempCanvas = new LGraphCanvas(hiddenCanvas, tempGraph);
 
-  const graph = app.canvas.graph;
-  app.canvas.setGraph(tempGraph);
+  const prevClipboard = localStorage.getItem("litegrapheditor_clipboard");
+  const prevGraph = app.graph;
+  const prevCanvas = app.canvas;
+  app.canvas = tempCanvas;
+  app.graph = tempGraph;
+  tempGraph.configure(graphData);
   app.canvas.copyToClipboard(tempGraph._nodes);
-  app.canvas.setGraph(graph);
+
+  // clear the tempGraph and remove the hiddenCanvas
+  tempCanvas.graph.clear();
+  document.body.removeChild(hiddenCanvas);
+
+  app.graph = prevGraph;
+  app.canvas = prevCanvas;
   const priorPos = app.canvas.graph_mouse;
   if (insertPos) {
     insertPos[0] -= 15;
@@ -216,8 +228,9 @@ export function insertWorkflowToCanvas(json: string, insertPos?: number[]) {
   if (prevClipboard) {
     localStorage.setItem("litegrapheditor_clipboard", prevClipboard);
   }
-  // Nullify the references to help with garbage collection
+  // Nullify the temporary graph and canvas references for garbage collection
   tempGraph = null;
+  tempCanvas = null;
 }
 
 export const matchShortcut = async (event: KeyboardEvent) => {