diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 71b20b2426..7a8165658c 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -17,6 +17,11 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useElementSize } from '@vueuse/core';
 import { N8nIconButton } from 'n8n-design-system';
 import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
+import { useI18n } from '@/composables/useI18n';
+
+import _ from 'lodash-es';
+
+const i18n = useI18n();
 
 const { openRelatedExecution } = useExecutionHelpers();
 
@@ -24,6 +29,8 @@ const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
 );
 
+const SUBWORKLOW_BUTTON_MARKER = 'o12u312o03u123u138u1239812u31983u12938u12893u1_BUTTON_MARKER';
+
 const props = withDefaults(
 	defineProps<{
 		editMode: { enabled?: boolean; value?: string };
@@ -55,7 +62,17 @@ const jsonDataContainer = ref(null);
 const { height } = useElementSize(jsonDataContainer);
 
 const jsonData = computed(() => {
-	return executionDataToJson(props.inputData);
+	const x = executionDataToJson(props.inputData).map((x, i) =>
+		_.isEmpty(x)
+			? props.inputData[i].metadata
+				? {
+						[SUBWORKLOW_BUTTON_MARKER]: '',
+					}
+				: {}
+			: x,
+	);
+	console.log(x);
+	return x;
 });
 
 const firstKey = computed(() => {
@@ -122,6 +139,14 @@ const getContent = (value: unknown) => {
 const getListItemName = (path: string) => {
 	return path.replace(/^(\["?\d"?]\.?)/g, '');
 };
+
+function isMarkerNode(node: any, inputData: any) {
+	return (
+		node.key === SUBWORKLOW_BUTTON_MARKER &&
+		!isNaN(node.path[1]) &&
+		inputData[Number(node.path[1])].metadata
+	);
+}
 </script>
 
 <template>
@@ -161,55 +186,72 @@ const getListItemName = (path: string) => {
 				@update:selected-value="selectedJsonPath = $event"
 			>
 				<template #renderNodeKey="{ node, defaultKey }">
-					<div v-if="firstKey === defaultKey" :class="[$style.parentHoverShow, $style.goToButton]">
-						<!--
-						node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
-						-->
+					<div v-if="isMarkerNode(node, inputData)" :class="$style.emptyElement">
 						<N8nIconButton
-							v-if="!isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata"
 							type="secondary"
 							icon="external-link-alt"
 							data-test-id="debug-sub-execution"
 							size="mini"
 							@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
 						/>
-						<!-- ^--- may want to stop event propagation so the row in the json component doesn't end up selected-->
 					</div>
-					<TextWithHighlights
-						:content="getContent(node.key)"
-						:search="search"
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="node.key"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-					/>
+					<div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
+						<div v-if="firstKey === defaultKey" :class="$style.goToButton">
+							<!--
+						node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
+						-->
+							<N8nIconButton
+								v-if="!isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata"
+								type="secondary"
+								icon="external-link-alt"
+								data-test-id="debug-sub-execution"
+								size="mini"
+								@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
+							/>
+							<!-- ^--- may want to stop event propagation so the row in the json component doesn't end up selected-->
+						</div>
+						<TextWithHighlights
+							:content="getContent(node.key)"
+							:search="search"
+							data-target="mappable"
+							:data-value="getJsonParameterPath(node.path)"
+							:data-name="node.key"
+							:data-path="node.path"
+							:data-depth="node.level"
+							:class="{
+								[$style.mappable]: mappingEnabled,
+								[$style.dragged]: draggingPath === node.path,
+								[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
+							}"
+						/>
+					</div>
 				</template>
 				<template #renderNodeValue="{ node }">
-					<TextWithHighlights
-						v-if="isNaN(node.index)"
-						:content="getContent(node.content)"
-						:search="search"
-					/>
-					<TextWithHighlights
-						v-else
-						:content="getContent(node.content)"
-						:search="search"
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="getListItemName(node.path)"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-						class="ph-no-capture"
-					/>
+					<div v-if="node.key === SUBWORKLOW_BUTTON_MARKER" :class="$style.emptyElement">
+						<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
+					</div>
+					<div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
+						<TextWithHighlights
+							v-if="isNaN(node.index)"
+							:content="getContent(node.content)"
+							:search="search"
+						/>
+						<TextWithHighlights
+							:content="getContent(node.content)"
+							:search="search"
+							data-target="mappable"
+							:data-value="getJsonParameterPath(node.path)"
+							:data-name="getListItemName(node.path)"
+							:data-path="node.path"
+							:data-depth="node.level"
+							:class="{
+								[$style.mappable]: mappingEnabled,
+								[$style.dragged]: draggingPath === node.path,
+								[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
+							}"
+							class="ph-no-capture"
+						/>
+					</div>
 				</template>
 			</VueJsonPretty>
 		</Draggable>
@@ -255,8 +297,22 @@ const getListItemName = (path: string) => {
 
 .goToButton {
 	position: absolute;
-	top: -25px;
-	left: 35px;
+
+	// above
+	// top: -22px;
+	// left: 30px;
+
+	// left
+	left: 20px;
+	top: 3px;
+
+	// right
+	// right: 18px; // probably small button rather than mini?
+}
+
+.offset {
+	// left
+	margin-left: 18px;
 }
 
 // trouble here is that the Tree holds all rows as direct children, so we either show hover on first
@@ -265,6 +321,10 @@ const getListItemName = (path: string) => {
 *:not(:hover) > * > .parentHoverShow {
 	// display: none;
 }
+
+.emptyElement {
+	display: inline-flex;
+}
 </style>
 
 <style lang="scss">