diff --git a/packages/editor-ui/public/static/schema-mapping-gif.gif b/packages/editor-ui/public/static/schema-mapping-gif.gif
new file mode 100644
index 000000000..6d3d79fd9
Binary files /dev/null and b/packages/editor-ui/public/static/schema-mapping-gif.gif differ
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 7ad5d44da..e13b0e8f1 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1026,8 +1026,8 @@ export interface NestedRecord<T> {
 	[key: string]: T | NestedRecord<T>;
 }
 
-export type IRunDataDisplayMode = 'table' | 'json' | 'binary';
-export type nodePanelType = 'input' | 'output';
+export type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema';
+export type NodePanelType = 'input' | 'output';
 
 export interface TargetItem {
 	nodeName: string;
@@ -1290,3 +1290,21 @@ export interface CurlToJSONResponse {
 	"parameters.sendQuery": boolean;
 	"parameters.sendBody": boolean;
 }
+
+export type Basic = string | number | boolean;
+export type Primitives = Basic | bigint | symbol;
+
+export type Optional<T> = T | undefined | null;
+
+export type SchemaType =
+	| 'string'
+	| 'number'
+	| 'boolean'
+	| 'bigint'
+	| 'symbol'
+	| 'array'
+	| 'object'
+	| 'function'
+	| 'null'
+	| 'undefined';
+export type Schema = { type: SchemaType, key?: string, value: string | Schema[], path: string };
diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
index 95a38f121..01855f1dd 100644
--- a/packages/editor-ui/src/__tests__/setup.ts
+++ b/packages/editor-ui/src/__tests__/setup.ts
@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import Vue from 'vue';
+import '../plugins';
 
 Vue.config.productionTip = false;
 Vue.config.devtools = false;
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index 33405f7ca..fe796d12c 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -90,7 +90,11 @@ export default Vue.extend({
 			}
 
 			this.draggingEl = e.target as HTMLElement;
-			if (this.targetDataKey && this.draggingEl && this.draggingEl.dataset.target !== this.targetDataKey) {
+			if (this.targetDataKey && this.draggingEl.dataset?.target !== this.targetDataKey) {
+				this.draggingEl = this.draggingEl.closest(`[data-target="${this.targetDataKey}"]`) as HTMLElement;
+			}
+
+			if (this.targetDataKey && this.draggingEl?.dataset?.target !== this.targetDataKey) {
 				return;
 			}
 
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index b444bdbdb..cb72316ef 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -51,7 +51,7 @@ import mixins from 'vue-typed-mixins';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
-import { nodePanelType } from '@/Interface';
+import { NodePanelType } from '@/Interface';
 
 
 const SIDE_MARGIN = 24;
@@ -127,7 +127,7 @@ export default mixins(debounceHelper).extend({
 			relativeLeft: number,
 			relativeRight: number
 			} {
-			return this.ndvStore.getMainPanelDimensions(this.currentNodePaneType as nodePanelType);
+			return this.ndvStore.getMainPanelDimensions(this.currentNodePaneType);
 		},
 		supportedResizeDirections(): string[] {
 			const supportedDirections = ['right'];
@@ -278,7 +278,7 @@ export default mixins(debounceHelper).extend({
 
 			if(isMaxRight) {
 				this.ndvStore.setMainPanelDimensions({
-					panelType: this.currentNodePaneType as nodePanelType,
+					panelType: this.currentNodePaneType,
 					dimensions: {
 						relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition,
 						relativeRight: this.maximumRightPosition as number,
@@ -288,7 +288,7 @@ export default mixins(debounceHelper).extend({
 			}
 
 			this.ndvStore.setMainPanelDimensions({
-				panelType: this.currentNodePaneType as nodePanelType,
+				panelType: this.currentNodePaneType,
 				dimensions: {
 					relativeLeft: isInputless ? this.minimumLeftPosition : mainPanelRelativeLeft,
 					relativeRight: mainPanelRelativeRight,
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 6ea6df739..c7753f63d 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1165,18 +1165,23 @@ export default mixins(
 
 
 .droppable {
-	--input-border-color: var(--color-secondary-tint-1);
-	--input-background-color: var(--color-secondary-tint-3);
+	--input-border-color: var(--color-secondary);
+	--input-background-color: var(--color-foreground-xlight);
 	--input-border-style: dashed;
+
+	textarea, input {
+		border-width: 1.5px;
+	}
 }
 
 .activeDrop {
 	--input-border-color: var(--color-success);
-	--input-background-color: var(--color-success-tint-2);
+	--input-background-color: var(--color-foreground-xlight);
 	--input-border-style: solid;
 
 	textarea, input {
 		cursor: grabbing !important;
+		border-width: 1px;
 	}
 }
 
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 7f7480899..daebb3dad 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -24,7 +24,7 @@
 				type="mapping"
 				:disabled="isDropDisabled"
 				:sticky="true"
-				:stickyOffset="4"
+				:stickyOffset="3"
 				@drop="onDrop"
 			>
 				<template #default="{ droppable, activeDrop }">
@@ -98,6 +98,7 @@ export default mixins(
 				menuExpanded: false,
 				forceShowExpression: false,
 				dataMappingTooltipButtons: [] as IN8nButton[],
+				mappingTooltipEnabled: false,
 			};
 		},
 		props: {
@@ -165,18 +166,22 @@ export default mixins(
 				return this.ndvStore.inputPanelDisplayMode;
 			},
 			showMappingTooltip (): boolean {
-				return this.focused && this.isInputTypeString && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
+				return this.mappingTooltipEnabled && this.focused && this.isInputTypeString && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
 			},
 		},
 		methods: {
 			onFocus() {
 				this.focused = true;
+				setTimeout(() => {
+					this.mappingTooltipEnabled = true;
+				}, 500);
 				if (!this.parameter.noDataExpression) {
 					this.ndvStore.setMappableNDVInputFocus(this.parameter.displayName);
 				}
 			},
 			onBlur() {
 				this.focused = false;
+				this.mappingTooltipEnabled = false;
 				if (!this.parameter.noDataExpression) {
 					this.ndvStore.setMappableNDVInputFocus('');
 				}
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 2f4d3412c..26471ffe3 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -121,7 +121,7 @@
 			<slot name="run-info"></slot>
 		</div>
 
-		<div v-if="maxOutputIndex > 0 && branches.length > 1" :class="{[$style.tabs]: displayMode === 'table'}">
+		<div v-if="maxOutputIndex > 0 && branches.length > 1" :class="$style.tabs">
 			<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
 		</div>
 
@@ -249,6 +249,16 @@
 				:totalRuns="maxRunIndex"
 			/>
 
+			<run-data-schema
+				v-else-if="hasNodeRun && displayMode === 'schema' && jsonData?.length > 0"
+				:data="jsonData"
+				:mappingEnabled="mappingEnabled"
+				:distanceFromActive="distanceFromActive"
+				:node="node"
+				:runIndex="runIndex"
+				:totalRuns="maxRunIndex"
+			/>
+
 			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
 				<n8n-text align="center" tag="div">{{ $locale.baseText('runData.noBinaryDataFound') }}</n8n-text>
 			</div>
@@ -351,6 +361,7 @@ import {
 	INodeUpdatePropertiesInformation,
 	IRunDataDisplayMode,
 	ITab,
+	NodePanelType,
 } from '@/Interface';
 
 import {
@@ -382,6 +393,7 @@ import { useNodeTypesStore } from "@/stores/nodeTypes";
 
 const RunDataTable = () => import('@/components/RunDataTable.vue');
 const RunDataJson = () => import('@/components/RunDataJson.vue');
+const RunDataSchema = () => import('@/components/RunDataSchema.vue');
 
 export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink',
@@ -402,6 +414,7 @@ export default mixins(
 			CodeEditor,
 			RunDataTable,
 			RunDataJson,
+			RunDataSchema,
 		},
 		props: {
 			nodeUi: {
@@ -432,7 +445,7 @@ export default mixins(
 				type: String,
 			},
 			paneType: {
-				type: String,
+				type: String as PropType<NodePanelType>,
 			},
 			overrideOutputs: {
 				type: Array as PropType<number[]>,
@@ -513,7 +526,7 @@ export default mixins(
 				return DATA_EDITING_DOCS_URL;
 			},
 			displayMode(): IRunDataDisplayMode {
-				return this.ndvStore.getPanelDisplayMode(this.paneType as "input" | "output");
+				return this.ndvStore.getPanelDisplayMode(this.paneType);
 			},
 			node(): INodeUi | null {
 				return (this.nodeUi as INodeUi | null) || null;
@@ -537,10 +550,13 @@ export default mixins(
 					{ label: this.$locale.baseText('runData.table'), value: 'table'},
 					{ label: this.$locale.baseText('runData.json'), value: 'json'},
 				];
+
 				if (this.binaryData.length) {
-					return [ ...defaults,
-						{ label: this.$locale.baseText('runData.binary'), value: 'binary'},
-					];
+					defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary'});
+				}
+
+				if (this.isPaneTypeInput && window.posthog?.isFeatureEnabled?.('schema-view')) {
+					defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema'});
 				}
 
 				return defaults;
@@ -957,7 +973,7 @@ export default mixins(
 			},
 			onDisplayModeChange(displayMode: IRunDataDisplayMode) {
 				const previous = this.displayMode;
-				this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: displayMode});
+				this.ndvStore.setPanelDisplayMode({pane: this.paneType, mode: displayMode});
 
 				const dataContainer = this.$refs.dataContainer;
 				if (dataContainer) {
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index f9cfee570..73461dffc 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -225,7 +225,6 @@ export default mixins(externalHooks).extend({
 	height: 100%;
 	padding-bottom: var(--spacing-3xl);
 	background-color: var(--color-background-base);
-	padding-top: var(--spacing-s);
 
 	&:hover {
 		/* Shows .actionsGroup element from <run-data-json-actions /> child component */
@@ -251,7 +250,10 @@ export default mixins(externalHooks).extend({
 }
 
 .dragPill {
-	padding: var(--spacing-4xs) var(--spacing-4xs) var(--spacing-3xs) var(--spacing-4xs);
+	display: flex;
+	height: 24px;
+	align-items: center;
+	padding: 0 var(--spacing-4xs);
 	color: var(--color-text-xlight);
 	font-weight: var(--font-weight-bold);
 	font-size: var(--font-size-2xs);
diff --git a/packages/editor-ui/src/components/RunDataSchema.test.ts b/packages/editor-ui/src/components/RunDataSchema.test.ts
new file mode 100644
index 000000000..a07066bbc
--- /dev/null
+++ b/packages/editor-ui/src/components/RunDataSchema.test.ts
@@ -0,0 +1,61 @@
+import { PiniaVuePlugin } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { render } from '@testing-library/vue';
+import RunDataJsonSchema from '@/components/RunDataSchema.vue';
+import { STORES } from "@/constants";
+
+describe('RunDataJsonSchema.vue', () => {
+	it('renders json schema properly', () => {
+		const {container} = render(RunDataJsonSchema, {
+				pinia: createTestingPinia({
+					initialState: {
+						[STORES.SETTINGS]: {
+							settings: {
+								templates: {
+									enabled: true,
+									host: 'https://api.n8n.io/api/',
+								},
+							},
+						},
+					},
+				}),
+				props: {
+					mappingEnabled: true,
+					distanceFromActive: 1,
+					runIndex: 1,
+					totalRuns: 2,
+					node: {
+						parameters: {
+							keepOnlySet: false,
+							values: {},
+							options: {},
+						},
+						id: '820ea733-d8a6-4379-8e73-88a2347ea003',
+						name: 'Set',
+						type: 'n8n-nodes-base.set',
+						typeVersion: 1,
+						position: [
+							380,
+							1060,
+						],
+						disabled: false,
+					},
+					data: [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }],
+				},
+				mocks: {
+					$locale: {
+						baseText() {
+							return '';
+						},
+					},
+					$store: {
+						getters: {},
+					},
+				},
+			},
+			vue => {
+				vue.use(PiniaVuePlugin);
+			});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
new file mode 100644
index 000000000..3321669c9
--- /dev/null
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { INodeUi, Schema } from "@/Interface";
+import RunDataSchemaItem from "@/components/RunDataSchemaItem.vue";
+import Draggable from '@/components/Draggable.vue';
+import { useNDVStore } from "@/stores/ndv";
+import { useWebhooksStore } from "@/stores/webhooks";
+import { runExternalHook } from "@/mixins/externalHooks";
+import { telemetry } from "@/plugins/telemetry";
+import { IDataObject } from "n8n-workflow";
+import { getSchema, mergeDeep } from "@/utils";
+
+type Props = {
+	data: IDataObject[]
+	mappingEnabled: boolean
+	distanceFromActive: number
+	runIndex: number
+	totalRuns: number
+	node: INodeUi | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	distanceFromActive: 0,
+});
+
+const draggingPath = ref<string>('');
+const ndvStore = useNDVStore();
+const webhooksStore = useWebhooksStore();
+
+const schema = computed<Schema>(() => {
+	const [head, ...tail] = props.data;
+	return getSchema(mergeDeep([head, ...tail, head]));
+});
+
+const onDragStart = (el: HTMLElement) => {
+	if (el && el.dataset?.path) {
+		draggingPath.value = el.dataset.path;
+	}
+
+	ndvStore.resetMappingTelemetry();
+};
+const onDragEnd = (el: HTMLElement) => {
+	draggingPath.value = '';
+
+	setTimeout(() => {
+		const mappingTelemetry = ndvStore.mappingTelemetry;
+		const telemetryPayload = {
+			src_node_type: props.node?.type,
+			src_field_name: el.dataset.name || '',
+			src_nodes_back: props.distanceFromActive,
+			src_run_index: props.runIndex,
+			src_runs_total: props.totalRuns,
+			src_field_nest_level: el.dataset.depth || 0,
+			src_view: 'schema',
+			src_element: el,
+			success: false,
+			...mappingTelemetry,
+		};
+
+		runExternalHook('runDataJson.onDragEnd', webhooksStore, telemetryPayload);
+
+		telemetry.track('User dragged data for mapping', telemetryPayload);
+	}, 1000); // ensure dest data gets set if drop
+};
+
+</script>
+
+<template>
+	<div :class="$style.schemaWrapper">
+		<draggable
+			type="mapping"
+			targetDataKey="mappable"
+			:disabled="!mappingEnabled"
+			@dragstart="onDragStart"
+			@dragend="onDragEnd"
+		>
+			<template #preview="{ canDrop, el }">
+				<div v-if="el" :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]" v-html="el.outerHTML" />
+			</template>
+			<template>
+				<div :class="$style.schema">
+					<run-data-schema-item
+						:schema="schema"
+						:level="0"
+						:parent="null"
+						:subKey="`${schema.type}-0-0`"
+						:mappingEnabled="mappingEnabled"
+						:draggingPath="draggingPath"
+						:distanceFromActive="distanceFromActive"
+						:node="node"
+					/>
+				</div>
+			</template>
+		</draggable>
+	</div>
+</template>
+
+<style lang="scss" module>
+.schemaWrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	overflow: auto;
+	line-height: 1.5;
+	word-break: normal;
+	height: 100%;
+	width: 100%;
+	background-color: var(--color-background-base);
+}
+
+.schema {
+	display: inline-block;
+	padding: 0 var(--spacing-s) var(--spacing-s);
+}
+
+.dragPill {
+	display: inline-flex;
+	height: 24px;
+	padding: 0 var(--spacing-3xs);
+	border: 1px solid var(--color-foreground-light);
+	border-radius: 4px;
+	background: var(--color-background-xlight);
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-base);
+	white-space: nowrap;
+	align-items: center;
+
+	span {
+		display: flex;
+		height: 100%;
+		align-items: center;
+	}
+}
+
+.droppablePill {
+	&,
+	span span {
+		color: var(--color-success);
+		border-color: var(--color-success-light);
+		background: var(--color-success-tint-3);
+	}
+}
+
+.defaultPill {
+	transform: translate(-50%, -100%);
+	box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
+
+	&,
+	span span {
+		color: var(--color-primary);
+		border-color: var(--color-primary-tint-1);
+		background: var(--color-primary-tint-3);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
new file mode 100644
index 000000000..be5c03b50
--- /dev/null
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -0,0 +1,267 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { INodeUi, Schema } from "@/Interface";
+import { checkExhaustive, shorten } from "@/utils";
+
+type Props = {
+	schema: Schema
+	level: number
+	parent: Schema | null
+	subKey: string
+	mappingEnabled: boolean
+	draggingPath: string
+	distanceFromActive: number
+	node: INodeUi | null
+}
+
+const props = defineProps<Props>();
+
+const isSchemaValueArray = computed(() => Array.isArray(props.schema.value));
+const isSchemaParentTypeArray = computed(() => props.parent?.type === 'array');
+const isFlat = computed(() => props.level === 0 && Array.isArray(props.schema.value) && props.schema.value.every(v => !Array.isArray(v.value)));
+const key = computed((): string | undefined => isSchemaParentTypeArray.value ? `[${props.schema.key}]` : props.schema.key);
+const schemaName = computed(() => isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key);
+const text = computed(() => Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0));
+
+const getJsonParameterPath = (path: string): string => `{{ ${props.distanceFromActive === 1 ? '$json' : `$node["${ props.node!.name }"].json`}${path} }}`;
+const transitionDelay = (i:number) => `${i * 0.033}s`;
+
+const getIconBySchemaType = (type: Schema['type']): string => {
+	switch (type) {
+		case 'object':
+			return 'cube';
+		case 'array':
+			return 'list';
+		case 'string':
+		case 'null':
+			return 'font';
+		case 'number':
+			return 'hashtag';
+		case 'boolean':
+			return 'check-square';
+		case 'function':
+			return 'code';
+		case 'bigint':
+			return 'calculator';
+		case 'symbol':
+			return 'sun';
+		case 'undefined':
+			return 'ban';
+	}
+
+	checkExhaustive(type);
+};
+
+</script>
+
+<template>
+	<div :class="$style.item">
+		<div
+			v-if="level > 0 || level === 0 && !isSchemaValueArray"
+			:title="schema.type"
+			:class="{
+				[$style.pill]: true,
+				[$style.mappable]: mappingEnabled,
+				[$style.dragged]: draggingPath === schema.path,
+			}"
+		>
+			<span
+				:class="$style.label"
+				:data-value="getJsonParameterPath(schema.path)"
+				:data-name="schemaName"
+				:data-path="schema.path"
+				:data-depth="level"
+				data-target="mappable"
+			>
+				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm"/>
+				<span v-if="isSchemaParentTypeArray">{{ parent.key }}</span>
+				<span v-if="key" :class="{[$style.arrayIndex]: isSchemaParentTypeArray}">{{ key }}</span>
+			</span>
+		</div>
+		<span v-if="text" :class="$style.text">{{ text }}</span>
+		<input :id="subKey" type="checkbox" checked />
+		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
+			<font-awesome-icon icon="angle-up" />
+		</label>
+		<div v-if="isSchemaValueArray" :class="{[$style.sub]: true, [$style.flat]: isFlat}">
+			<run-data-schema-item v-for="(s, i) in schema.value"
+				:key="`${s.type}-${level}-${i}`"
+				:schema="s"
+				:level="level + 1"
+				:parent="schema"
+				:subKey="`${s.type}-${level}-${i}`"
+				:mappingEnabled="mappingEnabled"
+				:draggingPath="draggingPath"
+				:distanceFromActive="distanceFromActive"
+				:node="node"
+				:style="{transitionDelay: transitionDelay(i)}"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+@import '@/styles/css-animation-helpers.scss';
+
+.item {
+	display: block;
+	position: relative;
+	transition: all 0.3s $ease-out-expo;
+
+	.item {
+		padding-top: var(--spacing-2xs);
+		padding-left: var(--spacing-l);
+	}
+
+	input {
+		position: absolute;
+		left: -100%;
+
+		~ .sub {
+			height: 0;
+
+			> .item {
+				transform: translateX(-100%);
+			}
+		}
+
+		&:checked {
+			~ .toggle svg {
+				transform: rotate(180deg);
+			}
+
+			~ .sub {
+				height: auto;
+
+				> .item {
+					transform: translateX(0);
+				}
+			}
+		}
+	}
+
+	&::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+}
+
+.sub {
+	display: block;
+	overflow: hidden;
+	transition: all 0.2s $ease-out-expo;
+	clear: both;
+
+	&.flat {
+		> .item {
+			padding-left: 0;
+		}
+	}
+
+	&:nth-of-type(1) {
+		> .item:nth-of-type(1) {
+			padding-top: 0;
+
+			.toggle {
+				top: -2px;
+			}
+		}
+	}
+}
+
+.pill {
+	float: left;
+	display: inline-flex;
+	height: 24px;
+	padding: 0 var(--spacing-3xs);
+	border: 1px solid var(--color-foreground-light);
+	border-radius: 4px;
+	background: var(--color-background-xlight);
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-dark);
+
+	span {
+		display: flex;
+		height: 100%;
+		align-items: center;
+
+		svg {
+			path {
+				fill: var(--color-text-light);
+			}
+		}
+	}
+
+	&.mappable {
+		cursor: grab;
+
+		&:hover {
+			&,
+			span span {
+				background-color: var(--color-background-light);
+				border-color: var(--color-foreground-base);
+			}
+		}
+	}
+
+	&.dragged {
+		&,
+		&:hover,
+		span {
+			color: var(--color-primary);
+			border-color: var(--color-primary-tint-1);
+			background: var(--color-primary-tint-3);
+
+			svg {
+				path {
+					fill: var(--color-primary);
+				}
+			}
+		}
+	}
+}
+
+.label {
+	> span {
+		margin-left: var(--spacing-3xs);
+		padding-left: var(--spacing-3xs);
+		border-left: 1px solid var(--color-foreground-light);
+
+		&.arrayIndex {
+			border: 0;
+			padding-left: 0;
+			margin-left: 0;
+		}
+	}
+}
+
+.text {
+	display: block;
+	padding-top: var(--spacing-4xs);
+	padding-left: var(--spacing-2xs);
+	font-weight: var(--font-weight-normal);
+	font-size: var(--font-size-2xs);
+	overflow: hidden;
+	word-break: break-word;
+}
+
+.toggle {
+	display: flex;
+	position: absolute;
+	padding: var(--spacing-2xs);
+	left: 0;
+	top: 5px;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+	font-weight: normal;
+	font-size: var(--font-size-s);
+	overflow: hidden;
+
+	svg {
+		transition: all 0.3s $ease-out-expo;
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 1b3aee433..5d67879cd 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -634,7 +634,10 @@ export default mixins(externalHooks).extend({
 }
 
 .dragPill {
-	padding: var(--spacing-4xs) var(--spacing-4xs) var(--spacing-3xs) var(--spacing-4xs);
+	display: flex;
+	height: 24px;
+	align-items: center;
+	padding: 0 var(--spacing-4xs);
 	color: var(--color-text-xlight);
 	font-weight: var(--font-weight-bold);
 	font-size: var(--font-size-2xs);
diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
new file mode 100644
index 000000000..173567d74
--- /dev/null
+++ b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
@@ -0,0 +1,326 @@
+// Vitest Snapshot v1
+
+exports[`RunDataJsonSchema.vue > renders json schema properly 1`] = `
+<div>
+  <div
+    class="_schemaWrapper_1w572_1"
+  >
+    <div
+      class=""
+    >
+      <div
+        class="_schema_1w572_1"
+      >
+        <div
+          class="_item_eg159_1"
+        >
+          <!---->
+          <!---->
+          <input
+            checked="checked"
+            id="object-0-0"
+            type="checkbox"
+          />
+          <!---->
+          <div
+            class="_sub_eg159_14"
+          >
+            <div
+              class="_item_eg159_1"
+              style="transition-delay: 0s;"
+            >
+              <div
+                class="_pill_eg159_51 _mappable_eg159_70"
+                title="string"
+              >
+                <span
+                  class="_label_eg159_89"
+                  data-depth="1"
+                  data-name="name"
+                  data-path="[\\"name\\"]"
+                  data-target="mappable"
+                  data-value="{{ $json[\\"name\\"] }}"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                    data-icon="font"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <!---->
+                  <span
+                    class=""
+                  >
+                    name
+                  </span>
+                </span>
+              </div>
+              <span
+                class="_text_eg159_100"
+              >
+                John
+              </span>
+              <input
+                checked="checked"
+                id="string-0-0"
+                type="checkbox"
+              />
+              <!---->
+              <!---->
+            </div>
+            <div
+              class="_item_eg159_1"
+              style="transition-delay: 0.033s;"
+            >
+              <div
+                class="_pill_eg159_51 _mappable_eg159_70"
+                title="number"
+              >
+                <span
+                  class="_label_eg159_89"
+                  data-depth="1"
+                  data-name="age"
+                  data-path="[\\"age\\"]"
+                  data-target="mappable"
+                  data-value="{{ $json[\\"age\\"] }}"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
+                    data-icon="hashtag"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <!---->
+                  <span
+                    class=""
+                  >
+                    age
+                  </span>
+                </span>
+              </div>
+              <span
+                class="_text_eg159_100"
+              >
+                22
+              </span>
+              <input
+                checked="checked"
+                id="number-0-1"
+                type="checkbox"
+              />
+              <!---->
+              <!---->
+            </div>
+            <div
+              class="_item_eg159_1"
+              style="transition-delay: 0.066s;"
+            >
+              <div
+                class="_pill_eg159_51 _mappable_eg159_70"
+                title="array"
+              >
+                <span
+                  class="_label_eg159_89"
+                  data-depth="1"
+                  data-name="hobbies"
+                  data-path="[\\"hobbies\\"]"
+                  data-target="mappable"
+                  data-value="{{ $json[\\"hobbies\\"] }}"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="svg-inline--fa fa-list fa-w-16 fa-sm"
+                    data-icon="list"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class=""
+                      d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <!---->
+                  <span
+                    class=""
+                  >
+                    hobbies
+                  </span>
+                </span>
+              </div>
+              <!---->
+              <input
+                checked="checked"
+                id="array-0-2"
+                type="checkbox"
+              />
+              <label
+                class="_toggle_eg159_20"
+                for="array-0-2"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="svg-inline--fa fa-angle-up fa-w-10"
+                  data-icon="angle-up"
+                  data-prefix="fas"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 320 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class=""
+                    d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </label>
+              <div
+                class="_sub_eg159_14"
+              >
+                <div
+                  class="_item_eg159_1"
+                  style="transition-delay: 0s;"
+                >
+                  <div
+                    class="_pill_eg159_51 _mappable_eg159_70"
+                    title="string"
+                  >
+                    <span
+                      class="_label_eg159_89"
+                      data-depth="2"
+                      data-name="string[0]"
+                      data-path="[\\"hobbies\\"][0]"
+                      data-target="mappable"
+                      data-value="{{ $json[\\"hobbies\\"][0] }}"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                        data-icon="font"
+                        data-prefix="fas"
+                        focusable="false"
+                        role="img"
+                        viewBox="0 0 448 512"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          class=""
+                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span>
+                        hobbies
+                      </span>
+                      <span
+                        class="_arrayIndex_eg159_94"
+                      >
+                        [0]
+                      </span>
+                    </span>
+                  </div>
+                  <span
+                    class="_text_eg159_100"
+                  >
+                    surfing
+                  </span>
+                  <input
+                    checked="checked"
+                    id="string-1-0"
+                    type="checkbox"
+                  />
+                  <!---->
+                  <!---->
+                </div>
+                <div
+                  class="_item_eg159_1"
+                  style="transition-delay: 0.033s;"
+                >
+                  <div
+                    class="_pill_eg159_51 _mappable_eg159_70"
+                    title="string"
+                  >
+                    <span
+                      class="_label_eg159_89"
+                      data-depth="2"
+                      data-name="string[1]"
+                      data-path="[\\"hobbies\\"][1]"
+                      data-target="mappable"
+                      data-value="{{ $json[\\"hobbies\\"][1] }}"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="svg-inline--fa fa-font fa-w-14 fa-sm"
+                        data-icon="font"
+                        data-prefix="fas"
+                        focusable="false"
+                        role="img"
+                        viewBox="0 0 448 512"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          class=""
+                          d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span>
+                        hobbies
+                      </span>
+                      <span
+                        class="_arrayIndex_eg159_94"
+                      >
+                        [1]
+                      </span>
+                    </span>
+                  </div>
+                  <span
+                    class="_text_eg159_100"
+                  >
+                    traveling
+                  </span>
+                  <input
+                    checked="checked"
+                    id="string-1-1"
+                    type="checkbox"
+                  />
+                  <!---->
+                  <!---->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="teleporter hidden"
+        data-v-d4e6e290=""
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/editor-ui/src/mixins/externalHooks.ts b/packages/editor-ui/src/mixins/externalHooks.ts
index 9d1683ea8..bb878a754 100644
--- a/packages/editor-ui/src/mixins/externalHooks.ts
+++ b/packages/editor-ui/src/mixins/externalHooks.ts
@@ -1,29 +1,31 @@
-import { IExternalHooks, IRootState } from '@/Interface';
-import { store } from '@/store';
+import { IExternalHooks } from '@/Interface';
 import { useWebhooksStore } from '@/stores/webhooks';
 import { IDataObject } from 'n8n-workflow';
 import { Store } from 'pinia';
 import Vue from 'vue';
 
+declare global {
+	interface Window {
+		n8nExternalHooks?: Record<string, Record<string, Array<(store: Store, metadata?: IDataObject) => Promise<void>>>>;
+	}
+}
+
 export async function runExternalHook(
 	eventName: string,
 	store: Store,
 	metadata?: IDataObject,
 ) {
-	// @ts-ignore
 	if (!window.n8nExternalHooks) {
 		return;
 	}
 
 	const [resource, operator] = eventName.split('.');
 
-	// @ts-ignore
-	if (window.n8nExternalHooks[resource] && window.n8nExternalHooks[resource][operator]) {
-		// @ts-ignore
+	if (window.n8nExternalHooks[resource]?.[operator]) {
 		const hookMethods = window.n8nExternalHooks[resource][operator];
 
-		for (const hookmethod of hookMethods) {
-			await hookmethod(store, metadata);
+		for (const hookMethod of hookMethods) {
+			await hookMethod(store, metadata);
 		}
 	}
 }
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 2f848b5ae..211366242 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -362,6 +362,7 @@
 	"dataMapping.success.moreInfo": "Check out our <a href=\"https://docs.n8n.io/data/data-mapping\" target=\"_blank\">docs</a> for more details on mapping data in n8n",
 	"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
 	"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
+	"dataMapping.schemaHint": "<img src='/static/schema-mapping-gif.gif'/> Drag a datapill onto <b>{name}</b> to map data",
 	"dataMapping.mapKeyToField": "Map '{name}' to a field",
 	"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
 	"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden",
@@ -983,6 +984,7 @@
 	"runData.invalidPinnedData": "Invalid pinned data",
 	"runData.items": "Items",
 	"runData.json": "JSON",
+	"runData.schema": "Schema",
 	"runData.mimeType": "Mime Type",
 	"runData.fileSize": "File Size",
 	"runData.ms": "ms",
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 2da92e522..bf1e0e8ec 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -10,13 +10,15 @@ import {
 	faArrowLeft,
 	faArrowRight,
 	faAt,
+	faBan,
 	faBook,
 	faBoxOpen,
 	faBug,
-	faBan,
+	faCalculator,
 	faCalendar,
 	faCheck,
 	faCheckCircle,
+	faCheckSquare,
 	faChevronDown,
 	faChevronUp,
 	faChevronLeft,
@@ -52,12 +54,14 @@ import {
 	faFilter,
 	faFlask,
 	faFolderOpen,
+	faFont,
 	faGlobeAmericas,
 	faGift,
 	faGlobe,
 	faGraduationCap,
 	faGripVertical,
 	faHandPointLeft,
+	faHashtag,
 	faHdd,
 	faHome,
 	faHourglass,
@@ -67,6 +71,7 @@ import {
 	faInfoCircle,
 	faKey,
 	faLink,
+	faList,
 	faLightbulb,
 	faMapSigns,
 	faMousePointer,
@@ -137,9 +142,11 @@ addIcon(faBan);
 addIcon(faBook);
 addIcon(faBoxOpen);
 addIcon(faBug);
+addIcon(faCalculator);
 addIcon(faCalendar);
 addIcon(faCheck);
 addIcon(faCheckCircle);
+addIcon(faCheckSquare);
 addIcon(faChevronLeft);
 addIcon(faChevronRight);
 addIcon(faChevronDown);
@@ -176,11 +183,13 @@ addIcon(faFilePdf);
 addIcon(faFilter);
 addIcon(faFlask);
 addIcon(faFolderOpen);
+addIcon(faFont);
 addIcon(faGift);
 addIcon(faGlobe);
 addIcon(faGlobeAmericas);
 addIcon(faGraduationCap);
 addIcon(faHandPointLeft);
+addIcon(faHashtag);
 addIcon(faHdd);
 addIcon(faHome);
 addIcon(faHourglass);
@@ -190,6 +199,7 @@ addIcon(faInfo);
 addIcon(faInfoCircle);
 addIcon(faKey);
 addIcon(faLink);
+addIcon(faList);
 addIcon(faLightbulb);
 addIcon(faMapSigns);
 addIcon(faMousePointer);
diff --git a/packages/editor-ui/src/plugins/telemetry/index.ts b/packages/editor-ui/src/plugins/telemetry/index.ts
index 2f1204d0c..3ef00e656 100644
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -6,22 +6,11 @@ import {
 } from 'n8n-workflow';
 import { Route } from "vue-router";
 
-import type { INodeCreateElement, IRootState } from "@/Interface";
+import type { INodeCreateElement } from "@/Interface";
 import type { IUserNodesPanelSession } from "./telemetry.types";
 import { useSettingsStore } from "@/stores/settings";
 import { useRootStore } from "@/stores/n8nRootStore";
 
-export function TelemetryPlugin(vue: typeof _Vue): void {
-	const telemetry = new Telemetry();
-
-	Object.defineProperty(vue, '$telemetry', {
-		get() { return telemetry; },
-	});
-	Object.defineProperty(vue.prototype, '$telemetry', {
-		get() { return telemetry; },
-	});
-}
-
 export class Telemetry {
 
 	private pageEventQueue: Array<{route: Route}>;
@@ -51,7 +40,7 @@ export class Telemetry {
 			instanceId: string;
 			userId?: string;
 			versionCli: string
-	 },
+		},
 	) {
 		if (!telemetrySettings.enabled || !telemetrySettings.config || this.rudderStack) return;
 
@@ -252,3 +241,14 @@ export class Telemetry {
 		this.rudderStack.load(key, url, options);
 	}
 }
+
+export const telemetry = new Telemetry();
+
+export function TelemetryPlugin(vue: typeof _Vue): void {
+	Object.defineProperty(vue, '$telemetry', {
+		get() { return telemetry; },
+	});
+	Object.defineProperty(vue.prototype, '$telemetry', {
+		get() { return telemetry; },
+	});
+}
diff --git a/packages/editor-ui/src/stores/ndv.ts b/packages/editor-ui/src/stores/ndv.ts
index 34b0f72bb..a3c5c8104 100644
--- a/packages/editor-ui/src/stores/ndv.ts
+++ b/packages/editor-ui/src/stores/ndv.ts
@@ -1,5 +1,5 @@
 import { STORES } from "@/constants";
-import { INodeUi, IRunDataDisplayMode, NDVState, XYPosition } from "@/Interface";
+import { INodeUi, IRunDataDisplayMode, NDVState, NodePanelType, XYPosition } from "@/Interface";
 import { IRunData } from "n8n-workflow";
 import { defineStore } from "pinia";
 import Vue from "vue";
@@ -11,7 +11,7 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		mainPanelDimensions: {},
 		sessionId: '',
 		input: {
-			displayMode: 'table',
+			displayMode: window.posthog?.isFeatureEnabled?.('schema-view') ? 'schema': 'table',
 			nodeName: undefined,
 			run: undefined,
 			branch: undefined,
@@ -60,7 +60,7 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 			return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
 		},
 		getPanelDisplayMode() {
-			return (panel: 'input' | 'output') => this[panel].displayMode;
+			return (panel: NodePanelType) => this[panel].displayMode;
 		},
 		inputPanelDisplayMode(): IRunDataDisplayMode {
 			return this.input.displayMode;
@@ -125,7 +125,7 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		resetNDVSessionId(): void  {
 			Vue.set(this, 'sessionId', '');
 		},
-		setPanelDisplayMode(params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}): void {
+		setPanelDisplayMode(params: {pane: NodePanelType, mode: IRunDataDisplayMode}): void {
 			Vue.set(this[params.pane], 'displayMode', params.mode);
 		},
 		setOutputPanelEditModeEnabled(isEnabled: boolean): void  {
diff --git a/packages/editor-ui/src/styles/css-animation-helpers.scss b/packages/editor-ui/src/styles/css-animation-helpers.scss
new file mode 100644
index 000000000..4676ec0b2
--- /dev/null
+++ b/packages/editor-ui/src/styles/css-animation-helpers.scss
@@ -0,0 +1 @@
+$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
diff --git a/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts b/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
index 1d2aada70..fb110c6da 100644
--- a/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
+++ b/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
@@ -1,8 +1,10 @@
-import { isEmpty, intersection } from "@/utils";
+import jp from "jsonpath";
+import { isEmpty, intersection, mergeDeep, getSchema, isValidDate } from "@/utils";
+import { Schema } from "@/Interface";
 
 describe("Utils", () => {
 	describe("isEmpty", () => {
-		it.each([
+		test.each([
 			[undefined, true],
 			[null, true],
 			[{}, true],
@@ -38,4 +40,287 @@ describe("Utils", () => {
 			expect(intersection([1, 2, 2, 3, 4], [2, 3, 3, 4], [2, 1, 5, 4, 4, 1], [2, 4, 5, 5, 6, 7])).toEqual([2, 4]);
 		});
 	});
+
+	describe("mergeDeep", () => {
+		test.each([
+			[
+				[[1, 2], [3, 4]],
+				{},
+				[3, 4],
+			],
+			[
+				[[1, 2], [3, 4]],
+				{ concatArrays: true },
+				[1, 2, 3, 4],
+			],
+			[
+				[[1, 2], [3, 4]],
+				{ overwriteArrays: true },
+				[3, 4],
+			],
+			[
+				[[1, 2, 3], [4, 5]],
+				{},
+				[4, 5, 3],
+			],
+			[
+				[[1, 2, 3], [4, 5]],
+				{ concatArrays: true },
+				[1, 2, 3, 4, 5],
+			],
+			[
+				[[1, 2, 3], [4, 5]],
+				{ overwriteArrays: true },
+				[4, 5],
+			],
+			[
+				[[1, 2], [3, 4, 5]],
+				{},
+				[3, 4, 5],
+			],
+			[
+				[[1, 2], [3, 4, 5]],
+				{ concatArrays: true },
+				[1, 2, 3, 4, 5],
+			],
+			[
+				[[1, 2], [3, 4, 5]],
+				{ overwriteArrays: true },
+				[3, 4, 5],
+			],
+			[
+				[{a:1, b: [1, 2, {d: 2}]},{}],
+				{},
+				{a:1, b: [1, 2, {d:2}]},
+			],
+			[
+				[{a:1, b: [1, 2, {d: 2}]},{}],
+				{ concatArrays: true },
+				{a:1, b: [1, 2, {d:2}]},
+			],
+			[
+				[{a:1, b: [1, 2, {d: 2}]},{}],
+				{ overwriteArrays: true },
+				{a:1, b: [1, 2, {d:2}]},
+			],
+			[
+				[[{a:1, b: [1, 2, {d: 2}]}],[]],
+				{},
+				[{a:1, b: [1, 2, {d:2}]}],
+			],
+			[
+				[[{a:1, b: [1, 2, {d: 2}]}],[]],
+				{ concatArrays: true },
+				[{a:1, b: [1, 2, {d:2}]}],
+			],
+			[
+				[[{a:1, b: [1, 2, {d: 2}]}],[]],
+				{ overwriteArrays: true },
+				[],
+			],
+			[
+				[{a: 1, b: [1, 2, 3]}, {a: 2, b: [4, 5, 6, 7], c: "2"}, {a: 3, b: [8, 9], d: "3"}],
+				{},
+				{a: 3, b: [8, 9, 6, 7], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [1, 2, 3]}, {a: 2, b: [4, 5, 6, 7], c: "2"}, {a: 3, b: [8, 9], d: "3"}],
+				{ concatArrays: true },
+				{a: 3, b: [1, 2, 3, 4, 5, 6, 7, 8, 9], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [1, 2, 3]}, {a: 2, b: [4, 5, 6, 7], c: "2"}, {a: 3, b: [8, 9], d: "3"}],
+				{ overwriteArrays: true },
+				{a: 3, b: [8, 9], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [{x: 'a'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				{},
+				{a: 3, b: [{x: 'a', y: 'b', z: 'c'}], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [{x: 'a'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				{ concatArrays: true },
+				{a: 3, b: [{x: 'a'}, {y: 'b'}, {z: 'c'}], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [{x: 'a'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				{ overwriteArrays: true },
+				{a: 3, b: [{z: 'c'}], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [{x: 'a'}, {w: 'd'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				{},
+				{a: 3, b: [{z: 'c'}, {w: 'd'}], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [{x: 'a'}, {w: 'd'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				{ concatArrays: true },
+				{a: 3, b: [{x: 'a'}, {w: 'd'}, {y: 'b'}, {z: 'c'}], c: "2", d: "3"},
+			],
+			[
+				[{a: 1, b: [{x: 'a'}, {w: 'd'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				{ overwriteArrays: true },
+				{a: 3, b: [{z: 'c'}], c: "2", d: "3"},
+			],
+		])(`case %#. input %j, options %j should return %j`, (sources, options, expected) => {
+			expect(mergeDeep([...sources], options)).toEqual(expected);
+		});
+	});
+
+	describe("getSchema", () => {
+		test.each([
+			[
+				,
+				{ type: 'undefined', value: 'undefined', path: '' },
+			],
+			[
+				undefined,
+				{ type: 'undefined', value: 'undefined', path: '' },
+			],
+			[
+				null,
+				{ type: 'null', value: '[null]', path: '' },
+			],
+			[
+				'John',
+				{ type: 'string', value: 'John', path: '' },
+			],
+			[
+				'123',
+				{ type: 'string', value: '123', path: '' },
+			],
+			[
+				123,
+				{ type: 'number', value: '123', path: '' },
+			],
+			[
+				true,
+				{ type: 'boolean', value: 'true', path: '' },
+			],
+			[
+				false,
+				{ type: 'boolean', value: 'false', path: '' },
+			],
+			[
+				() => {},
+				{ type: 'function', value: '', path: '' },
+			],
+			[
+				{},
+				{ type: 'object', value: [], path: '' },
+			],
+			[
+				[],
+				{ type: 'array', value: [], path: '' },
+			],
+			[
+				new Date('2022-11-22T00:00:00.000Z'),
+				{ type: 'string', value: '2022-11-22T00:00:00.000Z', path: '' },
+			],
+			[
+				Symbol('x'),
+				{ type: 'symbol', value: 'Symbol(x)', path: '' },
+			],
+			[
+				1n,
+				{ type: 'bigint', value: '1', path: '' },
+			],
+			[
+				['John', 1, true],
+				{ type: 'array', value: [{ type: 'string', value: 'John', key: '0', path: '[0]' }, { type: 'number', value: '1', key: '1', path: '[1]' }, { type: 'boolean', value: 'true', key: '2', path: '[2]' }], path: '' },
+			],
+			[
+				{ people: ['Joe', 'John']},
+				{ type: 'object',  value: [{ type: 'array', key: 'people', value: [{ type: 'string', value: 'Joe', key: '0', path: '["people"][0]' }, { type: 'string', value: 'John', key: '1', path: '["people"][1]' }], path: '["people"]' }], path: '' },
+			],
+			[
+				[{ name: 'John', age: 22 }, { name: 'Joe', age: 33 }],
+				{ type: 'array', value: [{ type: 'object', key: '0', value: [{ type: 'string', key: 'name', value: 'John', path: '[0]["name"]'}, { type: 'number', key: 'age', value: '22', path: '[0]["age"]' }], path: '[0]'}, { type: 'object', key: '1', value: [{ type: 'string', key: 'name', value: 'Joe', path: '[1]["name"]'}, { type: 'number', key: 'age', value: '33', path: '[1]["age"]' }], path: '[1]'}], path: '' },
+			],
+			[
+				[{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }],
+				{ type: 'array', value: [{ type: 'object', key: '0', value: [{ type: 'string', key: 'name', value: 'John', path: '[0]["name"]'}, { type: 'number', key: 'age', value: '22', path: '[0]["age"]' }, {type: 'array', key: 'hobbies', value: [{type: 'string', key: '0', value: 'surfing', path: '[0]["hobbies"][0]'},{type: 'string', key: '1', value: 'traveling', path: '[0]["hobbies"][1]'}], path: '[0]["hobbies"]'}], path: '[0]'}, { type: 'object', key: '1', value: [{ type: 'string', key: 'name', value: 'Joe', path: '[1]["name"]'}, { type: 'number', key: 'age', value: '33', path: '[1]["age"]' }, {type: 'array', key: 'hobbies', value: [{type: 'string', key: '0', value: 'skateboarding', path: '[1]["hobbies"][0]'},{type: 'string', key: '1', value: 'gaming', path: '[1]["hobbies"][1]'}], path: '[1]["hobbies"]'}], path: '[1]'}], path: '' },
+			],
+			[
+				[],
+				{ type: 'array', value: [], path: '' },
+			],
+			[
+				[[1,2]],
+				{ type: 'array', value: [{ type: 'array', key: '0', value: [{type: 'number', key: '0', value: '1', path: '[0][0]'}, {type: 'number', key: '1', value: '2', path: '[0][1]'}], path: '[0]' }], path: '' },
+			],
+			[
+				[[{ name: 'John', age: 22 }, { name: 'Joe', age: 33 }]],
+				{ type: 'array', value: [{type: 'array', key: '0', value:[{ type: 'object', key: '0', value: [{ type: 'string', key: 'name', value: 'John', path: '[0][0]["name"]'}, { type: 'number', key: 'age', value: '22', path: '[0][0]["age"]' }], path: '[0][0]'}, { type: 'object', key: '1', value: [{ type: 'string', key: 'name', value: 'Joe', path: '[0][1]["name"]'}, { type: 'number', key: 'age', value: '33', path: '[0][1]["age"]' }], path: '[0][1]'}], path: '[0]'}], path: '' },
+			],
+			[
+				[{ dates: [[new Date('2022-11-22T00:00:00.000Z'), new Date('2022-11-23T00:00:00.000Z')], [new Date('2022-12-22T00:00:00.000Z'), new Date('2022-12-23T00:00:00.000Z')]] }],
+				{ type: 'array', value: [{ type: 'object', key: '0', value: [{ type: 'array', key: 'dates', value: [{ type: 'array', key: '0', value: [{type: 'string', key: '0', value: '2022-11-22T00:00:00.000Z', path: '[0]["dates"][0][0]'}, {type: 'string', key: '1', value: '2022-11-23T00:00:00.000Z', path: '[0]["dates"][0][1]'}], path: '[0]["dates"][0]' }, { type: 'array', key: '1', value: [{type: 'string', key: '0', value: '2022-12-22T00:00:00.000Z', path: '[0]["dates"][1][0]'}, {type: 'string', key: '1', value: '2022-12-23T00:00:00.000Z', path: '[0]["dates"][1][1]'}], path: '[0]["dates"][1]' }], path: '[0]["dates"]' }], path: '[0]' }], path: '' },
+			],
+		])('should return the correct json schema for %s', (input, schema) => {
+			expect(getSchema(input)).toEqual(schema);
+		});
+
+		it('should return the correct data when using the generated json path on an object', () => {
+			const input = { people: ['Joe', 'John']};
+			const schema = getSchema(input) as Schema;
+			const pathData = jp.query(input, `$${ ((schema.value as Schema[])[0].value as Schema[])[0].path }`);
+			expect(pathData).toEqual(['Joe']);
+		});
+
+		it('should return the correct data when using the generated json path on a list', () => {
+			const input = [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }];
+			const schema = getSchema(input) as Schema;
+			const pathData = jp.query(input, `$${ (((schema.value as Schema[])[0].value as Schema[])[2].value as Schema[])[1].path }`);
+			expect(pathData).toEqual(['traveling']);
+		});
+
+		it('should return the correct data when using the generated json path on a list of list', () => {
+			const input = [[1,2]];
+			const schema = getSchema(input) as Schema;
+			const pathData = jp.query(input, `$${ (((schema.value as Schema[])[0]).value as Schema[])[1].path }`);
+			expect(pathData).toEqual([2]);
+		});
+
+		it('should return the correct data when using the generated json path on a list of list of objects', () => {
+			const input = [[{ name: 'John', age: 22 }, { name: 'Joe', age: 33 }]];
+			const schema = getSchema(input) as Schema;
+			const pathData = jp.query(input, `$${ (((schema.value as Schema[])[0].value as Schema[])[1].value as Schema[])[1].path}`);
+			expect(pathData).toEqual([33]);
+		});
+
+		it('should return the correct data when using the generated json path on a list of objects with a list of date tuples', () => {
+			const input = [{ dates: [[new Date('2022-11-22T00:00:00.000Z'), new Date('2022-11-23T00:00:00.000Z')], [new Date('2022-12-22T00:00:00.000Z'), new Date('2022-12-23T00:00:00.000Z')]] }];
+			const schema = getSchema(input) as Schema;
+			const pathData = jp.query(input, `$${ ((((schema.value as Schema[])[0].value as Schema[])[0].value as Schema[])[0].value as Schema[])[0].path}`);
+			expect(pathData).toEqual([new Date('2022-11-22T00:00:00.000Z')]);
+		});
+	});
+
+	describe("dateTests", () => {
+		test.each([
+			'04-08-2021',
+			'15.11.2022 12:34h',
+			'15.11.2022. 12:34h',
+			'21-03-1988 12:34h',
+			'2022-11-15',
+			'11/11/2022',
+			1668470400000,
+			'2021-1-01',
+			'2021-01-1',
+			'2021/11/24',
+			'2021/04/08',
+			'Mar 25 2015',
+			'25 Mar 2015',
+			'2019-06-11T00:00',
+			'2022-11-15T19:21:13.932Z',
+			'Tue Jan 01 2019 02:07:00 GMT+0530',
+			new Date(),
+			'4/08/2021',
+			'2021/04/04',
+		])('should correctly recognize dates', (input) => {
+			expect(isValidDate(input)).toBeTruthy();
+		});
+	});
 });
diff --git a/packages/editor-ui/src/utils/typeGuards.ts b/packages/editor-ui/src/utils/typeGuards.ts
index d83b8847c..28c180668 100644
--- a/packages/editor-ui/src/utils/typeGuards.ts
+++ b/packages/editor-ui/src/utils/typeGuards.ts
@@ -1,10 +1,14 @@
-import { INodeParameterResourceLocator } from "n8n-workflow";
-import { ICredentialsResponse } from "../Interface";
+import {INodeParameterResourceLocator} from "n8n-workflow";
+import {ICredentialsResponse} from "@/Interface";
 
 /*
 	Type guards used in editor-ui project
 */
 
+export const checkExhaustive = (value: never): never => {
+	throw new Error(`Unhandled value: ${value}`);
+};
+
 export function isResourceLocatorValue(value: unknown): value is INodeParameterResourceLocator {
 	return Boolean(typeof value === 'object' && value && 'mode' in value && 'value' in value);
 }
@@ -16,3 +20,13 @@ export function isNotNull<T>(value: T | null): value is T {
 export function isValidCredentialResponse(value: unknown): value is ICredentialsResponse {
 	return typeof value === 'object' && value !== null && 'id' in value;
 }
+
+export const isObj = (obj: unknown): obj is object => !!obj && Object.getPrototypeOf(obj) === Object.prototype;
+
+export function isString(value: unknown): value is string {
+	return typeof value === 'string';
+}
+
+export function isNumber(value: unknown): value is number {
+	return typeof value === 'number';
+}
diff --git a/packages/editor-ui/src/utils/typesUtils.ts b/packages/editor-ui/src/utils/typesUtils.ts
index d21a01558..47079872f 100644
--- a/packages/editor-ui/src/utils/typesUtils.ts
+++ b/packages/editor-ui/src/utils/typesUtils.ts
@@ -1,5 +1,7 @@
 import dateformat from 'dateformat';
 import { IDataObject, jsonParse } from 'n8n-workflow';
+import { Schema, Optional, Primitives } from "@/Interface";
+import { isObj } from "@/utils/typeGuards";
 
 /*
 	Constants and utility functions than can be used to manipulate different data types and objects
@@ -40,7 +42,6 @@ export const intersection = <T>(...arrays: T[][]): T[] => {
 	return [...new Set(rest.length ? intersection(ab, ...rest) : ab)];
 };
 
-
 export function abbreviateNumber(num: number) {
 	const tier = (Math.log10(Math.abs(num)) / 3) | 0;
 
@@ -61,18 +62,6 @@ export function convertToHumanReadableDate (epochTime: number) {
 	return dateformat(epochTime, 'd mmmm, yyyy @ HH:MM Z');
 }
 
-export function isString(value: unknown): value is string {
-	return typeof value === 'string';
-}
-
-export function isStringNumber(value: unknown): value is string {
-	return !isNaN(Number(value));
-}
-
-export function isNumber(value: unknown): value is number {
-	return typeof value === 'number';
-}
-
 export function stringSizeInBytes(input: string | IDataObject | IDataObject[] | undefined): number {
 	if (input === undefined) return 0;
 
@@ -135,3 +124,113 @@ export const clearJsonKey = (userInput: string | object) => {
 
 	return parsedUserInput.map(item => isJsonKeyObject(item) ? item.json : item);
 };
+
+
+// Holds weird date formats that we encounter when working with strings
+// Should be extended as new cases are found
+const CUSTOM_DATE_FORMATS = [
+	/\d{1,2}-\d{1,2}-\d{4}/, // Should handle dash separated dates with year at the end
+	/\d{1,2}\.\d{1,2}\.\d{4}/, // Should handle comma separated dates
+];
+
+export const isValidDate = (input: string | number | Date): boolean => {
+	try {
+		// Try to construct date object using input
+		const date = new Date(input);
+		// This will not fail for wrong dates so have to check like this:
+		if (date.getTime() < 0) {
+			return false;
+		} else if (date.toString() !== 'Invalid Date') {
+			return true;
+		} else if (typeof input === 'string') {
+			// Try to cover edge cases with regex
+			for (const regex of CUSTOM_DATE_FORMATS) {
+				if (input.match(regex)) {
+					return true;
+				}
+			}
+			return false;
+		}
+		return false;
+	} catch (e) {
+		return false;
+	}
+};
+
+export const getObjectKeys = <T extends object, K extends keyof T>(o: T): K[] => Object.keys(o) as K[];
+
+export const mergeDeep = <T extends object | Primitives>(sources: T[], options?: Partial<Record<'overwriteArrays' | 'concatArrays', boolean>>): T => sources.reduce((target, source) => {
+	if(Array.isArray(target) && Array.isArray(source)){
+		const tLength = target.length;
+		const sLength = source.length;
+
+		if(tLength === 0 || options?.overwriteArrays) {
+			return source;
+		}
+
+		if(sLength === 0) {
+			return target;
+		}
+
+		if(options?.concatArrays) {
+			return [...target, ...source];
+		}
+
+		if(tLength === sLength) {
+			return target.map((item, index) => mergeDeep([item, source[index]], options));
+		} else if(tLength < sLength) {
+			return source.map((item, index) => mergeDeep([target[index], item], options));
+		} else {
+			return [...source, ...target.slice(sLength)];
+		}
+	} else if(isObj(target) && isObj(source)) {
+		const targetKeys = getObjectKeys(target);
+		const sourceKeys = getObjectKeys(source);
+		const allKeys = [...new Set([...targetKeys, ...sourceKeys])];
+		const mergedObject = Object.create(Object.prototype);
+		for (const key of allKeys) {
+			if (targetKeys.includes(key) && sourceKeys.includes(key)) {
+				mergedObject[key] = mergeDeep([target[key] as T, source[key] as T], options);
+			} else if (targetKeys.includes(key)) {
+				mergedObject[key] = target[key];
+			} else {
+				mergedObject[key] = source[key];
+			}
+		}
+		return mergedObject;
+	} else {
+		return source;
+	}
+}, (Array.isArray(sources[0]) ? [] : {}) as T);
+
+export const getSchema = (input: Optional<Primitives | object>, path = ''): Schema => {
+	let schema:Schema = { type: 'undefined', value: 'undefined', path };
+	switch (typeof input) {
+		case 'object':
+			if (input === null) {
+				schema = { type: 'null', value: '[null]', path };
+			} else if (input instanceof Date) {
+				schema = { type: 'string', value: input.toISOString(), path };
+			} else if (Array.isArray(input)) {
+				schema = {
+					type: 'array',
+					value: input.map((item, index) => ({key: index.toString(), ...getSchema(item,`${path}[${index}]`)})),
+					path,
+				};
+			} else if (isObj(input)) {
+				schema = {
+					type: 'object',
+					value: Object.entries(input).map(([k, v]) => ({ key: k, ...getSchema(v, path + `["${ k }"]`)})),
+					path,
+				};
+			}
+			break;
+		case 'function':
+			schema =  { type: 'function', value: ``, path };
+			break;
+		default:
+			schema =  { type: typeof input, value: String(input), path };
+	}
+
+	return schema;
+};