diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 59bc77f2d..770cfe229 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -9,45 +9,45 @@ import type {
 	ROLE,
 } from '@/constants';
 import type { IMenuItem, NodeCreatorTag } from 'n8n-design-system';
-import {
-	type GenericValue,
-	type IConnections,
-	type ICredentialsDecrypted,
-	type ICredentialsEncrypted,
-	type ICredentialType,
-	type IDataObject,
-	type INode,
-	type INodeIssues,
-	type INodeParameters,
-	type INodeTypeDescription,
-	type IPinData,
-	type IRunExecutionData,
-	type IRun,
-	type IRunData,
-	type ITaskData,
-	type IWorkflowSettings as IWorkflowSettingsWorkflow,
-	type WorkflowExecuteMode,
-	type PublicInstalledPackage,
-	type INodeTypeNameVersion,
-	type ILoadOptions,
-	type INodeCredentials,
-	type INodeListSearchItems,
-	type NodeParameterValueType,
-	type IDisplayOptions,
-	type ExecutionSummary,
-	type FeatureFlags,
-	type ExecutionStatus,
-	type ITelemetryTrackProperties,
-	type IUserManagementSettings,
-	type WorkflowSettings,
-	type IUserSettings,
-	type IN8nUISettings,
-	type BannerName,
-	type INodeExecutionData,
-	type INodeProperties,
-	type NodeConnectionType,
-	type INodeCredentialsDetails,
-	type StartNodeData,
+import type {
+	GenericValue,
+	IConnections,
+	ICredentialsDecrypted,
+	ICredentialsEncrypted,
+	ICredentialType,
+	IDataObject,
+	INode,
+	INodeIssues,
+	INodeParameters,
+	INodeTypeDescription,
+	IPinData,
+	IRunExecutionData,
+	IRun,
+	IRunData,
+	ITaskData,
+	IWorkflowSettings as IWorkflowSettingsWorkflow,
+	WorkflowExecuteMode,
+	PublicInstalledPackage,
+	INodeTypeNameVersion,
+	ILoadOptions,
+	INodeCredentials,
+	INodeListSearchItems,
+	NodeParameterValueType,
+	IDisplayOptions,
+	ExecutionSummary,
+	FeatureFlags,
+	ExecutionStatus,
+	ITelemetryTrackProperties,
+	IUserManagementSettings,
+	WorkflowSettings,
+	IUserSettings,
+	IN8nUISettings,
+	BannerName,
+	INodeExecutionData,
+	INodeProperties,
+	NodeConnectionType,
+	INodeCredentialsDetails,
+	StartNodeData,
 } from 'n8n-workflow';
 import type { BulkCommand, Undoable } from '@/models/history';
 import type { PartialBy, TupleToUnion } from '@/utils/typeHelpers';
@@ -1805,9 +1805,7 @@ export type AddedNode = {
 	type: string;
 	openDetail?: boolean;
 	isAutoAdd?: boolean;
-	name?: string;
-	position?: XYPosition;
-};
+} & Partial<INodeUi>;
 
 export type AddedNodeConnection = {
 	from: { nodeIndex: number; outputIndex?: number };
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 1ac810219..e3293ccdf 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -48,10 +48,18 @@ const props = withDefaults(
 	},
 );
 
-const { getSelectedEdges, getSelectedNodes, viewportRef, fitView, project } = useVueFlow({
-	id: props.id,
+const { getSelectedEdges, getSelectedNodes, viewportRef, fitView, project, onPaneReady } =
+	useVueFlow({
+		id: props.id,
+	});
+
+onPaneReady(async () => {
+	await onFitView();
+	paneReady.value = true;
 });
 
+const paneReady = ref(false);
+
 /**
  * Nodes
  */
@@ -183,7 +191,7 @@ function onClickPane(event: MouseEvent) {
 }
 
 async function onFitView() {
-	await fitView();
+	await fitView({ maxZoom: 1.2, padding: 0.1 });
 }
 
 /**
@@ -207,12 +215,12 @@ onUnmounted(() => {
 		:nodes="nodes"
 		:edges="connections"
 		:apply-changes="false"
-		fit-view-on-init
 		pan-on-scroll
 		snap-to-grid
 		:snap-grid="[16, 16]"
 		:min-zoom="0.2"
-		:max-zoom="2"
+		:max-zoom="4"
+		:class="[$style.canvas, { [$style.visible]: paneReady }]"
 		data-test-id="canvas"
 		@node-drag-stop="onNodeDragStop"
 		@selection-drag-stop="onSelectionDragStop"
@@ -253,10 +261,21 @@ onUnmounted(() => {
 			data-test-id="canvas-controls"
 			:class="$style.canvasControls"
 			:position="controlsPosition"
+			@fit-view="onFitView"
 		></Controls>
 	</VueFlow>
 </template>
 
+<style lang="scss" module>
+.canvas {
+	opacity: 0;
+
+	&.visible {
+		opacity: 1;
+	}
+}
+</style>
+
 <style lang="scss">
 .vue-flow__controls {
 	display: flex;
diff --git a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
index bc736252d..cb57fe3c1 100644
--- a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
+++ b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
@@ -61,15 +61,114 @@ describe('useCanvasOperations', () => {
 		const workflow = mock<IWorkflowDb>({
 			id: workflowId,
 			nodes: [],
+			connections: {},
 			tags: [],
 			usedCredentials: [],
 		});
-		workflowsStore.workflowsById[workflowId] = workflow;
+
+		workflowsStore.resetWorkflow();
+		workflowsStore.resetState();
 		await workflowHelpers.initState(workflow);
 
 		canvasOperations = useCanvasOperations({ router, lastClickPosition });
 	});
 
+	describe('addNode', () => {
+		it('should throw error when node type does not exist', async () => {
+			vi.spyOn(nodeTypesStore, 'getNodeTypes').mockResolvedValue(undefined);
+
+			await expect(canvasOperations.addNode({ type: 'nonexistent' })).rejects.toThrow();
+		});
+
+		it('should create node with default version when version is undefined', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
+
+			const result = await canvasOperations.addNode({
+				name: 'example',
+				type: 'type',
+			});
+
+			expect(result.typeVersion).toBe(1);
+		});
+
+		it('should create node with last version when version is an array', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type', version: [1, 2] })]);
+
+			const result = await canvasOperations.addNode({
+				type: 'type',
+			});
+
+			expect(result.typeVersion).toBe(2);
+		});
+
+		it('should create node with default position when position is not provided', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
+
+			const result = await canvasOperations.addNode({
+				type: 'type',
+			});
+
+			expect(result.position).toEqual([460, 460]); // Default last click position
+		});
+
+		it('should create node with provided position when position is provided', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
+
+			const result = await canvasOperations.addNode({
+				type: 'type',
+				position: [20, 20],
+			});
+
+			expect(result.position).toEqual([20, 20]);
+		});
+
+		it('should create node with default credentials when only one credential is available', async () => {
+			const credential = mock<ICredentialsResponse>({ id: '1', name: 'cred', type: 'cred' });
+			const nodeTypeName = 'type';
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({ name: nodeTypeName, credentials: [{ name: credential.name }] }),
+			]);
+
+			credentialsStore.addCredentials([credential]);
+
+			// @ts-expect-error Known pinia issue when spying on store getters
+			vi.spyOn(credentialsStore, 'getUsableCredentialByType', 'get').mockReturnValue(() => [
+				credential,
+			]);
+
+			const result = await canvasOperations.addNode({
+				type: nodeTypeName,
+			});
+
+			expect(result.credentials).toEqual({ [credential.name]: { id: '1', name: credential.name } });
+		});
+
+		it('should not assign credentials when multiple credentials are available', async () => {
+			const credentialA = mock<ICredentialsResponse>({ id: '1', name: 'credA', type: 'cred' });
+			const credentialB = mock<ICredentialsResponse>({ id: '1', name: 'credB', type: 'cred' });
+			const nodeTypeName = 'type';
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({
+					name: nodeTypeName,
+					credentials: [{ name: credentialA.name }, { name: credentialB.name }],
+				}),
+			]);
+
+			// @ts-expect-error Known pinia issue when spying on store getters
+			vi.spyOn(credentialsStore, 'getUsableCredentialByType', 'get').mockReturnValue(() => [
+				credentialA,
+				credentialB,
+			]);
+
+			const result = await canvasOperations.addNode({
+				type: 'type',
+			});
+			expect(result.credentials).toBeUndefined();
+		});
+	});
+
 	describe('updateNodePosition', () => {
 		it('should update node position', () => {
 			const setNodePositionByIdSpy = vi
@@ -123,104 +222,6 @@ describe('useCanvasOperations', () => {
 		});
 	});
 
-	describe('initializeNodeDataWithDefaultCredentials', () => {
-		it('should throw error when node type does not exist', async () => {
-			vi.spyOn(nodeTypesStore, 'getNodeTypes').mockResolvedValue(undefined);
-
-			await expect(
-				canvasOperations.initializeNodeDataWithDefaultCredentials({ type: 'nonexistent' }),
-			).rejects.toThrow();
-		});
-
-		it('should create node with default version when version is undefined', async () => {
-			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
-
-			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
-				name: 'example',
-				type: 'type',
-			});
-
-			expect(result.typeVersion).toBe(1);
-		});
-
-		it('should create node with last version when version is an array', async () => {
-			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type', version: [1, 2] })]);
-
-			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
-				type: 'type',
-			});
-
-			expect(result.typeVersion).toBe(2);
-		});
-
-		it('should create node with default position when position is not provided', async () => {
-			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
-
-			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
-				type: 'type',
-			});
-
-			expect(result.position).toEqual([0, 0]);
-		});
-
-		it('should create node with provided position when position is provided', async () => {
-			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
-
-			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
-				type: 'type',
-				position: [10, 20],
-			});
-
-			expect(result.position).toEqual([10, 20]);
-		});
-
-		it('should create node with default credentials when only one credential is available', async () => {
-			const credential = mock<ICredentialsResponse>({ id: '1', name: 'cred', type: 'cred' });
-			const nodeTypeName = 'type';
-
-			nodeTypesStore.setNodeTypes([
-				mockNodeTypeDescription({ name: nodeTypeName, credentials: [{ name: credential.name }] }),
-			]);
-
-			credentialsStore.addCredentials([credential]);
-
-			// @ts-expect-error Known pinia issue when spying on store getters
-			vi.spyOn(credentialsStore, 'getUsableCredentialByType', 'get').mockReturnValue(() => [
-				credential,
-			]);
-
-			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
-				type: nodeTypeName,
-			});
-
-			expect(result.credentials).toEqual({ [credential.name]: { id: '1', name: credential.name } });
-		});
-
-		it('should not assign credentials when multiple credentials are available', async () => {
-			const credentialA = mock<ICredentialsResponse>({ id: '1', name: 'credA', type: 'cred' });
-			const credentialB = mock<ICredentialsResponse>({ id: '1', name: 'credB', type: 'cred' });
-			const nodeTypeName = 'type';
-
-			nodeTypesStore.setNodeTypes([
-				mockNodeTypeDescription({
-					name: nodeTypeName,
-					credentials: [{ name: credentialA.name }, { name: credentialB.name }],
-				}),
-			]);
-
-			// @ts-expect-error Known pinia issue when spying on store getters
-			vi.spyOn(credentialsStore, 'getUsableCredentialByType', 'get').mockReturnValue(() => [
-				credentialA,
-				credentialB,
-			]);
-
-			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
-				type: 'type',
-			});
-			expect(result.credentials).toBeUndefined();
-		});
-	});
-
 	describe('addNodes', () => {
 		it('should add nodes at specified positions', async () => {
 			const nodeTypeName = 'type';
@@ -489,6 +490,7 @@ describe('useCanvasOperations', () => {
 			const nodes = [
 				mockNode({ id: 'a', name: 'Node A', type: nodeTypeName, position: [40, 40] }),
 				mockNode({ id: 'b', name: 'Node B', type: nodeTypeName, position: [40, 40] }),
+				mockNode({ id: 'c', name: 'Node C', type: nodeTypeName, position: [40, 40] }),
 			];
 
 			nodeTypesStore.setNodeTypes([
@@ -504,14 +506,27 @@ describe('useCanvasOperations', () => {
 				.mockReturnValueOnce(nodes[1]);
 
 			const connections = [
-				{ from: { nodeIndex: 0, outputIndex: 0 }, to: { nodeIndex: 1, inputIndex: 0 } },
-				{ from: { nodeIndex: 1, outputIndex: 0 }, to: { nodeIndex: 2, inputIndex: 0 } },
+				{
+					source: nodes[0].id,
+					target: nodes[1].id,
+					data: {
+						source: { type: NodeConnectionType.Main, index: 0 },
+						target: { type: NodeConnectionType.Main, index: 0 },
+					},
+				},
+				{
+					source: nodes[1].id,
+					target: nodes[2].id,
+					data: {
+						source: { type: NodeConnectionType.Main, index: 0 },
+						target: { type: NodeConnectionType.Main, index: 0 },
+					},
+				},
 			];
-			const offsetIndex = 0;
 
 			const addConnectionSpy = vi.spyOn(workflowsStore, 'addConnection');
 
-			await canvasOperations.addConnections(connections, { offsetIndex });
+			await canvasOperations.addConnections(connections);
 
 			expect(addConnectionSpy).toHaveBeenCalledWith({
 				connection: [
diff --git a/packages/editor-ui/src/composables/useCanvasOperations.ts b/packages/editor-ui/src/composables/useCanvasOperations.ts
index 60107e7c8..b0b8b485b 100644
--- a/packages/editor-ui/src/composables/useCanvasOperations.ts
+++ b/packages/editor-ui/src/composables/useCanvasOperations.ts
@@ -3,13 +3,21 @@
  * @TODO Remove this notice when Canvas V2 is the only one in use
  */
 
-import type { CanvasNode } from '@/types';
 import { CanvasConnectionMode } from '@/types';
-import type { AddedNodesAndConnections, INodeUi, XYPosition } from '@/Interface';
+import type { CanvasConnectionCreateData, CanvasNode, CanvasConnection } from '@/types';
+import type {
+	AddedNodesAndConnections,
+	INodeUi,
+	ITag,
+	IWorkflowDataUpdate,
+	IWorkflowDb,
+	XYPosition,
+} from '@/Interface';
 import {
 	FORM_TRIGGER_NODE_TYPE,
 	QUICKSTART_NOTE_NAME,
 	STICKY_NODE_TYPE,
+	UPDATE_WEBHOOK_ID_NODE_TYPES,
 	WEBHOOK_NODE_TYPE,
 } from '@/constants';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -28,21 +36,26 @@ import type { Connection } from '@vue-flow/core';
 import {
 	createCanvasConnectionHandleString,
 	getUniqueNodeName,
-	getVueFlowConnectorLengths,
 	mapCanvasConnectionToLegacyConnection,
+	mapLegacyConnectionsToCanvasConnections,
 	parseCanvasConnectionHandleString,
 } from '@/utils/canvasUtilsV2';
 import type {
 	ConnectionTypes,
 	IConnection,
+	IConnections,
+	INodeConnections,
 	INodeInputConfiguration,
 	INodeOutputConfiguration,
 	INodeTypeDescription,
 	INodeTypeNameVersion,
 	ITelemetryTrackProperties,
+	IWorkflowBase,
+	Workflow,
+	INode,
 	NodeParameterValueType,
 } from 'n8n-workflow';
-import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers, TelemetryHelpers } from 'n8n-workflow';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useI18n } from '@/composables/useI18n';
@@ -56,6 +69,13 @@ import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import type { useRouter } from 'vue-router';
 import { useCanvasStore } from '@/stores/canvas.store';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { usePinnedData } from '@/composables/usePinnedData';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTagsStore } from '@/stores/tags.store';
+import { useRootStore } from '@/stores/root.store';
+import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+import { useExecutionsStore } from '@/stores/executions.store';
+import { isValidNodeConnectionType } from '@/utils/typeGuards';
 
 type AddNodeData = Partial<INodeUi> & {
 	type: string;
@@ -75,6 +95,7 @@ export function useCanvasOperations({
 	router: ReturnType<typeof useRouter>;
 	lastClickPosition: Ref<XYPosition>;
 }) {
+	const rootStore = useRootStore();
 	const workflowsStore = useWorkflowsStore();
 	const credentialsStore = useCredentialsStore();
 	const historyStore = useHistoryStore();
@@ -82,6 +103,10 @@ export function useCanvasOperations({
 	const ndvStore = useNDVStore();
 	const nodeTypesStore = useNodeTypesStore();
 	const canvasStore = useCanvasStore();
+	const settingsStore = useSettingsStore();
+	const tagsStore = useTagsStore();
+	const nodeCreatorStore = useNodeCreatorStore();
+	const executionsStore = useExecutionsStore();
 
 	const i18n = useI18n();
 	const toast = useToast();
@@ -273,28 +298,29 @@ export function useCanvasOperations({
 
 	async function addNodes(
 		nodes: AddedNodesAndConnections['nodes'],
-		{
-			dragAndDrop,
-			position,
-		}: {
+		options: {
 			dragAndDrop?: boolean;
 			position?: XYPosition;
 		} = {},
 	) {
-		let currentPosition = position;
+		let insertPosition = options.position;
 		let lastAddedNode: INodeUi | undefined;
-		for (const { isAutoAdd, openDetail, ...nodeData } of nodes) {
+
+		for (const nodeAddData of nodes) {
+			const { isAutoAdd, openDetail: openNDV, ...node } = nodeAddData;
+			const position = node.position ?? insertPosition;
+
 			try {
-				await createNode(
+				lastAddedNode = await addNode(
 					{
-						...nodeData,
-						position: nodeData.position ?? currentPosition,
+						...node,
+						position,
 					},
 					{
-						dragAndDrop,
-						openNDV: openDetail ?? false,
-						trackHistory: true,
+						...options,
+						openNDV,
 						isAutoAdd,
+						trackHistory: true,
 					},
 				);
 			} catch (error) {
@@ -302,24 +328,25 @@ export function useCanvasOperations({
 				continue;
 			}
 
-			lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
-			currentPosition = [
+			// When we're adding multiple nodes, increment the X position for the next one
+			insertPosition = [
 				lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
 				lastAddedNode.position[1],
 			];
 		}
 
-		// If the last added node has multiple inputs, move them down
-		if (!lastAddedNode) {
-			return;
+		if (lastAddedNode) {
+			// @TODO Figure out what this does and why it's needed
+			updatePositionForNodeWithMultipleInputs(lastAddedNode);
 		}
-		const lastNodeInputs = editableWorkflowObject.value.getParentNodesByDepth(
-			lastAddedNode.name,
-			1,
-		);
-		if (lastNodeInputs.length > 1) {
-			lastNodeInputs.slice(1).forEach((node, index) => {
-				const nodeUi = workflowsStore.getNodeByName(node.name);
+	}
+
+	function updatePositionForNodeWithMultipleInputs(node: INodeUi) {
+		const inputNodes = editableWorkflowObject.value.getParentNodesByDepth(node.name, 1);
+
+		if (inputNodes.length > 1) {
+			inputNodes.slice(1).forEach((inputNode, index) => {
+				const nodeUi = workflowsStore.getNodeByName(inputNode.name);
 				if (!nodeUi) return;
 
 				updateNodePosition(nodeUi.id, {
@@ -330,456 +357,196 @@ export function useCanvasOperations({
 		}
 	}
 
-	async function createNode(node: AddNodeData, options: AddNodeOptions = {}): Promise<INodeUi> {
-		const newNodeData = await resolveNodeData(node, options);
-		if (!newNodeData) {
+	async function addNode(node: AddNodeData, options: AddNodeOptions = {}): Promise<INodeUi> {
+		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+		if (!nodeTypeDescription) {
+			throw new Error(
+				i18n.baseText('nodeView.showMessage.addNodeButton.message', {
+					interpolate: { nodeTypeName: node.type },
+				}),
+			);
+		}
+
+		// Check if maximum allowed number of this type of node has been reached
+		if (
+			nodeTypeDescription.maxNodes !== undefined &&
+			workflowHelpers.getNodeTypeCount(node.type) >= nodeTypeDescription.maxNodes
+		) {
+			throw new Error(
+				i18n.baseText('nodeView.showMessage.showMaxNodeTypeError.message', {
+					adjustToNumber: nodeTypeDescription.maxNodes,
+					interpolate: { nodeTypeDataDisplayName: nodeTypeDescription.displayName },
+				}),
+			);
+		}
+
+		const nodeData = await resolveNodeData(node, nodeTypeDescription);
+		if (!nodeData) {
 			throw new Error(i18n.baseText('nodeViewV2.showError.failedToCreateNode'));
 		}
 
-		/**
-		 * @TODO Check if maximum node type limit reached
-		 */
-
-		newNodeData.name = getUniqueNodeName(newNodeData.name, workflowsStore.canvasNames);
-
-		workflowsStore.addNode(newNodeData);
-
-		nodeHelpers.matchCredentials(newNodeData);
-
-		const lastSelectedNode = uiStore.getLastSelectedNode;
-		const lastSelectedNodeConnection = uiStore.lastSelectedNodeConnection;
-		const lastSelectedNodeOutputIndex = uiStore.lastSelectedNodeOutputIndex;
-		const lastSelectedNodeEndpointUuid = uiStore.lastSelectedNodeEndpointUuid;
-
 		historyStore.startRecordingUndo();
 		if (options.trackHistory) {
-			historyStore.pushCommandToUndo(new AddNodeCommand(newNodeData));
+			historyStore.pushCommandToUndo(new AddNodeCommand(nodeData));
 		}
 
-		const outputIndex = lastSelectedNodeOutputIndex ?? 0;
-		const targetEndpoint = lastSelectedNodeEndpointUuid ?? '';
+		workflowsStore.addNode(nodeData);
+		nodeHelpers.matchCredentials(nodeData);
 
-		// Create a connection between the last selected node and the new one
-		if (lastSelectedNode && !options.isAutoAdd) {
-			// If we have a specific endpoint to connect to
-			if (lastSelectedNodeEndpointUuid) {
-				const { type: connectionType, mode } = parseCanvasConnectionHandleString(
-					lastSelectedNodeEndpointUuid,
-				);
+		if (!options.isAutoAdd) {
+			createConnectionToLastInteractedWithNode(nodeData, options);
+		}
 
-				const newNodeId = newNodeData.id;
-				const newNodeHandle = `${CanvasConnectionMode.Input}/${connectionType}/0`;
-				const lasSelectedNodeId = lastSelectedNode.id;
-				const lastSelectedNodeHandle = targetEndpoint;
+		runAddNodeHooks(nodeData, options);
 
-				if (mode === CanvasConnectionMode.Input) {
-					createConnection({
-						source: newNodeId,
-						sourceHandle: newNodeHandle,
-						target: lasSelectedNodeId,
-						targetHandle: lastSelectedNodeHandle,
-					});
-				} else {
-					createConnection({
-						source: lasSelectedNodeId,
-						sourceHandle: lastSelectedNodeHandle,
-						target: newNodeId,
-						targetHandle: newNodeHandle,
-					});
-				}
-			} else {
-				// If a node is last selected then connect between the active and its child ones
-				// Connect active node to the newly created one
+		historyStore.stopRecordingUndo();
+
+		workflowsStore.setNodePristine(nodeData.name, true);
+		uiStore.stateIsDirty = true;
+
+		return nodeData;
+	}
+
+	function createConnectionToLastInteractedWithNode(node: INodeUi, options: AddNodeOptions = {}) {
+		const lastInteractedWithNode = uiStore.lastInteractedWithNode;
+		if (!lastInteractedWithNode) {
+			return;
+		}
+
+		const lastInteractedWithNodeId = lastInteractedWithNode.id;
+		const lastInteractedWithNodeConnection = uiStore.lastInteractedWithNodeConnection;
+		const lastInteractedWithNodeHandle = uiStore.lastInteractedWithNodeHandle;
+
+		// If we have a specific endpoint to connect to
+		if (lastInteractedWithNodeHandle) {
+			const { type: connectionType, mode } = parseCanvasConnectionHandleString(
+				lastInteractedWithNodeHandle,
+			);
+
+			const nodeId = node.id;
+			const nodeHandle = createCanvasConnectionHandleString({
+				mode: CanvasConnectionMode.Input,
+				type: connectionType,
+				index: 0,
+			});
+
+			if (mode === CanvasConnectionMode.Input) {
 				createConnection({
-					source: lastSelectedNode.id,
+					source: nodeId,
+					sourceHandle: nodeHandle,
+					target: lastInteractedWithNodeId,
+					targetHandle: lastInteractedWithNodeHandle,
+				});
+			} else {
+				createConnection({
+					source: lastInteractedWithNodeId,
+					sourceHandle: lastInteractedWithNodeHandle,
+					target: nodeId,
+					targetHandle: nodeHandle,
+				});
+			}
+		} else {
+			// If a node is last selected then connect between the active and its child ones
+			// Connect active node to the newly created one
+			createConnection({
+				source: lastInteractedWithNodeId,
+				sourceHandle: createCanvasConnectionHandleString({
+					mode: CanvasConnectionMode.Output,
+					type: NodeConnectionType.Main,
+					index: 0,
+				}),
+				target: node.id,
+				targetHandle: createCanvasConnectionHandleString({
+					mode: CanvasConnectionMode.Input,
+					type: NodeConnectionType.Main,
+					index: 0,
+				}),
+			});
+		}
+
+		if (lastInteractedWithNodeConnection) {
+			deleteConnection(lastInteractedWithNodeConnection, { trackHistory: options.trackHistory });
+
+			const targetNode = workflowsStore.getNodeById(lastInteractedWithNodeConnection.target);
+			if (targetNode) {
+				createConnection({
+					source: node.id,
 					sourceHandle: createCanvasConnectionHandleString({
-						mode: CanvasConnectionMode.Output,
-						type: NodeConnectionType.Main,
-						index: outputIndex,
-					}),
-					target: newNodeData.id,
-					targetHandle: createCanvasConnectionHandleString({
 						mode: CanvasConnectionMode.Input,
 						type: NodeConnectionType.Main,
 						index: 0,
 					}),
+					target: lastInteractedWithNodeConnection.target,
+					targetHandle: lastInteractedWithNodeConnection.targetHandle,
 				});
 			}
-
-			if (lastSelectedNodeConnection) {
-				deleteConnection(lastSelectedNodeConnection, { trackHistory: options.trackHistory });
-
-				const targetNode = workflowsStore.getNodeById(lastSelectedNodeConnection.target);
-				if (targetNode) {
-					createConnection({
-						source: newNodeData.id,
-						sourceHandle: createCanvasConnectionHandleString({
-							mode: CanvasConnectionMode.Input,
-							type: NodeConnectionType.Main,
-							index: 0,
-						}),
-						target: lastSelectedNodeConnection.target,
-						targetHandle: lastSelectedNodeConnection.targetHandle,
-					});
-				}
-			}
 		}
-
-		historyStore.stopRecordingUndo();
-
-		return newNodeData;
 	}
 
-	async function initializeNodeDataWithDefaultCredentials(node: AddNodeData) {
-		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
-		if (!nodeTypeDescription) {
-			throw new Error(i18n.baseText('nodeViewV2.showError.failedToCreateNode'));
+	function runAddNodeHooks(nodeData: INodeUi, options: AddNodeOptions) {
+		switch (nodeData.type) {
+			case STICKY_NODE_TYPE:
+				trackAddStickyNoteNode();
+				break;
+			default:
+				void externalHooks.run('nodeView.addNodeButton', { nodeTypeName: nodeData.type });
+				trackAddDefaultNode(nodeData, options);
 		}
+	}
 
-		let nodeVersion = nodeTypeDescription.defaultVersion;
-		if (typeof nodeVersion === 'undefined') {
-			nodeVersion = Array.isArray(nodeTypeDescription.version)
-				? nodeTypeDescription.version.slice(-1)[0]
-				: nodeTypeDescription.version;
-		}
+	function trackAddStickyNoteNode() {
+		telemetry.trackNodesPanel('nodeView.addSticky', {
+			workflow_id: workflowsStore.workflowId,
+		});
+	}
 
-		const newNodeData: INodeUi = {
-			...node,
-			id: node.id ?? uuid(),
-			name: node.name ?? (nodeTypeDescription.defaults.name as string),
-			type: nodeTypeDescription.name,
-			typeVersion: nodeVersion,
-			position: node.position ?? [0, 0],
-			disabled: node.disabled ?? false,
-			parameters: node.parameters ?? {},
+	function trackAddDefaultNode(nodeData: INodeUi, options: AddNodeOptions) {
+		const trackProperties: ITelemetryTrackProperties = {
+			node_type: nodeData.type,
+			node_version: nodeData.typeVersion,
+			is_auto_add: options.isAutoAdd,
+			workflow_id: workflowsStore.workflowId,
+			drag_and_drop: options.dragAndDrop,
 		};
 
-		await loadNodeTypesProperties([{ name: newNodeData.type, version: newNodeData.typeVersion }]);
-
-		const nodeType = nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
-		const nodeParameters = NodeHelpers.getNodeParameters(
-			nodeType?.properties ?? [],
-			node.parameters ?? {},
-			true,
-			false,
-			newNodeData,
-		);
-
-		newNodeData.parameters = nodeParameters ?? {};
-
-		const credentialPerType = nodeTypeDescription.credentials
-			?.map((type) => credentialsStore.getUsableCredentialByType(type.name))
-			.flat();
-
-		if (credentialPerType?.length === 1) {
-			const defaultCredential = credentialPerType[0];
-
-			const selectedCredentials = credentialsStore.getCredentialById(defaultCredential.id);
-			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
-			const credentials = {
-				[defaultCredential.type]: selected,
-			};
-
-			if (nodeTypeDescription.credentials) {
-				const authentication = nodeTypeDescription.credentials.find(
-					(type) => type.name === defaultCredential.type,
-				);
-				if (authentication?.displayOptions?.hide) {
-					return newNodeData;
-				}
-
-				const authDisplayOptions = authentication?.displayOptions?.show;
-				if (!authDisplayOptions) {
-					newNodeData.credentials = credentials;
-					return newNodeData;
-				}
-
-				if (Object.keys(authDisplayOptions).length === 1 && authDisplayOptions.authentication) {
-					// ignore complex case when there's multiple dependencies
-					newNodeData.credentials = credentials;
-
-					let parameters: { [key: string]: string } = {};
-					for (const displayOption of Object.keys(authDisplayOptions)) {
-						if (nodeParameters && !nodeParameters[displayOption]) {
-							parameters = {};
-							newNodeData.credentials = undefined;
-							break;
-						}
-						const optionValue = authDisplayOptions[displayOption]?.[0];
-						if (optionValue && typeof optionValue === 'string') {
-							parameters[displayOption] = optionValue;
-						}
-						newNodeData.parameters = {
-							...newNodeData.parameters,
-							...parameters,
-						};
-					}
-				}
-			}
+		if (uiStore.lastInteractedWithNode) {
+			trackProperties.input_node_type = uiStore.lastInteractedWithNode.type;
 		}
 
-		return newNodeData;
+		telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
 	}
 
 	/**
 	 * Resolves the data for a new node
 	 */
-	async function resolveNodeData(node: AddNodeData, options: AddNodeOptions = {}) {
-		const nodeTypeDescription: INodeTypeDescription | null = nodeTypesStore.getNodeType(node.type);
-		if (nodeTypeDescription === null) {
-			toast.showMessage({
-				title: i18n.baseText('nodeView.showMessage.addNodeButton.title'),
-				message: i18n.baseText('nodeView.showMessage.addNodeButton.message', {
-					interpolate: { nodeTypeName: node.type },
-				}),
-				type: 'error',
-			});
-			return;
-		}
+	async function resolveNodeData(node: AddNodeData, nodeTypeDescription: INodeTypeDescription) {
+		const id = node.id ?? uuid();
+		const name = node.name ?? (nodeTypeDescription.defaults.name as string);
+		const type = nodeTypeDescription.name;
+		const typeVersion = resolveNodeVersion(nodeTypeDescription);
+		const position = resolveNodePosition(node as INodeUi, nodeTypeDescription);
+		const disabled = node.disabled ?? false;
+		const parameters = node.parameters ?? {};
 
-		if (
-			nodeTypeDescription.maxNodes !== undefined &&
-			workflowHelpers.getNodeTypeCount(node.type) >= nodeTypeDescription.maxNodes
-		) {
-			showMaxNodeTypeError(nodeTypeDescription);
-			return;
-		}
+		const nodeData: INodeUi = {
+			...node,
+			id,
+			name,
+			type,
+			typeVersion,
+			position,
+			disabled,
+			parameters,
+		};
 
-		const newNodeData = await initializeNodeDataWithDefaultCredentials(node);
+		await loadNodeTypesProperties([{ name: nodeData.type, version: nodeData.typeVersion }]);
 
-		// When pulling new connection from node or injecting into a connection
-		const lastSelectedNode = uiStore.getLastSelectedNode;
+		resolveNodeParameters(nodeData);
+		resolveNodeCredentials(nodeData, nodeTypeDescription);
+		resolveNodeName(nodeData);
+		resolveNodeWebhook(nodeData, nodeTypeDescription);
 
-		if (node.position) {
-			newNodeData.position = NodeViewUtils.getNewNodePosition(
-				canvasStore.getNodesWithPlaceholderNode(),
-				node.position,
-			);
-		} else if (lastSelectedNode) {
-			if (uiStore.lastSelectedNodeConnection) {
-				// set when injecting into a connection
-				const [diffX] = getVueFlowConnectorLengths(uiStore.lastSelectedNodeConnection);
-
-				if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
-					pushDownstreamNodes(lastSelectedNode.name, NodeViewUtils.PUSH_NODES_OFFSET, {
-						trackHistory: options.trackHistory,
-					});
-				}
-			}
-
-			// This position is set in `onMouseUp` when pulling connections
-			if (canvasStore.newNodeInsertPosition) {
-				newNodeData.position = NodeViewUtils.getNewNodePosition(workflowsStore.allNodes, [
-					canvasStore.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
-					canvasStore.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
-				]);
-				canvasStore.newNodeInsertPosition = null;
-			} else {
-				let yOffset = 0;
-				if (uiStore.lastSelectedNodeConnection) {
-					const sourceNodeType = nodeTypesStore.getNodeType(
-						lastSelectedNode.type,
-						lastSelectedNode.typeVersion,
-					);
-
-					if (sourceNodeType) {
-						const offsets = [
-							[-100, 100],
-							[-140, 0, 140],
-							[-240, -100, 100, 240],
-						];
-
-						const sourceNodeOutputs = NodeHelpers.getNodeOutputs(
-							editableWorkflowObject.value,
-							lastSelectedNode,
-							sourceNodeType,
-						);
-						const sourceNodeOutputTypes = NodeHelpers.getConnectionTypes(sourceNodeOutputs);
-						const sourceNodeOutputMainOutputs = sourceNodeOutputTypes.filter(
-							(output) => output === NodeConnectionType.Main,
-						);
-
-						if (sourceNodeOutputMainOutputs.length > 1) {
-							const { index: sourceOutputIndex } = parseCanvasConnectionHandleString(
-								uiStore.lastSelectedNodeConnection.sourceHandle,
-							);
-							const offset = offsets[sourceNodeOutputMainOutputs.length - 2];
-							yOffset = offset[sourceOutputIndex];
-						}
-					}
-				}
-
-				let outputs: Array<ConnectionTypes | INodeOutputConfiguration> = [];
-				try {
-					// It fails when the outputs are an expression. As those nodes have
-					// normally no outputs by default and the only reason we need the
-					// outputs here is to calculate the position, it is fine to assume
-					// that they have no outputs and are so treated as a regular node
-					// with only "main" outputs.
-					outputs = NodeHelpers.getNodeOutputs(
-						editableWorkflowObject.value,
-						newNodeData,
-						nodeTypeDescription,
-					);
-				} catch (e) {}
-				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
-				const lastSelectedNodeType = nodeTypesStore.getNodeType(
-					lastSelectedNode.type,
-					lastSelectedNode.typeVersion,
-				);
-
-				// If node has only scoped outputs, position it below the last selected node
-				if (
-					outputTypes.length > 0 &&
-					outputTypes.every((outputName) => outputName !== NodeConnectionType.Main)
-				) {
-					const lastSelectedNodeWorkflow = editableWorkflowObject.value.getNode(
-						lastSelectedNode.name,
-					);
-					if (!lastSelectedNodeWorkflow || !lastSelectedNodeType) {
-						return;
-					}
-
-					const lastSelectedInputs = NodeHelpers.getNodeInputs(
-						editableWorkflowObject.value,
-						lastSelectedNodeWorkflow,
-						lastSelectedNodeType,
-					);
-					const lastSelectedInputTypes = NodeHelpers.getConnectionTypes(lastSelectedInputs);
-
-					const scopedConnectionIndex = (lastSelectedInputTypes || [])
-						.filter((input) => input !== NodeConnectionType.Main)
-						.findIndex((inputType) => outputs[0] === inputType);
-
-					newNodeData.position = NodeViewUtils.getNewNodePosition(
-						workflowsStore.allNodes,
-						[
-							lastSelectedNode.position[0] +
-								(NodeViewUtils.NODE_SIZE /
-									(Math.max(lastSelectedNodeType?.inputs?.length ?? 1), 1)) *
-									scopedConnectionIndex,
-							lastSelectedNode.position[1] + NodeViewUtils.PUSH_NODES_OFFSET,
-						],
-						[100, 0],
-					);
-				} else {
-					if (!lastSelectedNodeType) {
-						return;
-					}
-
-					// Has only main outputs or no outputs at all
-					const inputs = NodeHelpers.getNodeInputs(
-						editableWorkflowObject.value,
-						lastSelectedNode,
-						lastSelectedNodeType,
-					);
-					const inputsTypes = NodeHelpers.getConnectionTypes(inputs);
-
-					let pushOffset = NodeViewUtils.PUSH_NODES_OFFSET;
-					if (!!inputsTypes.find((input) => input !== NodeConnectionType.Main)) {
-						// If the node has scoped inputs, push it down a bit more
-						pushOffset += 150;
-					}
-
-					// If a node is active then add the new node directly after the current one
-					newNodeData.position = NodeViewUtils.getNewNodePosition(
-						workflowsStore.allNodes,
-						[lastSelectedNode.position[0] + pushOffset, lastSelectedNode.position[1] + yOffset],
-						[100, 0],
-					);
-				}
-			}
-		} else {
-			// If added node is a trigger and it's the first one added to the canvas
-			// we place it at canvasAddButtonPosition to replace the canvas add button
-			const position =
-				nodeTypesStore.isTriggerNode(node.type) && triggerNodes.value.length === 0
-					? canvasStore.canvasAddButtonPosition
-					: // If no node is active find a free spot
-						(lastClickPosition.value as XYPosition);
-
-			newNodeData.position = NodeViewUtils.getNewNodePosition(workflowsStore.allNodes, position);
-		}
-
-		const localizedName = i18n.localizeNodeName(newNodeData.name, newNodeData.type);
-
-		newNodeData.name = getUniqueNodeName(localizedName, workflowsStore.canvasNames);
-
-		if (nodeTypeDescription.webhooks?.length) {
-			newNodeData.webhookId = uuid();
-		}
-
-		// if it's a webhook and the path is empty set the UUID as the default path
-		if (
-			[WEBHOOK_NODE_TYPE, FORM_TRIGGER_NODE_TYPE].includes(newNodeData.type) &&
-			newNodeData.parameters.path === ''
-		) {
-			newNodeData.parameters.path = newNodeData.webhookId as string;
-		}
-
-		workflowsStore.setNodePristine(newNodeData.name, true);
-		uiStore.stateIsDirty = true;
-
-		if (node.type === STICKY_NODE_TYPE) {
-			telemetry.trackNodesPanel('nodeView.addSticky', {
-				workflow_id: workflowsStore.workflowId,
-			});
-		} else {
-			void externalHooks.run('nodeView.addNodeButton', { nodeTypeName: node.type });
-			const trackProperties: ITelemetryTrackProperties = {
-				node_type: node.type,
-				node_version: newNodeData.typeVersion,
-				is_auto_add: options.isAutoAdd,
-				workflow_id: workflowsStore.workflowId,
-				drag_and_drop: options.dragAndDrop,
-			};
-
-			if (lastSelectedNode) {
-				trackProperties.input_node_type = lastSelectedNode.type;
-			}
-
-			telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
-		}
-
-		// Automatically deselect all nodes and select the current one and also active
-		// current node. But only if it's added manually by the user (not by undo/redo mechanism)
-		// @TODO
-		// if (trackHistory) {
-		// 	this.deselectAllNodes();
-		// 	setTimeout(() => {
-		// 		this.nodeSelectedByName(newNodeData.name, showDetail && nodeTypeName !== STICKY_NODE_TYPE);
-		// 	});
-		// }
-
-		return newNodeData;
-	}
-
-	function pushDownstreamNodes(
-		sourceNodeName: string,
-		margin: number,
-		{ trackHistory = false }: { trackHistory?: boolean },
-	) {
-		const sourceNode = workflowsStore.nodesByName[sourceNodeName];
-		const checkNodes = workflowHelpers.getConnectedNodes(
-			'downstream',
-			editableWorkflowObject.value,
-			sourceNodeName,
-		);
-		for (const nodeName of checkNodes) {
-			const node = workflowsStore.nodesByName[nodeName];
-			if (node.position[0] < sourceNode.position[0]) {
-				continue;
-			}
-
-			updateNodePosition(
-				node.id,
-				{
-					x: node.position[0] + margin,
-					y: node.position[1],
-				},
-				{ trackHistory },
-			);
-		}
+		return nodeData;
 	}
 
 	async function loadNodeTypesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
@@ -811,17 +578,288 @@ export function useCanvasOperations({
 		}
 	}
 
-	function showMaxNodeTypeError(nodeTypeDescription: INodeTypeDescription) {
-		const maxNodes = nodeTypeDescription.maxNodes;
-		toast.showMessage({
-			title: i18n.baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
-			message: i18n.baseText('nodeView.showMessage.showMaxNodeTypeError.message', {
-				adjustToNumber: maxNodes,
-				interpolate: { nodeTypeDataDisplayName: nodeTypeDescription.displayName },
-			}),
-			type: 'error',
-			duration: 0,
-		});
+	function resolveNodeVersion(nodeTypeDescription: INodeTypeDescription) {
+		let nodeVersion = nodeTypeDescription.defaultVersion;
+
+		if (typeof nodeVersion === 'undefined') {
+			nodeVersion = Array.isArray(nodeTypeDescription.version)
+				? nodeTypeDescription.version.slice(-1)[0]
+				: nodeTypeDescription.version;
+		}
+
+		return nodeVersion;
+	}
+
+	function resolveNodeParameters(node: INodeUi) {
+		const nodeType = nodeTypesStore.getNodeType(node.type, node.typeVersion);
+		const nodeParameters = NodeHelpers.getNodeParameters(
+			nodeType?.properties ?? [],
+			node.parameters,
+			true,
+			false,
+			node,
+		);
+
+		node.parameters = nodeParameters ?? {};
+	}
+
+	function resolveNodeCredentials(node: INodeUi, nodeTypeDescription: INodeTypeDescription) {
+		const credentialPerType = nodeTypeDescription.credentials
+			?.map((type) => credentialsStore.getUsableCredentialByType(type.name))
+			.flat();
+
+		if (credentialPerType?.length === 1) {
+			const defaultCredential = credentialPerType[0];
+
+			const selectedCredentials = credentialsStore.getCredentialById(defaultCredential.id);
+			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
+			const credentials = {
+				[defaultCredential.type]: selected,
+			};
+
+			if (nodeTypeDescription.credentials) {
+				const authentication = nodeTypeDescription.credentials.find(
+					(type) => type.name === defaultCredential.type,
+				);
+
+				const authDisplayOptionsHide = authentication?.displayOptions?.hide;
+				const authDisplayOptionsShow = authentication?.displayOptions?.show;
+
+				if (!authDisplayOptionsHide) {
+					if (!authDisplayOptionsShow) {
+						node.credentials = credentials;
+					} else if (
+						Object.keys(authDisplayOptionsShow).length === 1 &&
+						authDisplayOptionsShow.authentication
+					) {
+						// ignore complex case when there's multiple dependencies
+						node.credentials = credentials;
+
+						let parameters: { [key: string]: string } = {};
+						for (const displayOption of Object.keys(authDisplayOptionsShow)) {
+							if (node.parameters && !node.parameters[displayOption]) {
+								parameters = {};
+								node.credentials = undefined;
+								break;
+							}
+							const optionValue = authDisplayOptionsShow[displayOption]?.[0];
+							if (optionValue && typeof optionValue === 'string') {
+								parameters[displayOption] = optionValue;
+							}
+							node.parameters = {
+								...node.parameters,
+								...parameters,
+							};
+						}
+					}
+				}
+			}
+		}
+	}
+
+	function resolveNodePosition(node: INodeUi, nodeTypeDescription: INodeTypeDescription) {
+		if (node.position) {
+			return NodeViewUtils.getNewNodePosition(
+				canvasStore.getNodesWithPlaceholderNode(),
+				node.position,
+			);
+		}
+
+		const lastInteractedWithNode = uiStore.lastInteractedWithNode;
+		const lastInteractedWithNodeConnection = uiStore.lastInteractedWithNodeConnection;
+		if (lastInteractedWithNode) {
+			const lastSelectedNodeTypeDescription = nodeTypesStore.getNodeType(
+				lastInteractedWithNode.type,
+				lastInteractedWithNode.typeVersion,
+			);
+			const lastInteractedWithNodeObject = editableWorkflowObject.value.getNode(
+				lastInteractedWithNode.name,
+			);
+
+			if (lastInteractedWithNodeConnection) {
+				shiftDownstreamNodesPosition(lastInteractedWithNode.name, NodeViewUtils.PUSH_NODES_OFFSET, {
+					trackHistory: true,
+				});
+			}
+
+			// This position is set in `onMouseUp` when pulling connections
+			const newNodeInsertPosition = canvasStore.newNodeInsertPosition;
+			if (newNodeInsertPosition) {
+				canvasStore.newNodeInsertPosition = null;
+				return NodeViewUtils.getNewNodePosition(workflowsStore.allNodes, [
+					newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
+					newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
+				]);
+			} else {
+				let yOffset = 0;
+
+				// Compute the y offset for the new node based on the number of main outputs of the source node
+				if (uiStore.lastInteractedWithNodeConnection) {
+					const sourceNodeType = nodeTypesStore.getNodeType(
+						lastInteractedWithNode.type,
+						lastInteractedWithNode.typeVersion,
+					);
+
+					if (sourceNodeType) {
+						const offsets = [
+							[-100, 100],
+							[-140, 0, 140],
+							[-240, -100, 100, 240],
+						];
+
+						const sourceNodeOutputs = NodeHelpers.getNodeOutputs(
+							editableWorkflowObject.value,
+							lastInteractedWithNode,
+							sourceNodeType,
+						);
+						const sourceNodeOutputTypes = NodeHelpers.getConnectionTypes(sourceNodeOutputs);
+						const sourceNodeOutputMainOutputs = sourceNodeOutputTypes.filter(
+							(output) => output === NodeConnectionType.Main,
+						);
+
+						if (sourceNodeOutputMainOutputs.length > 1) {
+							const { index: sourceOutputIndex } = parseCanvasConnectionHandleString(
+								uiStore.lastInteractedWithNodeConnection.sourceHandle,
+							);
+							const offset = offsets[sourceNodeOutputMainOutputs.length - 2];
+							yOffset = offset[sourceOutputIndex];
+						}
+					}
+				}
+
+				let outputs: Array<ConnectionTypes | INodeOutputConfiguration> = [];
+				try {
+					// It fails when the outputs are an expression. As those nodes have
+					// normally no outputs by default and the only reason we need the
+					// outputs here is to calculate the position, it is fine to assume
+					// that they have no outputs and are so treated as a regular node
+					// with only "main" outputs.
+					outputs = NodeHelpers.getNodeOutputs(
+						editableWorkflowObject.value,
+						node,
+						nodeTypeDescription,
+					);
+				} catch (e) {}
+				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+				// If node has only scoped outputs, position it below the last selected node
+				if (lastSelectedNodeTypeDescription) {
+					if (
+						lastInteractedWithNodeObject &&
+						outputTypes.length > 0 &&
+						outputTypes.every((outputName) => outputName !== NodeConnectionType.Main)
+					) {
+						const lastSelectedInputs = NodeHelpers.getNodeInputs(
+							editableWorkflowObject.value,
+							lastInteractedWithNodeObject,
+							lastSelectedNodeTypeDescription,
+						);
+						const lastSelectedInputTypes = NodeHelpers.getConnectionTypes(lastSelectedInputs);
+
+						const scopedConnectionIndex = (lastSelectedInputTypes || [])
+							.filter((input) => input !== NodeConnectionType.Main)
+							.findIndex((inputType) => outputs[0] === inputType);
+
+						return NodeViewUtils.getNewNodePosition(
+							workflowsStore.allNodes,
+							[
+								lastInteractedWithNode.position[0] +
+									(NodeViewUtils.NODE_SIZE /
+										(Math.max(lastSelectedNodeTypeDescription?.inputs?.length ?? 1), 1)) *
+										scopedConnectionIndex,
+								lastInteractedWithNode.position[1] + NodeViewUtils.PUSH_NODES_OFFSET,
+							],
+							[100, 0],
+						);
+					} else {
+						// Has only main outputs or no outputs at all
+						const inputs = NodeHelpers.getNodeInputs(
+							editableWorkflowObject.value,
+							lastInteractedWithNode,
+							lastSelectedNodeTypeDescription,
+						);
+						const inputsTypes = NodeHelpers.getConnectionTypes(inputs);
+
+						let pushOffset = NodeViewUtils.PUSH_NODES_OFFSET;
+						if (!!inputsTypes.find((input) => input !== NodeConnectionType.Main)) {
+							// If the node has scoped inputs, push it down a bit more
+							pushOffset += 150;
+						}
+
+						// If a node is active then add the new node directly after the current one
+						return NodeViewUtils.getNewNodePosition(
+							workflowsStore.allNodes,
+							[
+								lastInteractedWithNode.position[0] + pushOffset,
+								lastInteractedWithNode.position[1] + yOffset,
+							],
+							[100, 0],
+						);
+					}
+				}
+			}
+		}
+
+		// If added node is a trigger and it's the first one added to the canvas
+		// we place it at canvasAddButtonPosition to replace the canvas add button
+		const position =
+			nodeTypesStore.isTriggerNode(node.type) && triggerNodes.value.length === 0
+				? canvasStore.canvasAddButtonPosition
+				: // If no node is active find a free spot
+					(lastClickPosition.value as XYPosition);
+
+		return NodeViewUtils.getNewNodePosition(workflowsStore.allNodes, position);
+	}
+
+	function resolveNodeName(node: INodeUi) {
+		const localizedName = i18n.localizeNodeName(node.name, node.type);
+
+		node.name = getUniqueNodeName(localizedName, workflowsStore.canvasNames);
+	}
+
+	function resolveNodeWebhook(node: INodeUi, nodeTypeDescription: INodeTypeDescription) {
+		if (nodeTypeDescription.webhooks?.length) {
+			node.webhookId = uuid();
+		}
+
+		// if it's a webhook and the path is empty set the UUID as the default path
+		if (
+			[WEBHOOK_NODE_TYPE, FORM_TRIGGER_NODE_TYPE].includes(node.type) &&
+			node.parameters.path === ''
+		) {
+			node.parameters.path = node.webhookId as string;
+		}
+	}
+
+	/**
+	 * Moves all downstream nodes of a node
+	 */
+	function shiftDownstreamNodesPosition(
+		sourceNodeName: string,
+		margin: number,
+		{ trackHistory = false }: { trackHistory?: boolean },
+	) {
+		const sourceNode = workflowsStore.nodesByName[sourceNodeName];
+		const checkNodes = workflowHelpers.getConnectedNodes(
+			'downstream',
+			editableWorkflowObject.value,
+			sourceNodeName,
+		);
+		for (const nodeName of checkNodes) {
+			const node = workflowsStore.nodesByName[nodeName];
+			if (node.position[0] < sourceNode.position[0]) {
+				continue;
+			}
+
+			updateNodePosition(
+				node.id,
+				{
+					x: node.position[0] + margin,
+					y: node.position[1],
+				},
+				{ trackHistory },
+			);
+		}
 	}
 
 	/**
@@ -953,29 +991,414 @@ export function useCanvasOperations({
 		return false;
 	}
 
-	async function addConnections(
-		connections: AddedNodesAndConnections['connections'],
-		{ offsetIndex }: { offsetIndex: number },
-	) {
-		for (const { from, to } of connections) {
-			const fromNode = editableWorkflow.value.nodes[offsetIndex + from.nodeIndex];
-			const toNode = editableWorkflow.value.nodes[offsetIndex + to.nodeIndex];
-
+	async function addConnections(connections: CanvasConnectionCreateData[] | CanvasConnection[]) {
+		for (const { source, target, data } of connections) {
 			createConnection({
-				source: fromNode.id,
-				sourceHandle: `outputs/${NodeConnectionType.Main}/${from.outputIndex ?? 0}`,
-				target: toNode.id,
-				targetHandle: `inputs/${NodeConnectionType.Main}/${to.inputIndex ?? 0}`,
+				source,
+				sourceHandle: createCanvasConnectionHandleString({
+					mode: CanvasConnectionMode.Output,
+					type: isValidNodeConnectionType(data?.source.type)
+						? data?.source.type
+						: NodeConnectionType.Main,
+					index: data?.source.index ?? 0,
+				}),
+				target,
+				targetHandle: createCanvasConnectionHandleString({
+					mode: CanvasConnectionMode.Input,
+					type: isValidNodeConnectionType(data?.target.type)
+						? data?.target.type
+						: NodeConnectionType.Main,
+					index: data?.target.index ?? 0,
+				}),
 			});
 		}
 	}
 
+	/**
+	 * Workspace operations
+	 */
+
+	function resetWorkspace() {
+		// Reset node creator
+		nodeCreatorStore.openNodeCreator({ createNodeActive: false });
+		nodeCreatorStore.setShowScrim(false);
+
+		// Make sure that if there is a waiting test-webhook, it gets removed
+		if (workflowsStore.executionWaitingForWebhook) {
+			try {
+				void workflowsStore.removeTestWebhook(workflowsStore.workflowId);
+			} catch (error) {}
+		}
+
+		// Reset editable workflow state
+		workflowsStore.resetWorkflow();
+		workflowsStore.resetState();
+		workflowsStore.currentWorkflowExecutions = [];
+
+		// Reset actions
+		uiStore.removeActiveAction('workflowRunning');
+		uiStore.stateIsDirty = false;
+
+		// Reset executions
+		executionsStore.activeExecution = null;
+
+		// Reset credentials updates
+		nodeHelpers.credentialsUpdated.value = false;
+	}
+
+	async function initializeWorkspace(data: IWorkflowDb) {
+		// Set workflow data
+		await workflowHelpers.initState(data);
+
+		// Add nodes and connections
+		await addNodes(data.nodes);
+		workflowsStore.setConnections(data.connections);
+	}
+
+	/**
+	 * Import operations
+	 */
+
+	function removeUnknownCredentials(workflow: IWorkflowDataUpdate) {
+		if (!workflow?.nodes) return;
+
+		for (const node of workflow.nodes) {
+			if (!node.credentials) continue;
+
+			for (const [name, credential] of Object.entries(node.credentials)) {
+				if (typeof credential === 'string' || credential.id === null) continue;
+
+				if (!credentialsStore.getCredentialById(credential.id)) {
+					delete node.credentials[name];
+				}
+			}
+		}
+	}
+
+	async function addImportedNodesToWorkflow(
+		data: IWorkflowDataUpdate,
+	): Promise<IWorkflowDataUpdate> {
+		// Because nodes with the same name maybe already exist, it could
+		// be needed that they have to be renamed. Also could it be possible
+		// that nodes are not allowed to be created because they have a create
+		// limit set. So we would then link the new nodes with the already existing ones.
+		// In this object all that nodes get saved in the format:
+		//   old-name -> new-name
+		const nodeNameTable: {
+			[key: string]: string;
+		} = {};
+		const newNodeNames = new Set<string>();
+
+		if (!data.nodes) {
+			// No nodes to add
+			throw new Error(i18n.baseText('nodeView.noNodesGivenToAdd'));
+		}
+
+		// Get how many of the nodes of the types which have
+		// a max limit set already exist
+		const nodeTypesCount = workflowHelpers.getNodeTypesMaxCount();
+
+		let oldName: string;
+		let newName: string;
+		const createNodes: INode[] = [];
+
+		await nodeHelpers.loadNodesProperties(
+			data.nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
+		);
+
+		data.nodes.forEach((node) => {
+			if (nodeTypesCount[node.type] !== undefined) {
+				if (nodeTypesCount[node.type].exist >= nodeTypesCount[node.type].max) {
+					// Node is not allowed to be created so
+					// do not add it to the create list but
+					// add the name of the existing node
+					// that this one gets linked up instead.
+					nodeNameTable[node.name] = nodeTypesCount[node.type].nodeNames[0];
+					return;
+				} else {
+					// Node can be created but increment the
+					// counter in case multiple ones are
+					// supposed to be created
+					nodeTypesCount[node.type].exist += 1;
+				}
+			}
+
+			oldName = node.name;
+
+			const localized = i18n.localizeNodeName(node.name, node.type);
+
+			newName = getUniqueNodeName(localized, newNodeNames);
+
+			newNodeNames.add(newName);
+			nodeNameTable[oldName] = newName;
+
+			createNodes.push(node);
+		});
+
+		// Get only the connections of the nodes that get created
+		const newConnections: IConnections = {};
+		const currentConnections = data.connections!;
+		const createNodeNames = createNodes.map((node) => node.name);
+		let sourceNode, type, sourceIndex, connectionIndex, connectionData;
+		for (sourceNode of Object.keys(currentConnections)) {
+			if (!createNodeNames.includes(sourceNode)) {
+				// Node does not get created so skip output connections
+				continue;
+			}
+
+			const connection: INodeConnections = {};
+
+			for (type of Object.keys(currentConnections[sourceNode])) {
+				connection[type] = [];
+				for (
+					sourceIndex = 0;
+					sourceIndex < currentConnections[sourceNode][type].length;
+					sourceIndex++
+				) {
+					const nodeSourceConnections = [];
+					if (currentConnections[sourceNode][type][sourceIndex]) {
+						for (
+							connectionIndex = 0;
+							connectionIndex < currentConnections[sourceNode][type][sourceIndex].length;
+							connectionIndex++
+						) {
+							connectionData = currentConnections[sourceNode][type][sourceIndex][connectionIndex];
+							if (!createNodeNames.includes(connectionData.node)) {
+								// Node does not get created so skip input connection
+								continue;
+							}
+
+							nodeSourceConnections.push(connectionData);
+							// Add connection
+						}
+					}
+					connection[type].push(nodeSourceConnections);
+				}
+			}
+
+			newConnections[sourceNode] = connection;
+		}
+
+		// Create a workflow with the new nodes and connections that we can use
+		// the rename method
+		const tempWorkflow: Workflow = workflowHelpers.getWorkflow(createNodes, newConnections);
+
+		// Rename all the nodes of which the name changed
+		for (oldName in nodeNameTable) {
+			if (oldName === nodeNameTable[oldName]) {
+				// Name did not change so skip
+				continue;
+			}
+			tempWorkflow.renameNode(oldName, nodeNameTable[oldName]);
+		}
+
+		if (data.pinData) {
+			let pinDataSuccess = true;
+			for (const nodeName of Object.keys(data.pinData)) {
+				// Pin data limit reached
+				if (!pinDataSuccess) {
+					toast.showError(
+						new Error(i18n.baseText('ndv.pinData.error.tooLarge.description')),
+						i18n.baseText('ndv.pinData.error.tooLarge.title'),
+					);
+					continue;
+				}
+
+				const node = tempWorkflow.nodes[nodeNameTable[nodeName]];
+				try {
+					const pinnedDataForNode = usePinnedData(node);
+					pinnedDataForNode.setData(data.pinData[nodeName], 'add-nodes');
+					pinDataSuccess = true;
+				} catch (error) {
+					pinDataSuccess = false;
+					console.error(error);
+				}
+			}
+		}
+
+		// Add the nodes with the changed node names, expressions and connections
+		historyStore.startRecordingUndo();
+
+		await addNodes(Object.values(tempWorkflow.nodes));
+		await addConnections(
+			mapLegacyConnectionsToCanvasConnections(
+				tempWorkflow.connectionsBySourceNode,
+				Object.values(tempWorkflow.nodes),
+			),
+		);
+
+		historyStore.stopRecordingUndo();
+		uiStore.stateIsDirty = true;
+
+		return {
+			nodes: Object.values(tempWorkflow.nodes),
+			connections: tempWorkflow.connectionsBySourceNode,
+		};
+	}
+
+	async function importWorkflowData(
+		workflowData: IWorkflowDataUpdate,
+		source: string,
+		importTags = true,
+	): Promise<void> {
+		// If it is JSON check if it looks on the first look like data we can use
+		if (!workflowData.hasOwnProperty('nodes') || !workflowData.hasOwnProperty('connections')) {
+			return;
+		}
+
+		try {
+			const nodeIdMap: { [prev: string]: string } = {};
+			if (workflowData.nodes) {
+				const nodeNames = new Set(workflowData.nodes.map((node) => node.name));
+				workflowData.nodes.forEach((node: INode) => {
+					// Provide a new name for nodes that don't have one
+					if (!node.name) {
+						const nodeType = nodeTypesStore.getNodeType(node.type);
+						const newName = getUniqueNodeName(nodeType?.displayName ?? node.type, nodeNames);
+						node.name = newName;
+						nodeNames.add(newName);
+					}
+
+					// Generate new webhookId if workflow already contains a node with the same webhookId
+					if (node.webhookId && UPDATE_WEBHOOK_ID_NODE_TYPES.includes(node.type)) {
+						const isDuplicate = Object.values(workflowHelpers.getCurrentWorkflow().nodes).some(
+							(n) => n.webhookId === node.webhookId,
+						);
+						if (isDuplicate) {
+							node.webhookId = uuid();
+						}
+					}
+
+					// set all new ids when pasting/importing workflows
+					if (node.id) {
+						const newId = uuid();
+						nodeIdMap[newId] = node.id;
+						node.id = newId;
+					} else {
+						node.id = uuid();
+					}
+				});
+			}
+
+			removeUnknownCredentials(workflowData);
+
+			const nodeGraph = JSON.stringify(
+				TelemetryHelpers.generateNodesGraph(
+					workflowData as IWorkflowBase,
+					workflowHelpers.getNodeTypes(),
+					{
+						nodeIdMap,
+						sourceInstanceId:
+							workflowData.meta && workflowData.meta.instanceId !== rootStore.instanceId
+								? workflowData.meta.instanceId
+								: '',
+						isCloudDeployment: settingsStore.isCloudDeployment,
+					},
+				).nodeGraph,
+			);
+
+			if (source === 'paste') {
+				telemetry.track('User pasted nodes', {
+					workflow_id: workflowsStore.workflowId,
+					node_graph_string: nodeGraph,
+				});
+			} else if (source === 'duplicate') {
+				telemetry.track('User duplicated nodes', {
+					workflow_id: workflowsStore.workflowId,
+					node_graph_string: nodeGraph,
+				});
+			} else {
+				telemetry.track('User imported workflow', {
+					source,
+					workflow_id: workflowsStore.workflowId,
+					node_graph_string: nodeGraph,
+				});
+			}
+
+			// By default we automatically deselect all the currently
+			// selected nodes and select the new ones
+			// this.deselectAllNodes();
+
+			// Fix the node position as it could be totally offscreen
+			// and the pasted nodes would so not be directly visible to
+			// the user
+			workflowHelpers.updateNodePositions(
+				workflowData,
+				NodeViewUtils.getNewNodePosition(editableWorkflow.value.nodes, lastClickPosition.value),
+			);
+
+			await addImportedNodesToWorkflow(workflowData);
+
+			// setTimeout(() => {
+			// 	(data?.nodes ?? []).forEach((node: INodeUi) => {
+			// 		this.nodeSelectedByName(node.name);
+			// 	});
+			// });
+
+			if (importTags && settingsStore.areTagsEnabled && Array.isArray(workflowData.tags)) {
+				await importWorkflowTags(workflowData);
+			}
+		} catch (error) {
+			toast.showError(error, i18n.baseText('nodeView.showError.importWorkflowData.title'));
+		}
+	}
+
+	async function importWorkflowTags(workflowData: IWorkflowDataUpdate) {
+		const allTags = await tagsStore.fetchAll();
+		const tagNames = new Set(allTags.map((tag) => tag.name));
+
+		const workflowTags = workflowData.tags as ITag[];
+		const notFound = workflowTags.filter((tag) => !tagNames.has(tag.name));
+
+		const creatingTagPromises: Array<Promise<ITag>> = [];
+		for (const tag of notFound) {
+			const creationPromise = tagsStore.create(tag.name).then((tag: ITag) => {
+				allTags.push(tag);
+				return tag;
+			});
+
+			creatingTagPromises.push(creationPromise);
+		}
+
+		await Promise.all(creatingTagPromises);
+
+		const tagIds = workflowTags.reduce((accu: string[], imported: ITag) => {
+			const tag = allTags.find((tag) => tag.name === imported.name);
+			if (tag) {
+				accu.push(tag.id);
+			}
+
+			return accu;
+		}, []);
+
+		workflowsStore.addWorkflowTagIds(tagIds);
+		setTimeout(() => {
+			nodeHelpers.addPinDataConnections(workflowsStore.pinnedWorkflowData);
+		});
+	}
+
+	async function fetchWorkflowDataFromUrl(url: string): Promise<IWorkflowDataUpdate | undefined> {
+		let workflowData: IWorkflowDataUpdate;
+
+		canvasStore.startLoading();
+		try {
+			workflowData = await workflowsStore.getWorkflowFromUrl(url);
+		} catch (error) {
+			toast.showError(error, i18n.baseText('nodeView.showError.getWorkflowDataFromUrl.title'));
+			return;
+		} finally {
+			canvasStore.stopLoading();
+		}
+
+		return workflowData;
+	}
+
 	return {
 		editableWorkflow,
 		editableWorkflowObject,
 		triggerNodes,
-		initializeNodeDataWithDefaultCredentials,
 		addNodes,
+		addNode,
 		updateNodePosition,
 		setNodeActive,
 		setNodeActiveByName,
@@ -991,5 +1414,9 @@ export function useCanvasOperations({
 		deleteConnection,
 		revertDeleteConnection,
 		isConnectionAllowed,
+		importWorkflowData,
+		fetchWorkflowDataFromUrl,
+		resetWorkspace,
+		initializeWorkspace,
 	};
 }
diff --git a/packages/editor-ui/src/composables/useNodeHelpers.ts b/packages/editor-ui/src/composables/useNodeHelpers.ts
index 5571dc6ca..00f18041b 100644
--- a/packages/editor-ui/src/composables/useNodeHelpers.ts
+++ b/packages/editor-ui/src/composables/useNodeHelpers.ts
@@ -1261,6 +1261,7 @@ export function useNodeHelpers() {
 		deleteJSPlumbConnection,
 		loadNodesProperties,
 		addNodes,
+		addConnections,
 		addConnection,
 		removeConnection,
 		removeConnectionByConnectionInfo,
diff --git a/packages/editor-ui/src/composables/useWorkflowHelpers.ts b/packages/editor-ui/src/composables/useWorkflowHelpers.ts
index 200679e20..257abce26 100644
--- a/packages/editor-ui/src/composables/useWorkflowHelpers.ts
+++ b/packages/editor-ui/src/composables/useWorkflowHelpers.ts
@@ -65,6 +65,7 @@ import type { useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useProjectsStore } from '@/stores/projects.store';
 import { useTagsStore } from '@/stores/tags.store';
+import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 
 export function resolveParameter<T = IDataObject>(
 	parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],
@@ -439,6 +440,7 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 	const rootStore = useRootStore();
 	const templatesStore = useTemplatesStore();
 	const workflowsStore = useWorkflowsStore();
+	const workflowsEEStore = useWorkflowsEEStore();
 	const uiStore = useUIStore();
 	const nodeHelpers = useNodeHelpers();
 	const projectsStore = useProjectsStore();
@@ -1063,6 +1065,17 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 		workflowsStore.setWorkflowVersionId(workflowData.versionId);
 		workflowsStore.setWorkflowMetadata(workflowData.meta);
 
+		if (workflowData.usedCredentials) {
+			workflowsStore.setUsedCredentials(workflowData.usedCredentials);
+		}
+
+		if (workflowData.sharedWithProjects) {
+			workflowsEEStore.setWorkflowSharedWith({
+				workflowId: workflowData.id,
+				sharedWithProjects: workflowData.sharedWithProjects,
+			});
+		}
+
 		const tags = (workflowData.tags ?? []) as ITag[];
 		const tagIds = tags.map((tag) => tag.id);
 		workflowsStore.setWorkflowTagIds(tagIds || []);
diff --git a/packages/editor-ui/src/stores/nodeCreator.store.ts b/packages/editor-ui/src/stores/nodeCreator.store.ts
index de124a3d9..6668b7823 100644
--- a/packages/editor-ui/src/stores/nodeCreator.store.ts
+++ b/packages/editor-ui/src/stores/nodeCreator.store.ts
@@ -203,8 +203,10 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 		// canvasStore.newNodeInsertPosition = null;
 
 		if (isVueFlowConnection(connection)) {
-			uiStore.lastSelectedNodeConnection = connection;
+			uiStore.lastInteractedWithNodeConnection = connection;
 		}
+		uiStore.lastInteractedWithNodeHandle = connection.sourceHandle ?? null;
+		uiStore.lastInteractedWithNodeId = sourceNode.id;
 
 		openNodeCreator({
 			source: eventSource,
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index 873bce374..c151a3fe0 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -178,7 +178,6 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	const lastSelectedNode = ref<string | null>(null);
 	const lastSelectedNodeOutputIndex = ref<number | null>(null);
 	const lastSelectedNodeEndpointUuid = ref<string | null>(null);
-	const lastSelectedNodeConnection = ref<Connection | null>(null);
 	const nodeViewOffsetPosition = ref<[number, number]>([0, 0]);
 	const nodeViewMoveInProgress = ref<boolean>(false);
 	const selectedNodes = ref<INodeUi[]>([]);
@@ -189,6 +188,11 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	const pendingNotificationsForViews = ref<{ [key in VIEWS]?: NotificationOptions[] }>({});
 	const isCreateNodeActive = ref<boolean>(false);
 
+	// Last interacted with - Canvas v2 specific
+	const lastInteractedWithNodeConnection = ref<Connection | null>(null);
+	const lastInteractedWithNodeHandle = ref<string | null>(null);
+	const lastInteractedWithNodeId = ref<string | null>(null);
+
 	const settingsStore = useSettingsStore();
 	const workflowsStore = useWorkflowsStore();
 	const rootStore = useRootStore();
@@ -275,6 +279,14 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		return null;
 	});
 
+	const lastInteractedWithNode = computed(() => {
+		if (lastInteractedWithNodeId.value) {
+			return workflowsStore.getNodeById(lastInteractedWithNodeId.value);
+		}
+
+		return null;
+	});
+
 	const isVersionsOpen = computed(() => {
 		return modalsById.value[VERSIONS_MODAL_KEY].open;
 	});
@@ -600,6 +612,12 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		delete pendingNotificationsForViews.value[view];
 	};
 
+	function resetLastInteractedWith() {
+		lastInteractedWithNodeConnection.value = null;
+		lastInteractedWithNodeHandle.value = null;
+		lastInteractedWithNodeId.value = null;
+	}
+
 	return {
 		appliedTheme,
 		logo,
@@ -621,7 +639,10 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		selectedNodes,
 		bannersHeight,
 		lastSelectedNodeEndpointUuid,
-		lastSelectedNodeConnection,
+		lastInteractedWithNodeConnection,
+		lastInteractedWithNodeHandle,
+		lastInteractedWithNodeId,
+		lastInteractedWithNode,
 		nodeViewOffsetPosition,
 		nodeViewMoveInProgress,
 		nodeViewInitialized,
@@ -670,6 +691,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		clearBannerStack,
 		setNotificationsForView,
 		deleteNotificationsForView,
+		resetLastInteractedWith,
 	};
 });
 
diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index aeb8e9234..59ebe1090 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -73,6 +73,7 @@ import { i18n } from '@/plugins/i18n';
 
 import { computed, ref } from 'vue';
 import { useProjectsStore } from '@/stores/projects.store';
+import type { ProjectSharingData } from '@/types/projects.types';
 
 const defaults: Omit<IWorkflowDb, 'id'> & { settings: NonNullable<IWorkflowDb['settings']> } = {
 	name: '',
@@ -452,6 +453,15 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		return workflowData;
 	}
 
+	function makeNewWorkflowShareable() {
+		const { currentProject, personalProject } = useProjectsStore();
+		const homeProject = currentProject ?? personalProject ?? {};
+		const scopes = currentProject?.scopes ?? personalProject?.scopes ?? [];
+
+		workflow.value.homeProject = homeProject as ProjectSharingData;
+		workflow.value.scopes = scopes;
+	}
+
 	function resetWorkflow() {
 		workflow.value = createEmptyWorkflow();
 	}
@@ -1589,6 +1599,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		fetchAllWorkflows,
 		fetchWorkflow,
 		getNewWorkflowData,
+		makeNewWorkflowShareable,
 		resetWorkflow,
 		resetState,
 		addExecutingNode,
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index d7c6e8cb6..b9ff8efe3 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -2,13 +2,14 @@
 import type {
 	ConnectionTypes,
 	ExecutionStatus,
+	IConnection,
 	INodeConnections,
 	INodeTypeDescription,
 } from 'n8n-workflow';
-import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import type { DefaultEdge, Node, NodeProps, Position } from '@vue-flow/core';
 import type { INodeUi } from '@/Interface';
 import type { ComputedRef, Ref } from 'vue';
+import type { PartialBy } from '@/utils/typeHelpers';
 
 export type CanvasConnectionPortType = ConnectionTypes;
 
@@ -107,13 +108,14 @@ export interface CanvasConnectionData {
 
 export type CanvasConnection = DefaultEdge<CanvasConnectionData>;
 
-export interface CanvasPluginContext {
-	instance: BrowserJsPlumbInstance;
-}
-
-export interface CanvasPlugin {
-	(ctx: CanvasPluginContext): void;
-}
+export type CanvasConnectionCreateData = {
+	source: string;
+	target: string;
+	data: {
+		source: PartialBy<IConnection, 'node'>;
+		target: PartialBy<IConnection, 'node'>;
+	};
+};
 
 export interface CanvasNodeInjectionData {
 	id: Ref<string>;
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index 4eb999c4c..2b2a6089e 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -6,8 +6,6 @@ import type { Connection } from '@vue-flow/core';
 import { v4 as uuid } from 'uuid';
 import { isValidCanvasConnectionMode, isValidNodeConnectionType } from '@/utils/typeGuards';
 import { NodeConnectionType } from 'n8n-workflow';
-import type { Connection as VueFlowConnection } from '@vue-flow/core/dist/types/connection';
-import { PUSH_NODES_OFFSET } from '@/utils/nodeViewUtils';
 
 export function mapLegacyConnectionsToCanvasConnections(
 	legacyConnections: IConnections,
@@ -94,21 +92,6 @@ export function parseCanvasConnectionHandleString(handle: string | null | undefi
 	};
 }
 
-/**
- * Get the width and height of a connection
- *
- * @TODO See whether this is actually needed or just a legacy jsPlumb check
- */
-export function getVueFlowConnectorLengths(connection: VueFlowConnection): [number, number] {
-	const connectionId = createCanvasConnectionId(connection);
-	const edgeRef = document.getElementById(connectionId);
-	if (!edgeRef) {
-		return [PUSH_NODES_OFFSET, PUSH_NODES_OFFSET];
-	}
-
-	return [edgeRef.clientWidth, edgeRef.clientHeight];
-}
-
 export function createCanvasConnectionHandleString({
 	mode,
 	type = NodeConnectionType.Main,
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index f31b9dd0d..c1cb1792c 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -28,10 +28,9 @@ import type {
 	XYPosition,
 } from '@/Interface';
 import type { Connection } from '@vue-flow/core';
-import type { CanvasNode, ConnectStartEvent } from '@/types';
+import type { CanvasConnectionCreateData, CanvasNode, ConnectStartEvent } from '@/types';
 import { CanvasNodeRenderType } from '@/types';
 import {
-	CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT,
 	CHAT_TRIGGER_NODE_TYPE,
 	EnterpriseEditionFeature,
 	MAIN_HEADER_TABS,
@@ -46,13 +45,8 @@ import {
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
-import { TelemetryHelpers } from 'n8n-workflow';
-import type {
-	NodeConnectionType,
-	ExecutionSummary,
-	IConnection,
-	IWorkflowBase,
-} from 'n8n-workflow';
+import { TelemetryHelpers, NodeConnectionType } from 'n8n-workflow';
+import type { IDataObject, ExecutionSummary, IConnection, IWorkflowBase } from 'n8n-workflow';
 import { useToast } from '@/composables/useToast';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
@@ -70,11 +64,8 @@ import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useHistoryStore } from '@/stores/history.store';
 import { useProjectsStore } from '@/stores/projects.store';
-import { usePostHog } from '@/stores/posthog.store';
-import useWorkflowsEEStore from '@/stores/workflows.ee.store';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useExecutionDebugging } from '@/composables/useExecutionDebugging';
-import type { ProjectSharingData } from '@/types/projects.types';
 import { useUsersStore } from '@/stores/users.store';
 import { sourceControlEventBus } from '@/event-bus/source-control';
 import { useTagsStore } from '@/stores/tags.store';
@@ -85,6 +76,7 @@ import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/butto
 import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
 import CanvasClearExecutionDataButton from '@/components/canvas/elements/buttons/CanvasClearExecutionDataButton.vue';
 import { nodeViewEventBus } from '@/event-bus';
+import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { tryToParseNumber } from '@/utils/typesUtils';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { createEventBus } from 'n8n-design-system';
@@ -105,15 +97,13 @@ const telemetry = useTelemetry();
 const externalHooks = useExternalHooks();
 const toast = useToast();
 const message = useMessage();
-const titleChange = useTitleChange();
+const { titleReset, titleSet } = useTitleChange();
 const workflowHelpers = useWorkflowHelpers({ router });
 const nodeHelpers = useNodeHelpers();
-const posthog = usePostHog();
 
 const nodeTypesStore = useNodeTypesStore();
 const uiStore = useUIStore();
 const workflowsStore = useWorkflowsStore();
-const workflowsEEStore = useWorkflowsEEStore();
 const sourceControlStore = useSourceControlStore();
 const nodeCreatorStore = useNodeCreatorStore();
 const settingsStore = useSettingsStore();
@@ -153,6 +143,10 @@ const {
 	revertDeleteConnection,
 	setNodeActiveByName,
 	addConnections,
+	importWorkflowData,
+	fetchWorkflowDataFromUrl,
+	resetWorkspace,
+	initializeWorkspace,
 	editableWorkflow,
 	editableWorkflowObject,
 } = useCanvasOperations({ router, lastClickPosition });
@@ -202,12 +196,6 @@ const fallbackNodes = computed<INodeUi[]>(() =>
  */
 
 async function initializeData() {
-	isLoading.value = true;
-	canvasStore.startLoading();
-
-	resetWorkspace();
-	titleChange.titleReset();
-
 	const loadPromises = (() => {
 		if (settingsStore.isPreviewMode && isDemoRoute.value) return [];
 
@@ -232,9 +220,6 @@ async function initializeData() {
 		return promises;
 	})();
 
-	// @TODO Implement this
-	// this.clipboard.onPaste.value = this.onClipboardPasteEvent;
-
 	try {
 		await Promise.all(loadPromises);
 	} catch (error) {
@@ -244,23 +229,10 @@ async function initializeData() {
 			i18n.baseText('nodeView.showError.mounted1.message') + ':',
 		);
 		return;
-	} finally {
-		canvasStore.stopLoading();
-		isLoading.value = false;
 	}
-
-	setTimeout(() => {
-		void usersStore.showPersonalizationSurvey();
-	}, 0);
-
-	// @TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
-	void externalHooks.run('nodeView.mount').catch(() => {});
-
-	// @TODO maybe we can find a better way to handle this
-	canvasStore.isDemo = isDemoRoute.value;
 }
 
-async function initializeView() {
+async function initializeRoute() {
 	// In case the workflow got saved we do not have to run init
 	// as only the route changed but all the needed data is already loaded
 	if (route.params.action === 'workflowSave') {
@@ -283,27 +255,12 @@ async function initializeView() {
 		// If there is no workflow id, treat it as a new workflow
 		if (!workflowId.value || isNewWorkflowRoute.value) {
 			if (route.meta?.nodeView === true) {
-				await initializeViewForNewWorkflow();
+				await initializeWorkspaceForNewWorkflow();
 			}
 			return;
 		}
 
-		// Load workflow data
-		try {
-			await workflowsStore.fetchWorkflow(workflowId.value);
-
-			titleChange.titleSet(workflow.value.name, 'IDLE');
-			await openWorkflow(workflow.value);
-			await checkAndInitDebugMode();
-
-			trackOpenWorkflowFromOnboardingTemplate();
-		} catch (error) {
-			toast.showError(error, i18n.baseText('openWorkflow.workflowNotFoundError'));
-
-			void router.push({
-				name: VIEWS.NEW_WORKFLOW,
-			});
-		}
+		await initializeWorkspaceForExistingWorkflow(workflowId.value);
 	}
 
 	nodeHelpers.updateNodesInputIssues();
@@ -311,67 +268,40 @@ async function initializeView() {
 	nodeHelpers.updateNodesParameterIssues();
 
 	await loadCredentials();
-	canvasEventBus.emit('fitView');
-
-	uiStore.nodeViewInitialized = true;
-
-	// Once view is initialized, pick up all toast notifications
-	// waiting in the store and display them
-	toast.showNotificationForViews([VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW]);
 }
 
-async function initializeViewForNewWorkflow() {
+async function initializeWorkspaceForNewWorkflow() {
 	resetWorkspace();
 
 	await workflowsStore.getNewWorkflowData(undefined, projectsStore.currentProjectId);
+	workflowsStore.makeNewWorkflowShareable();
 
-	workflowsStore.currentWorkflowExecutions = [];
-	executionsStore.activeExecution = null;
-	uiStore.stateIsDirty = false;
 	uiStore.nodeViewInitialized = true;
-	executionsStore.activeExecution = null;
-
-	makeNewWorkflowShareable();
-	await runAutoAddManualTriggerExperiment();
 }
 
-/**
- * Pre-populate the canvas with the manual trigger node
- * if the experiment is enabled and the user is in the variant group
- */
-async function runAutoAddManualTriggerExperiment() {
-	if (
-		posthog.getVariant(CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT.name) !==
-		CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT.variant
-	) {
-		return;
+async function initializeWorkspaceForExistingWorkflow(id: string) {
+	resetWorkspace();
+
+	try {
+		const workflowData = await workflowsStore.fetchWorkflow(id);
+
+		await openWorkflow(workflowData);
+		await initializeDebugMode();
+
+		if (workflowData.meta?.onboardingId) {
+			trackOpenWorkflowFromOnboardingTemplate();
+		}
+
+		await projectsStore.setProjectNavActiveIdByWorkflowHomeProject(workflow.value.homeProject);
+	} catch (error) {
+		toast.showError(error, i18n.baseText('openWorkflow.workflowNotFoundError'));
+
+		void router.push({
+			name: VIEWS.NEW_WORKFLOW,
+		});
+	} finally {
+		uiStore.nodeViewInitialized = true;
 	}
-
-	const manualTriggerNode = canvasStore.getAutoAddManualTriggerNode();
-	if (manualTriggerNode) {
-		await addNodes([manualTriggerNode]);
-		uiStore.lastSelectedNode = manualTriggerNode.name;
-	}
-}
-
-function resetWorkspace() {
-	onOpenNodeCreator({ createNodeActive: false });
-	nodeCreatorStore.setShowScrim(false);
-
-	// Make sure that if there is a waiting test-webhook that it gets removed
-	if (isExecutionWaitingForWebhook.value) {
-		try {
-			void workflowsStore.removeTestWebhook(workflowsStore.workflowId);
-		} catch (error) {}
-	}
-	workflowsStore.resetWorkflow();
-	workflowsStore.resetState();
-
-	uiStore.removeActiveAction('workflowRunning');
-	uiStore.resetSelectedNodes();
-	uiStore.nodeViewOffsetPosition = [0, 0]; // @TODO Not sure if needed
-
-	// this.credentialsUpdated = false;
 }
 
 /**
@@ -379,65 +309,38 @@ function resetWorkspace() {
  */
 
 async function openWorkflow(data: IWorkflowDb) {
-	const selectedExecution = executionsStore.activeExecution;
-
 	resetWorkspace();
+	titleSet(workflow.value.name, 'IDLE');
 
-	await workflowHelpers.initState(data);
-	await addNodes(data.nodes);
-	workflowsStore.setConnections(data.connections);
-
-	if (data.sharedWithProjects) {
-		workflowsEEStore.setWorkflowSharedWith({
-			workflowId: data.id,
-			sharedWithProjects: data.sharedWithProjects,
-		});
-	}
-
-	if (data.usedCredentials) {
-		workflowsStore.setUsedCredentials(data.usedCredentials);
-	}
-
-	if (!nodeHelpers.credentialsUpdated.value) {
-		uiStore.stateIsDirty = false;
-	}
+	await initializeWorkspace(data);
 
 	void externalHooks.run('workflow.open', {
 		workflowId: data.id,
 		workflowName: data.name,
 	});
 
-	if (selectedExecution?.workflowId !== data.id) {
-		executionsStore.activeExecution = null;
-		workflowsStore.currentWorkflowExecutions = [];
-	} else {
-		executionsStore.activeExecution = selectedExecution;
-	}
+	// @TODO Check why this is needed when working on executions
+	// const selectedExecution = executionsStore.activeExecution;
+	// if (selectedExecution?.workflowId !== data.id) {
+	// 	executionsStore.activeExecution = null;
+	// 	workflowsStore.currentWorkflowExecutions = [];
+	// } else {
+	// 	executionsStore.activeExecution = selectedExecution;
+	// }
 
-	await projectsStore.setProjectNavActiveIdByWorkflowHomeProject(workflow.value.homeProject);
+	fitView();
 }
 
 function trackOpenWorkflowFromOnboardingTemplate() {
-	if (workflow.value.meta?.onboardingId) {
-		telemetry.track(
-			`User opened workflow from onboarding template with ID ${workflow.value.meta.onboardingId}`,
-			{
-				workflow_id: workflowId.value,
-			},
-			{
-				withPostHog: true,
-			},
-		);
-	}
-}
-
-function makeNewWorkflowShareable() {
-	const { currentProject, personalProject } = projectsStore;
-	const homeProject = currentProject ?? personalProject ?? {};
-	const scopes = currentProject?.scopes ?? personalProject?.scopes ?? [];
-
-	workflowsStore.workflow.homeProject = homeProject as ProjectSharingData;
-	workflowsStore.workflow.scopes = scopes;
+	telemetry.track(
+		`User opened workflow from onboarding template with ID ${workflow.value.meta?.onboardingId}`,
+		{
+			workflow_id: workflowId.value,
+		},
+		{
+			withPostHog: true,
+		},
+	);
 }
 
 /**
@@ -485,7 +388,6 @@ async function openWorkflowTemplate(templateId: string) {
 
 	uiStore.stateIsDirty = true;
 
-	canvasEventBus.emit('fitView');
 	canvasStore.stopLoading();
 
 	void externalHooks.run('template.open', {
@@ -493,6 +395,8 @@ async function openWorkflowTemplate(templateId: string) {
 		templateName: data.name,
 		workflow: data.workflow,
 	});
+
+	fitView();
 }
 
 function trackOpenWorkflowTemplate(templateId: string) {
@@ -631,8 +535,46 @@ function onRevertDeleteConnection({ connection }: { connection: [IConnection, IC
  * Import / Export
  */
 
-async function importWorkflowExact(_workflow: IWorkflowDataUpdate) {
-	// @TODO
+async function importWorkflowExact({ workflow: workflowData }: { workflow: IWorkflowDataUpdate }) {
+	if (!workflowData.nodes || !workflowData.connections) {
+		throw new Error('Invalid workflow object');
+	}
+
+	resetWorkspace();
+
+	await initializeWorkspace({
+		...workflowData,
+		nodes: NodeViewUtils.getFixedNodesList<INodeUi>(workflowData.nodes),
+	} as IWorkflowDb);
+
+	fitView();
+}
+
+async function onImportWorkflowDataEvent(data: IDataObject) {
+	await importWorkflowData(data.data as IWorkflowDataUpdate, 'file');
+
+	fitView();
+}
+
+async function onImportWorkflowUrlEvent(data: IDataObject) {
+	const workflowData = await fetchWorkflowDataFromUrl(data.url as string);
+	if (!workflowData) {
+		return;
+	}
+
+	await importWorkflowData(workflowData, 'url');
+
+	fitView();
+}
+
+function addImportEventBindings() {
+	nodeViewEventBus.on('importWorkflowData', onImportWorkflowDataEvent);
+	nodeViewEventBus.on('importWorkflowUrl', onImportWorkflowUrlEvent);
+}
+
+function removeImportEventBindings() {
+	nodeViewEventBus.off('importWorkflowData', onImportWorkflowDataEvent);
+	nodeViewEventBus.off('importWorkflowUrl', onImportWorkflowUrlEvent);
 }
 
 /**
@@ -649,11 +591,31 @@ async function onAddNodesAndConnections(
 	}
 
 	await addNodes(nodes, { dragAndDrop, position });
-	await addConnections(connections, {
-		offsetIndex: editableWorkflow.value.nodes.length - nodes.length,
+
+	const offsetIndex = editableWorkflow.value.nodes.length - nodes.length;
+	const mappedConnections: CanvasConnectionCreateData[] = connections.map(({ from, to }) => {
+		const fromNode = editableWorkflow.value.nodes[offsetIndex + from.nodeIndex];
+		const toNode = editableWorkflow.value.nodes[offsetIndex + to.nodeIndex];
+
+		return {
+			source: fromNode.id,
+			target: toNode.id,
+			data: {
+				source: {
+					index: from.outputIndex ?? 0,
+					type: NodeConnectionType.Main,
+				},
+				target: {
+					index: to.inputIndex ?? 0,
+					type: NodeConnectionType.Main,
+				},
+			},
+		};
 	});
 
-	uiStore.lastSelectedNodeConnection = null;
+	await addConnections(mappedConnections);
+
+	uiStore.resetLastInteractedWith();
 }
 
 async function onSwitchActiveNode(nodeName: string) {
@@ -865,7 +827,7 @@ async function onSourceControlPull() {
 		if (workflowId.value !== null && !uiStore.stateIsDirty) {
 			const workflowData = await workflowsStore.fetchWorkflow(workflowId.value);
 			if (workflowData) {
-				titleChange.titleSet(workflowData.name, 'IDLE');
+				titleSet(workflowData.name, 'IDLE');
 				await openWorkflow(workflowData);
 			}
 		}
@@ -909,7 +871,7 @@ async function onPostMessageReceived(message: MessageEvent) {
 		const json = JSON.parse(message.data);
 		if (json && json.command === 'openWorkflow') {
 			try {
-				await importWorkflowExact(json.data);
+				await importWorkflowExact(json);
 				canOpenNDV.value = json.canOpenNDV ?? true;
 				hideNodeIssues.value = json.hideNodeIssues ?? false;
 				isExecutionPreview.value = false;
@@ -1009,9 +971,9 @@ function checkIfRouteIsAllowed() {
  * Debug mode
  */
 
-async function checkAndInitDebugMode() {
+async function initializeDebugMode() {
 	if (route.name === VIEWS.EXECUTION_DEBUG) {
-		titleChange.titleSet(workflowsStore.workflowName, 'DEBUG');
+		titleSet(workflowsStore.workflowName, 'DEBUG');
 		if (!workflowsStore.isInDebugMode) {
 			await applyExecutionData(route.params.executionId as string);
 			workflowsStore.isInDebugMode = true;
@@ -1019,6 +981,14 @@ async function checkAndInitDebugMode() {
 	}
 }
 
+/**
+ * Canvas
+ */
+
+function fitView() {
+	setTimeout(() => canvasEventBus.emit('fitView'));
+}
+
 /**
  * Mouse events
  */
@@ -1130,8 +1100,23 @@ onBeforeMount(() => {
 });
 
 onMounted(async () => {
+	canvasStore.startLoading();
+	titleReset();
+	resetWorkspace();
+
 	void initializeData().then(() => {
-		void initializeView();
+		void initializeRoute()
+			.then(() => {
+				// Once view is initialized, pick up all toast notifications
+				// waiting in the store and display them
+				toast.showNotificationForViews([VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW]);
+			})
+			.finally(() => {
+				isLoading.value = false;
+				canvasStore.stopLoading();
+			});
+
+		void usersStore.showPersonalizationSurvey();
 
 		checkIfRouteIsAllowed();
 	});
@@ -1140,21 +1125,29 @@ onMounted(async () => {
 	addPostMessageEventBindings();
 	addKeyboardEventBindings();
 	addSourceControlEventBindings();
+	addImportEventBindings();
 
 	registerCustomActions();
+
+	// @TODO Implement this
+	// this.clipboard.onPaste.value = this.onClipboardPasteEvent;
+
+	// @TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
+	void externalHooks.run('nodeView.mount').catch(() => {});
 });
 
 onBeforeUnmount(() => {
-	removeKeyboardEventBindings();
-	removePostMessageEventBindings();
 	removeUndoRedoEventBindings();
+	removePostMessageEventBindings();
+	removeKeyboardEventBindings();
 	removeSourceControlEventBindings();
+	removeImportEventBindings();
 });
 </script>
 
 <template>
 	<WorkflowCanvas
-		v-if="editableWorkflow && editableWorkflowObject"
+		v-if="editableWorkflow && editableWorkflowObject && !isLoading"
 		:workflow="editableWorkflow"
 		:workflow-object="editableWorkflowObject"
 		:fallback-nodes="fallbackNodes"