diff --git a/docs/framework/public/components/jsonviewer.png b/docs/framework/public/components/jsonviewer.png
new file mode 100644
index 000000000..2146de402
Binary files /dev/null and b/docs/framework/public/components/jsonviewer.png differ
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index b9a476552..6922c5a7f 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -14,6 +14,7 @@ import CoreLink from "../core_components/content/CoreLink.vue";
 import CoreChatbot from "../core_components/content/CoreChatbot.vue";
 import CoreTags from "../core_components/content/CoreTags.vue";
 import CoreAvatar from "../core_components/content/CoreAvatar.vue";
+import CoreJsonViewer from "../core_components/content/CoreJsonViewer.vue";
 // input
 import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
@@ -115,12 +116,13 @@ const templateMap = {
 	switchinput: CoreSwitchInput,
 	reuse: CoreReuse,
 	avatar: CoreAvatar,
+	jsonviewer: CoreJsonViewer,
 };
 
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,
-	allowing for live updates when developing custom component templates. 
+	allowing for live updates when developing custom component templates.
 	*/
 
 	const liveCCT: Record<string, any> = (await import("../custom_components"))
diff --git a/src/ui/src/core_components/base/BaseCollapsible.vue b/src/ui/src/core_components/base/BaseCollapsible.vue
new file mode 100644
index 000000000..2a24dd1a8
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseCollapsible.vue
@@ -0,0 +1,99 @@
+<template>
+	<details
+		class="collapsible"
+		:open="open"
+		:disabled="disabled"
+		@toggle="onToggle"
+	>
+		<summary><slot name="title" /></summary>
+		<div class="content">
+			<slot name="content" />
+		</div>
+	</details>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	open: { type: Boolean, required: false },
+	disabled: { type: Boolean, required: false },
+});
+
+const emit = defineEmits({
+	toggle: (open: boolean) => typeof open === "boolean",
+});
+
+function onToggle(event) {
+	emit("toggle", event.newState === "open");
+}
+</script>
+
+<style scoped>
+/* customize the triangle and animate it */
+
+details {
+	box-sizing: border-box;
+}
+
+details summary::-webkit-details-marker {
+	display: none;
+}
+
+details[open] > summary:before {
+	transform: rotate(90deg);
+}
+
+summary {
+	outline: none;
+	display: flex;
+	padding-left: 16px;
+	position: relative;
+	cursor: pointer;
+}
+
+summary:before {
+	content: "";
+	border-width: 6px;
+	border-style: solid;
+	border-color: transparent transparent transparent var(--accentColor);
+	position: absolute;
+	left: 4px;
+	top: 2px;
+
+	transform: rotate(0);
+	transform-origin: 3px 50%;
+	transition: 0.3s transform ease;
+}
+
+summary:focus-visible:before {
+	border-color: transparent transparent transparent var(--primaryTextColor);
+}
+
+@media (prefers-reduced-motion) {
+	summary:before {
+		transition: unset;
+	}
+}
+
+/* small animation on the content */
+
+details[open] summary ~ .content {
+	animation: sweep 0.2s ease-in-out;
+}
+
+@media (prefers-reduced-motion) {
+	details[open] summary ~ .content {
+		animation: unset;
+	}
+}
+
+@keyframes sweep {
+	0% {
+		opacity: 0;
+		margin-top: -12px;
+	}
+	100% {
+		opacity: 1;
+		margin-top: 0;
+	}
+}
+</style>
diff --git a/src/ui/src/core_components/base/BaseJsonViewer.utils.ts b/src/ui/src/core_components/base/BaseJsonViewer.utils.ts
new file mode 100644
index 000000000..c2bf3f615
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseJsonViewer.utils.ts
@@ -0,0 +1,32 @@
+import type {
+	JsonData,
+	JsonValue,
+	JsonViewerTogglePayload,
+} from "./BaseJsonViewer.vue";
+
+export function isJSONValue(data: JsonData): data is JsonValue {
+	if (["string", "number", "boolean"].includes(typeof data)) return true;
+	if (data === null) return true;
+	return false;
+}
+
+export function isJSONArray(data: JsonData): data is JsonData[] {
+	if (isJSONValue(data)) return false;
+	return Array.isArray(data);
+}
+
+export function isJSONObject(
+	data: JsonData,
+): data is { [x: string]: JsonData } {
+	return !isJSONArray(data) && typeof data === "object" && data !== null;
+}
+
+export function getJSONLength(data: JsonData): number {
+	return isJSONValue(data) ? 1 : Object.keys(data).length;
+}
+
+export function jsonViewerToggleEmitDefinition(
+	payload: JsonViewerTogglePayload,
+) {
+	return typeof payload.open === "boolean" && Array.isArray(payload.path);
+}
diff --git a/src/ui/src/core_components/base/BaseJsonViewer.vue b/src/ui/src/core_components/base/BaseJsonViewer.vue
new file mode 100644
index 000000000..51c499c69
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseJsonViewer.vue
@@ -0,0 +1,72 @@
+<template>
+	<template v-if="isJSONObject(data) || isJSONArray(data)">
+		<BaseJsonViewerCollapsible
+			v-if="isRoot"
+			:open="isRootOpen"
+			:data="data"
+			@toggle="$emit('toggle', { path: [], open: $event })"
+		>
+			<BaseJsonViewerObject
+				:data="data"
+				:path="path"
+				:initial-depth="initialDepth"
+				@toggle="$emit('toggle', $event)"
+			/>
+		</BaseJsonViewerCollapsible>
+		<BaseJsonViewerObject
+			v-else
+			:data="data"
+			:path="path"
+			:initial-depth="initialDepth"
+			@toggle="$emit('toggle', $event)"
+		/>
+	</template>
+	<BaseJsonViewerValue v-else-if="isJSONValue(data)" :data="data" />
+</template>
+
+<script lang="ts">
+export type JsonValue = string | number | boolean | null;
+
+export type JsonData = JsonValue | { [x: string]: JsonData } | JsonData[];
+
+export type JsonPath = string[];
+
+export type JsonViewerTogglePayload = { path: JsonPath; open: boolean };
+</script>
+
+<script setup lang="ts">
+/**
+ * This component will detect the shape of the JSON and redirect the right dedicated component.
+ */
+import { PropType, computed } from "vue";
+import {
+	isJSONArray,
+	isJSONObject,
+	isJSONValue,
+	jsonViewerToggleEmitDefinition,
+} from "./BaseJsonViewer.utils";
+import BaseJsonViewerCollapsible from "./BaseJsonViewerCollapsible.vue";
+import BaseJsonViewerObject from "./BaseJsonViewerObject.vue";
+import BaseJsonViewerValue from "./BaseJsonViewerValue.vue";
+
+const props = defineProps({
+	data: {
+		type: Object as PropType<JsonData>,
+		required: true,
+	},
+	path: {
+		type: Array as PropType<JsonPath>,
+		default: () => [],
+	},
+	initialDepth: { type: Number, default: 0 },
+});
+
+defineEmits({
+	toggle: jsonViewerToggleEmitDefinition,
+});
+
+const isRoot = computed(() => props.path.length === 0);
+const isRootOpen = computed(
+	() => props.initialDepth === -1 || props.initialDepth > 0,
+);
+</script>
diff --git a/src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue b/src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue
new file mode 100644
index 000000000..2b8ac462c
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseJsonViewerChildrenCounter.vue
@@ -0,0 +1,40 @@
+<template>
+	<span>{{ text }}</span>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from "vue";
+import {
+	getJSONLength,
+	isJSONArray,
+	isJSONObject,
+} from "./BaseJsonViewer.utils";
+import type { JsonData } from "./BaseJsonViewer.vue";
+
+const props = defineProps({
+	data: {
+		type: Object as PropType<JsonData>,
+		required: true,
+	},
+});
+
+const printObject = (length: number) => `Object{${length}}`;
+const printArray = (length: number) => `Array[${length}]`;
+
+const text = computed(() => {
+	const count = getJSONLength(props.data);
+
+	if (count === 0) return printObject(0);
+	if (isJSONArray(props.data)) return printArray(count);
+	if (isJSONObject(props.data)) return printObject(count);
+	return printObject(0);
+});
+</script>
+
+<style scoped>
+span {
+	color: var(--secondaryTextColor);
+	font-family: monospace;
+	font-size: 12px;
+}
+</style>
diff --git a/src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue b/src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue
new file mode 100644
index 000000000..caa0154f4
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseJsonViewerCollapsible.vue
@@ -0,0 +1,58 @@
+<template>
+	<BaseCollapsible
+		:open="open"
+		:disabled="disabled"
+		@toggle="$emit('toggle', $event)"
+	>
+		<template #title>
+			<div class="BaseJsonViewerCollapsible__title">
+				<span v-if="title">{{ title }}</span>
+				<BaseJsonViewerChildrenCounter v-if="data" :data="data" />
+			</div>
+		</template>
+		<template #content>
+			<div class="BaseJsonViewerCollapsible__content">
+				<slot />
+			</div>
+		</template>
+	</BaseCollapsible>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import BaseCollapsible from "./BaseCollapsible.vue";
+import type { JsonData } from "./BaseJsonViewer.vue";
+import BaseJsonViewerChildrenCounter from "./BaseJsonViewerChildrenCounter.vue";
+
+defineProps({
+	open: { type: Boolean, required: false },
+	disabled: { type: Boolean, required: false },
+	title: { type: String, required: false, default: undefined },
+	data: {
+		type: [Object, Array] as PropType<JsonData>,
+		required: false,
+		default: undefined,
+	},
+});
+
+defineEmits({
+	toggle: (open: boolean) => typeof open === "boolean",
+});
+</script>
+
+<style scoped>
+.BaseJsonViewerCollapsible__title {
+	font-family: monospace;
+	font-size: 12px;
+	display: flex;
+	gap: 8px;
+}
+
+.BaseJsonViewerCollapsible__content {
+	margin-left: 7px;
+	padding-left: var(--jsonViewerIndentationSpacing, 8px);
+	padding-top: 4px;
+	padding-bottom: 4px;
+	border-left: 1px solid var(--separatorColor);
+}
+</style>
diff --git a/src/ui/src/core_components/base/BaseJsonViewerObject.vue b/src/ui/src/core_components/base/BaseJsonViewerObject.vue
new file mode 100644
index 000000000..c49ffac1c
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseJsonViewerObject.vue
@@ -0,0 +1,123 @@
+<template>
+	<div class="WdsJsonViewerObject">
+		<template
+			v-for="([key, value], index) in Object.entries(data)"
+			:key="index"
+		>
+			<!-- This is a single value, we display it as plain key/value text -->
+			<div
+				v-if="isJSONValue(value) || getJSONLength(value) === 0"
+				class="WdsJsonViewerObject__value"
+			>
+				<span>{{ key }}</span
+				>:
+				<BaseJsonViewerValue :data="value" />
+			</div>
+			<!-- This is a an object -->
+			<BaseJsonViewerCollapsible
+				v-else
+				:open="isOpen(key)"
+				:title="key"
+				:data="value"
+				@toggle="toggleOpenedKey(key, $event)"
+			>
+				<BaseJsonViewer
+					v-if="isOpen(key)"
+					:data="value"
+					:path="[...path, key]"
+					:initial-depth="initialDepth"
+					@toggle="$emit('toggle', $event)"
+				/>
+			</BaseJsonViewerCollapsible>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, ref, toRef, watch } from "vue";
+import {
+	getJSONLength,
+	isJSONValue,
+	jsonViewerToggleEmitDefinition,
+} from "./BaseJsonViewer.utils";
+import type { JsonData, JsonPath } from "./BaseJsonViewer.vue";
+import BaseJsonViewer from "./BaseJsonViewer.vue";
+import BaseJsonViewerCollapsible from "./BaseJsonViewerCollapsible.vue";
+import BaseJsonViewerValue from "./BaseJsonViewerValue.vue";
+
+const props = defineProps({
+	data: {
+		type: Object as PropType<{ [x: string]: JsonData } | JsonData>,
+		required: true,
+	},
+	path: {
+		type: Array as PropType<JsonPath>,
+		default: () => [],
+	},
+	initialDepth: { type: Number, default: 0 },
+});
+
+const initialDepth = toRef(props, "initialDepth");
+
+const emit = defineEmits({
+	toggle: jsonViewerToggleEmitDefinition,
+});
+
+const openedKeys = ref<string[]>([]);
+
+const currentLevel = computed(() => props.path.length + 1);
+
+watch(
+	initialDepth,
+	() => {
+		if (initialDepth.value === 0) {
+			openedKeys.value = [];
+			return;
+		}
+
+		const shouldAddKeys =
+			initialDepth.value === -1 ||
+			initialDepth.value > currentLevel.value;
+
+		if (!shouldAddKeys) return;
+
+		const keysToOpen = new Set([
+			...openedKeys.value,
+			...Object.keys(props.data),
+		]);
+
+		openedKeys.value = Array.from(keysToOpen);
+	},
+	{ immediate: true },
+);
+
+function toggleOpenedKey(key: string, open: boolean) {
+	if (open) {
+		openedKeys.value = [...openedKeys.value, key];
+	} else {
+		openedKeys.value = openedKeys.value.filter((k) => k !== key);
+	}
+	emit("toggle", { open, path: [...props.path, key] });
+}
+
+function isOpen(key: string) {
+	return openedKeys.value.includes(String(key));
+}
+</script>
+
+<style scoped>
+.WdsJsonViewerObject {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.WdsJsonViewerObject__value {
+	font-family: monospace;
+	font-size: 12px;
+	padding-left: 16px;
+
+	display: flex;
+	gap: 4px;
+}
+</style>
diff --git a/src/ui/src/core_components/base/BaseJsonViewerValue.vue b/src/ui/src/core_components/base/BaseJsonViewerValue.vue
new file mode 100644
index 000000000..12b0c819f
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseJsonViewerValue.vue
@@ -0,0 +1,21 @@
+<template>
+	<span class="JsonViewerValue">{{ dataFormatted }}</span>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from "vue";
+import type { JsonValue } from "./BaseJsonViewer.vue";
+
+const props = defineProps({
+	data: { type: Object as PropType<JsonValue>, required: true },
+});
+
+const dataFormatted = computed(() => JSON.stringify(props.data));
+</script>
+
+<style scoped>
+.JsonViewerValue {
+	font-family: monospace;
+	color: var(--secondaryTextColor);
+}
+</style>
diff --git a/src/ui/src/core_components/content/CoreJsonViewer.vue b/src/ui/src/core_components/content/CoreJsonViewer.vue
new file mode 100644
index 000000000..f44c9b3d6
--- /dev/null
+++ b/src/ui/src/core_components/content/CoreJsonViewer.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="CoreJsonViewer">
+		<BaseJsonViewer
+			v-if="data"
+			:data="data"
+			:initial-depth="initialDepth"
+		/>
+		<BaseJsonViewerChildrenCounter v-else :data="{}" />
+	</div>
+</template>
+
+<script lang="ts">
+import {
+	accentColor,
+	cssClasses,
+	secondaryTextColor,
+	separatorColor,
+} from "../../renderer/sharedStyleFields";
+import {
+	FieldCategory,
+	FieldType,
+	WriterComponentDefinition,
+} from "../../writerTypes";
+
+const description = "A component to explore JSON data as a hierarchy.";
+
+const initialData = {
+	name: "JSON Viewer",
+	description: "A JSON tree viewer where you can expand the keys.",
+	sample: {
+		description: "This sample is opened by default",
+		bool: true,
+		null: null,
+		list: [1, "two", { key: 3 }],
+	},
+	sampleClosed: {
+		description: "This sample is not opened by default",
+	},
+	createdAt: new Date(),
+};
+
+const definition: WriterComponentDefinition = {
+	name: "JSON Viewer",
+	description,
+	category: "Content",
+	fields: {
+		data: {
+			name: "Data",
+			init: JSON.stringify(initialData),
+			type: FieldType.Object,
+		},
+		initialDepth: {
+			name: "Initial depth",
+			desc: "Sets the initial viewing depth of the JSON tree hierarchy. Use -1 to display the full hierarchy.",
+			type: FieldType.Number,
+			init: "0",
+		},
+		jsonViewerIndentationSpacing: {
+			name: "JSON indentation",
+			type: FieldType.Width,
+			category: FieldCategory.Style,
+			applyStyleVariable: true,
+		},
+		accentColor,
+		secondaryTextColor,
+		separatorColor,
+		cssClasses,
+	},
+	previewField: "data",
+};
+
+export default { writer: definition };
+</script>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import injectionKeys from "../../injectionKeys";
+import type { JsonData } from "../base/BaseJsonViewer.vue";
+import BaseJsonViewer from "../base/BaseJsonViewer.vue";
+import BaseJsonViewerChildrenCounter from "../base/BaseJsonViewerChildrenCounter.vue";
+
+const fields = inject(injectionKeys.evaluatedFields);
+
+const data = computed(() => fields.data.value as JsonData);
+
+const initialDepth = computed(() => Number(fields.initialDepth.value) || 0);
+</script>
+
+<style scoped>
+.error {
+	color: #ffcfc2;
+}
+</style>