diff --git a/package-lock.json b/package-lock.json
index b8fdb618a..31fc762f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11771,6 +11771,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/fuse.js": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+			"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/gauge": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -23095,6 +23103,7 @@
 				"@tato30/vue-pdf": "^1.9.6",
 				"arquero": "^5.2.0",
 				"chroma-js": "^2.4.2",
+				"fuse.js": "7.0.0",
 				"mapbox-gl": "3.2.0",
 				"marked": "^12.0.1",
 				"monaco-editor": "^0.47.0",
diff --git a/src/ui/.gitignore b/src/ui/.gitignore
index e7d44cf12..624317c75 100644
--- a/src/ui/.gitignore
+++ b/src/ui/.gitignore
@@ -4,6 +4,7 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 storybook-static/
+src/stories/core_components/
 
 *storybook.log
 /custom_components_dist
diff --git a/src/ui/package.json b/src/ui/package.json
index 04cf954d5..5b1427fba 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -21,6 +21,7 @@
 		"@tato30/vue-pdf": "^1.9.6",
 		"arquero": "^5.2.0",
 		"chroma-js": "^2.4.2",
+		"fuse.js": "7.0.0",
 		"mapbox-gl": "3.2.0",
 		"marked": "^12.0.1",
 		"monaco-editor": "^0.47.0",
diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/BuilderFieldsAlign.vue
index 60c094fab..09037d045 100644
--- a/src/ui/src/builder/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/BuilderFieldsAlign.vue
@@ -1,5 +1,10 @@
 <template>
-	<div ref="rootEl" class="BuilderFieldsAlign" tabindex="-1">
+	<div
+		ref="rootEl"
+		class="BuilderFieldsAlign"
+		tabindex="-1"
+		:data-automation-key="props.fieldKey"
+	>
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
@@ -43,10 +48,9 @@
 				/>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
 			/>
@@ -70,6 +74,7 @@ import { Component } from "../writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderFieldsColor.vue b/src/ui/src/builder/BuilderFieldsColor.vue
index b50610d6b..d1f0d12cd 100644
--- a/src/ui/src/builder/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/BuilderFieldsColor.vue
@@ -3,7 +3,7 @@
 		ref="rootEl"
 		class="BuilderFieldsColor"
 		tabindex="-1"
-		:data-key="fieldKey"
+		:data-automation-key="fieldKey"
 	>
 		<div class="chipStackContainer">
 			<div class="chipStack">
@@ -49,10 +49,9 @@
 				/>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInput"
 			/>
@@ -74,6 +73,7 @@ import {
 import { Component } from "../writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderFieldsKeyValue.vue b/src/ui/src/builder/BuilderFieldsKeyValue.vue
index be9560745..6cda788d0 100644
--- a/src/ui/src/builder/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/BuilderFieldsKeyValue.vue
@@ -1,5 +1,10 @@
 <template>
-	<div ref="rootEl" class="BuilderFieldsOptions" tabindex="-1">
+	<div
+		ref="rootEl"
+		class="BuilderFieldsOptions"
+		tabindex="-1"
+		:data-automation-key="props.fieldKey"
+	>
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
@@ -38,17 +43,19 @@
 				</div>
 			</div>
 			<div class="formAdd">
-				<input
+				<BuilderTemplateInput
 					ref="assistedKeyEl"
-					v-model="formAdd.key"
-					type="text"
+					class="inputKey"
 					placeholder="Type a key..."
+					:value="formAdd.key"
+					@update:value="($event) => (formAdd.key = $event)"
 					@keydown.enter="addAssistedEntry"
 				/>
-				<input
-					v-model="formAdd.value"
-					type="text"
+				<BuilderTemplateInput
+					class="inputValue"
 					placeholder="Type a value..."
+					:value="formAdd.value"
+					@update:value="($event) => (formAdd.value = $event)"
 					@keydown.enter="addAssistedEntry"
 				/>
 				<button @click="addAssistedEntry">
@@ -81,6 +88,7 @@ import { Component } from "../writerTypes";
 import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -251,13 +259,7 @@ onMounted(async () => {
 	padding: 12px;
 }
 
-textarea {
-	resize: vertical;
-	height: 8em;
-	padding: 12px;
-}
-
-input {
+.BuilderTemplateInput {
 	margin-bottom: 8px;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderFieldsObject.vue b/src/ui/src/builder/BuilderFieldsObject.vue
index f5bce3874..9d4ef6f1d 100644
--- a/src/ui/src/builder/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/BuilderFieldsObject.vue
@@ -1,18 +1,16 @@
 <template>
-	<textarea
-		v-capture-tabs
+	<BuilderTemplateInput
 		class="BuilderFieldsObject"
+		:data-automation-key="props.fieldKey"
+		multiline="true"
 		variant="code"
 		:value="component.content[fieldKey]"
-		autocorrect="off"
-		autocomplete="off"
-		spellcheck="false"
-		:placeholder="templateField.default"
+		:placeholder="templateField.placeholder"
 		@input="
 			(ev: Event) =>
 				formatAndSetContentValue((ev.target as HTMLInputElement).value)
 		"
-	></textarea>
+	/>
 </template>
 
 <script setup lang="ts">
@@ -20,6 +18,7 @@ import { toRefs, inject, computed } from "vue";
 import { Component } from "../writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
index 5c87cf61f..e59a39935 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -1,5 +1,10 @@
 <template>
-	<div ref="rootEl" class="BuilderFieldsPadding" tabindex="-1">
+	<div
+		ref="rootEl"
+		class="BuilderFieldsPadding"
+		tabindex="-1"
+		:data-automation-key="props.fieldKey"
+	>
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
@@ -113,10 +118,9 @@
 				</div>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
 			/>
@@ -141,6 +145,7 @@ import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
 import { languages } from "monaco-editor";
 import css = languages.css;
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderFieldsShadow.vue b/src/ui/src/builder/BuilderFieldsShadow.vue
index 6a38a2c58..6c5dbac00 100644
--- a/src/ui/src/builder/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/BuilderFieldsShadow.vue
@@ -1,5 +1,10 @@
 <template>
-	<div ref="rootEl" class="BuilderFieldsShadow" tabindex="-1">
+	<div
+		ref="rootEl"
+		class="BuilderFieldsShadow"
+		tabindex="-1"
+		:data-automation-key="props.fieldKey"
+	>
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
@@ -113,10 +118,9 @@
 				</div>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleCSSInput"
 			/>
@@ -138,6 +142,7 @@ import {
 import { Component } from "../writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/BuilderFieldsText.vue
index d7a96493b..a06dab652 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/BuilderFieldsText.vue
@@ -1,55 +1,28 @@
 <template>
-	<div class="BuilderFieldsText" :data-key="props.fieldKey">
+	<div class="BuilderFieldsText" :data-automation-key="props.fieldKey">
 		<template
 			v-if="
 				!templateField.control ||
 				templateField.control == FieldControl.Text
 			"
 		>
-			<input
-				type="text"
-				:value="component.content[fieldKey]"
+			<BuilderTemplateInput
 				class="content"
-				autocorrect="off"
-				autocomplete="off"
-				spellcheck="false"
+				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
-				:list="
-					templateField.options
-						? `list-${componentId}-${fieldKey}`
-						: undefined
-				"
+				:options="options"
 				@input="handleInput"
 			/>
-			<datalist
-				v-if="templateField.options"
-				:id="`list-${componentId}-${fieldKey}`"
-			>
-				<option
-					v-for="(option, optionKey) in options"
-					:key="optionKey"
-					:value="optionKey"
-				>
-					<template
-						v-if="option.toLowerCase() !== optionKey.toLowerCase()"
-					>
-						{{ option }}
-					</template>
-				</option>
-			</datalist>
 		</template>
 		<template v-else-if="templateField.control == FieldControl.Textarea">
-			<textarea
-				v-capture-tabs
+			<BuilderTemplateInput
+				multiline="true"
+				variant="text"
 				class="content"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
-				autocorrect="off"
-				autocomplete="off"
-				spellcheck="false"
 				@input="handleInput"
-			>
-			</textarea>
+			/>
 		</template>
 	</div>
 </template>
@@ -59,6 +32,7 @@ import { toRefs, inject, computed } from "vue";
 import { Component, FieldControl } from "../writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -95,15 +69,13 @@ const handleInput = (ev: Event) => {
 };
 </script>
 
-<style scoped>
-@import "./sharedStyles.css";
-
-.content {
+<style>
+.BuilderFieldsText .content {
 	padding: 16px 12px 12px 12px;
 	width: 100%;
 }
+</style>
 
-textarea {
-	resize: vertical;
-}
+<style scoped>
+@import "./sharedStyles.css";
 </style>
diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/BuilderFieldsWidth.vue
index f2e8dcbd6..aa0f4d919 100644
--- a/src/ui/src/builder/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/BuilderFieldsWidth.vue
@@ -1,5 +1,10 @@
 <template>
-	<div ref="rootEl" class="BuilderFieldsWidth" tabindex="-1">
+	<div
+		ref="rootEl"
+		class="BuilderFieldsWidth"
+		tabindex="-1"
+		:data-automation-key="props.fieldKey"
+	>
 		<div class="chipStackContainer">
 			<div class="chipStack">
 				<button
@@ -52,10 +57,9 @@
 				</div>
 			</div>
 
-			<input
+			<BuilderTemplateInput
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
-				type="text"
 				:value="component.content[fieldKey]"
 				@input="handleInputCss"
 			/>
@@ -78,6 +82,7 @@ import { Component } from "../writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderSettingsBinding.vue b/src/ui/src/builder/BuilderSettingsBinding.vue
index ffcbb89f7..f36c9cd3a 100644
--- a/src/ui/src/builder/BuilderSettingsBinding.vue
+++ b/src/ui/src/builder/BuilderSettingsBinding.vue
@@ -7,10 +7,10 @@
 		<div class="main">
 			<div class="fieldWrapper">
 				<span class="name">State element</span>
-				<input
-					:value="component.binding?.stateRef"
-					type="text"
+				<BuilderTemplateInput
+					type="state"
 					class="content"
+					:value="component.binding?.stateRef"
 					placeholder="my_var"
 					@input="
 						(ev: Event) =>
@@ -34,6 +34,7 @@
 import { computed, inject } from "vue";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -53,7 +54,8 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 	margin-top: 16px;
 }
 
-input {
+.content {
 	padding: 16px 12px 12px 12px;
+	width: 100%;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSettingsVisibility.vue b/src/ui/src/builder/BuilderSettingsVisibility.vue
index d860ed176..d3cf31a2e 100644
--- a/src/ui/src/builder/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/BuilderSettingsVisibility.vue
@@ -37,9 +37,9 @@
 				class="fieldWrapper"
 			>
 				<span class="name">Visibility value</span>
-				<input
+				<BuilderTemplateInput
 					:value="component.visible"
-					type="text"
+					type="state"
 					class="content"
 					placeholder="my_visibility_state_value"
 					@input="
@@ -64,6 +64,7 @@
 import { computed, inject } from "vue";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
+import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -83,7 +84,7 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 	margin-top: 16px;
 }
 
-input {
+.content {
 	padding: 16px 12px 12px 12px;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index 5e0fb6c94..deb50f3aa 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -155,6 +155,7 @@ const handleDragEnd = (ev: DragEvent) => {
 	top: 0;
 	background: var(--builderBackgroundColor);
 	font-size: 0.875rem;
+	height: 40px;
 }
 
 h3 {
@@ -192,6 +193,7 @@ h3 {
 	display: flex;
 	align-items: center;
 	gap: 4px;
+	height: 33px;
 }
 
 .component:hover {
diff --git a/src/ui/src/builder/BuilderTemplateInput.vue b/src/ui/src/builder/BuilderTemplateInput.vue
new file mode 100644
index 000000000..433384a8d
--- /dev/null
+++ b/src/ui/src/builder/BuilderTemplateInput.vue
@@ -0,0 +1,227 @@
+<template>
+	<div class="BuilderTemplateInput">
+		<template v-if="!props.multiline">
+			<input
+				ref="input"
+				class="templateInput"
+				type="text"
+				:value="props.value"
+				autocorrect="off"
+				autocomplete="off"
+				spellcheck="false"
+				:placeholder="props.placeholder"
+				:list="props.options ? `list-${props.inputId}` : undefined"
+				@input="handleInput"
+				@blur="handleBlur"
+			/>
+			<datalist v-if="props.options" :id="`list-${props.inputId}`">
+				<option
+					v-for="(option, optionKey) in options"
+					:key="optionKey"
+					:value="optionKey"
+				>
+					<template
+						v-if="option.toLowerCase() !== optionKey.toLowerCase()"
+					>
+						{{ option }}
+					</template>
+				</option>
+			</datalist>
+		</template>
+
+		<template v-if="props.multiline">
+			<textarea
+				ref="input"
+				v-capture-tabs
+				class="templateInput"
+				:variant="props.vatiant"
+				:value="props.value"
+				autocorrect="off"
+				autocomplete="off"
+				spellcheck="false"
+				:placeholder="props.placeholder"
+				@input="handleInput"
+			></textarea>
+		</template>
+
+		<div v-if="autocompleteOptions.length" class="fieldStateAutocomplete">
+			<div
+				v-for="(option, optionKey) in autocompleteOptions"
+				:key="optionKey"
+				class="fieldStateAutocompleteOption"
+				:value="optionKey"
+				@click="() => handleComplete(option.text)"
+			>
+				<span class="prop">{{ option.text }}</span
+				><span class="type">{{ option.type }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, nextTick } from "vue";
+import injectionKeys from "../injectionKeys";
+import Fuse from "fuse.js";
+
+const emit = defineEmits(["input", "update:value"]);
+const props = defineProps<{
+	inputId?: string;
+	value?: string;
+	multiline?: boolean;
+	variant?: "code" | "text";
+	type?: "state" | "template";
+	options?: Record<string, string>;
+	placeholder?: string;
+}>();
+
+const ss = inject(injectionKeys.core);
+const autocompleteOptions = ref<string[]>([]);
+const input = ref<HTMLInputElement | null>(null);
+
+defineExpose({
+	focus: () => input.value?.focus(),
+});
+
+function _get(object: object, path: string[]) {
+	return path.reduce((acc, key) => acc?.[key], object);
+}
+
+const handleComplete = (selectedText) => {
+	let newValue = input.value?.value ?? "";
+	const { selectionStart, selectionEnd } = input.value ?? {};
+	const text = newValue.slice(0, selectionStart);
+	const full = getPath(text);
+	if (full === null) return;
+	const keyword = full.at(-1);
+	const replaced = text.replace(new RegExp(keyword + "$"), selectedText);
+	newValue = replaced + newValue.slice(selectionEnd);
+	emit("input", { target: { value: newValue } });
+	emit("update:value", newValue);
+	autocompleteOptions.value = [];
+	input.value.focus();
+	nextTick(() => {
+		input.value.selectionEnd = replaced.length;
+		input.value.selectionStart = replaced.length;
+	});
+};
+
+const typeToString = (val) => {
+	if (val === null) return "null";
+	if (val === undefined) return "undefined";
+	return typeof val;
+};
+
+const getPath = (text) => {
+	if ((props.type ?? "template") === "state") {
+		return text.split(".");
+	}
+	const m = text.match(/@\{([^}{@]*)$/);
+	if (!m) {
+		return null;
+	}
+	const raw = m?.[1] ?? "";
+	return raw.split(".");
+};
+
+const handleInput = (ev) => {
+	emit("input", ev);
+	emit("update:value", ev.target.value);
+	showAutocomplete();
+};
+
+const showAutocomplete = () => {
+	const { selectionStart, selectionEnd, value: newValue } = input.value ?? {};
+	const collapsed = selectionStart === selectionEnd;
+	if (!collapsed) {
+		autocompleteOptions.value = [];
+		return;
+	}
+	const text = newValue.slice(0, selectionStart);
+	const full = getPath(text);
+	if (full === null) {
+		autocompleteOptions.value = [];
+		return;
+	}
+	const keyword = full.at(-1);
+	const path = full.slice(0, -1);
+
+	const allOptions = Object.entries(_get(ss.getUserState(), path) ?? {}).map(
+		([key, val]) => ({
+			text: key,
+			type: typeToString(val),
+		}),
+	);
+
+	const fuse = new Fuse(allOptions, {
+		findAllMatches: true,
+		includeMatches: true,
+		keys: ["text"],
+	});
+
+	if (keyword === "") {
+		autocompleteOptions.value = allOptions;
+		return;
+	}
+	autocompleteOptions.value = fuse.search(keyword).map((match) => {
+		const { item } = match;
+		return item;
+	});
+};
+
+const handleBlur = () => {
+	setTimeout(() => {
+		autocompleteOptions.value = [];
+	}, 100);
+};
+</script>
+
+<style scoped>
+@import "./sharedStyles.css";
+
+.BuilderTemplateInput {
+	position: relative;
+	width: 100%;
+	padding: 0;
+}
+
+.fieldStateAutocomplete {
+	position: absolute;
+	background-color: var(--builderBackgroundColor);
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 4px;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	max-height: 200px;
+	overflow-y: auto;
+	width: 100%;
+	z-index: 2;
+}
+
+.fieldStateAutocompleteOption {
+	padding: 8px 12px;
+	cursor: pointer;
+	display: flex;
+	flex-direction: row;
+}
+
+.fieldStateAutocompleteOption span.prop {
+	flex: 1 1;
+	line-height: 24px;
+	vertical-align: middle;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.fieldStateAutocompleteOption span.type {
+	flex: 0;
+	width: fit-content;
+	padding: 4px 8px;
+	border-radius: 4px;
+	background-color: var(--builderSubtleHighlightColor);
+}
+
+.fieldStateAutocompleteOption:hover {
+	background-color: var(--builderSubtleHighlightColorSolid);
+}
+</style>
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index ebb39642c..d402efad8 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -111,7 +111,6 @@ export function useEvaluator(wf: Core) {
 		instancePath: InstancePath,
 	): string {
 		if (template === undefined || template === null) return "";
-
 		const evaluatedTemplate = template.replace(
 			templateRegex,
 			(match, captured) => {
diff --git a/tests/e2e/presets/state/main.py b/tests/e2e/presets/state/main.py
index 5ac7c9ac7..957d50042 100644
--- a/tests/e2e/presets/state/main.py
+++ b/tests/e2e/presets/state/main.py
@@ -1,6 +1,12 @@
 import writer as wf
 
 initial_state = wf.init_state({
+    "types": {
+        "none": None,
+        "string": "Hello, World!",
+        "integer": 42,
+        "float": 3.14,
+    },
     "counter": 26,
     "list": ["A", "B", "C"],
     "dict": {"a": 1, "b": 2},
diff --git a/tests/e2e/tests/button.spec.ts b/tests/e2e/tests/button.spec.ts
index db0e06448..5adb10859 100644
--- a/tests/e2e/tests/button.spec.ts
+++ b/tests/e2e/tests/button.spec.ts
@@ -26,7 +26,7 @@ test.describe("button", () => {
 			.dragTo(page.locator(".CoreSection .ChildlessPlaceholder"));
 		await page.locator(COMPONENT_LOCATOR).click();
 		await page
-			.locator('.BuilderFieldsText[data-key="text"] input')
+			.locator('.BuilderFieldsText[data-automation-key="text"] input')
 			.fill("Hello, World!");
 		await expect(page.locator(COMPONENT_LOCATOR)).toContainText(
 			"Hello, World!",
diff --git a/tests/e2e/tests/image.spec.ts b/tests/e2e/tests/image.spec.ts
index dbb8aa1c4..71b255020 100644
--- a/tests/e2e/tests/image.spec.ts
+++ b/tests/e2e/tests/image.spec.ts
@@ -25,7 +25,7 @@ test.describe("image", () => {
 			.dragTo(page.locator(".CoreSection .ChildlessPlaceholder"));
 		await page.locator(COMPONENT_LOCATOR).click();
 		await page
-			.locator('.BuilderFieldsText[data-key="caption"] input')
+			.locator('.BuilderFieldsText[data-automation-key="caption"] input')
 			.fill("Hello, World!");
 		await expect(page.locator(COMPONENT_LOCATOR)).toContainText(
 			"Hello, World!",
diff --git a/tests/e2e/tests/lowCode.spec.ts b/tests/e2e/tests/lowCode.spec.ts
index 64451d88b..fc644aa3c 100644
--- a/tests/e2e/tests/lowCode.spec.ts
+++ b/tests/e2e/tests/lowCode.spec.ts
@@ -79,8 +79,8 @@ with ui.find('results'):
 
 			await page.locator(`.results .wf-type-${type}.component`).click({force: true});
 			for (const [key, value] of Object.entries(props)) {
-				await expect(page.locator(`.BuilderSettings div[data-key="${key}"] input, .BuilderSettings div[data-key="${key}"] textarea`)).toHaveCount(1);
-				await expect(page.locator(`.BuilderSettings div[data-key="${key}"] input, .BuilderSettings div[data-key="${key}"] textarea`)).toHaveValue(value);
+				await expect(page.locator(`.BuilderSettings div[data-automation-key="${key}"] input, .BuilderSettings div[data-automation-key="${key}"] textarea`)).toHaveCount(1);
+				await expect(page.locator(`.BuilderSettings div[data-automation-key="${key}"] input, .BuilderSettings div[data-automation-key="${key}"] textarea`)).toHaveValue(value);
 			}
 
 			if (renderError) {
diff --git a/tests/e2e/tests/reuse.spec.ts b/tests/e2e/tests/reuse.spec.ts
index 7a32a84e0..361d2a6c8 100644
--- a/tests/e2e/tests/reuse.spec.ts
+++ b/tests/e2e/tests/reuse.spec.ts
@@ -6,7 +6,7 @@ test.describe("Reuse component", () => {
 
 	const fillSettingsField = async (page: Page, key: string, value: string) => {
 		await page
-			.locator(`.BuilderFieldsText[data-key="${key}"] input, .BuilderFieldsText[data-key="${key}"] textarea`)
+			.locator(`.BuilderFieldsText[data-automation-key="${key}"] input, .BuilderFieldsText[data-automation-key="${key}"] textarea`)
 			.fill(value);
 	}
 
diff --git a/tests/e2e/tests/state.spec.ts b/tests/e2e/tests/state.spec.ts
index b00a2359a..cdedfa6f1 100644
--- a/tests/e2e/tests/state.spec.ts
+++ b/tests/e2e/tests/state.spec.ts
@@ -4,7 +4,7 @@ import { test, expect } from "@playwright/test";
 const setTextField = async (page, text) => {
 	await page.locator('div.CoreText.component').click();
 	await page
-		.locator('.BuilderFieldsText[data-key="text"] textarea')
+		.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput')
 		.fill(text);
 }
 
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
new file mode 100644
index 000000000..8ab514c41
--- /dev/null
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -0,0 +1,144 @@
+
+import { test, expect } from "@playwright/test";
+
+const setTextField = async (page, text) => {
+	await page.locator('div.CoreText.component').click();
+	await page
+		.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput')
+		.fill(text);
+}
+
+test.describe("state autocompletion", () => {
+	let url: string;
+	test.beforeAll(async ({request}) => {
+		const response = await request.post(`/preset/state`);
+		expect(response.ok()).toBeTruthy();
+		({url} = await response.json());
+	});
+
+	test.afterAll(async ({request}) => {
+		await request.delete(url);
+	});
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto(url);
+	});
+
+	test.describe("text", () => {
+		test("completion", async ({ page }) => {
+			await setTextField(page, "@{types.");
+			page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop:text-matches("string")').click();
+			await expect(page
+				.locator('.BuilderFieldsText[data-automation-key="text"] .templateInput'))
+				.toHaveValue("@{types.string");
+		});
+		test("counter", async ({ page }) => {
+			await setTextField(page, "@{counter");
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop')).toContainText(["counter"]);
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.type')).toContainText(["number"]);
+		});
+
+		test("types", async ({ page }) => {
+			await setTextField(page, "@{types.");
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop')).toHaveText(["none", "string", "integer", "float"]);
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.type')).toHaveText(["null", "string", "number", "number"]);
+		});
+
+		test("deeply nested", async ({ page }) => {
+			await setTextField(page, "@{nested.c.");
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.prop')).toContainText(["d", "e"]);
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="text"] .fieldStateAutocomplete span.type')).toContainText(["number", "number"]);
+		});
+	});
+
+	test.describe("text with dropdown", () => {
+		test("options should show on focus", async ({ page }) => {
+			await page.locator('div.CoreText.component').click();
+			await page
+				.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] .templateInput')
+				.focus();
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] datalist option[value="yes"]')).toHaveCount(1);
+			await expect(page.locator('.BuilderFieldsText[data-automation-key="useMarkdown"] datalist option[value="no"]')).toHaveCount(1);
+		})
+	});
+
+	test.describe("Key-Value", () => {
+		test("Static List - completion", async ({ page }) => {
+			const FIELD = `.BuilderFieldsOptions[data-automation-key="options"]`;
+			await page
+				.locator(`div.component.button[data-component-type="radioinput"]`)
+				.dragTo(page.locator(".CorePage"));
+
+			await page.locator('div.CoreRadioInput.component > label').click();
+			await page
+				.locator(`${FIELD} button.chip:text-matches("Static List")`)
+				.click();
+			await page
+				.locator(`${FIELD} .inputKey .templateInput`)
+				.fill("@{types.");
+			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
+			await expect(page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
+			page.locator(`${FIELD} .inputKey .fieldStateAutocomplete span.prop:text-matches("string")`).click();
+			await expect(page
+				.locator(`${FIELD} .inputKey .templateInput`))
+				.toHaveValue("@{types.string");
+			await page
+				.locator(`${FIELD} .inputValue .templateInput`)
+				.fill("@{types.");
+			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
+			await expect(page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
+			page.locator(`${FIELD} .inputValue .fieldStateAutocomplete span.prop:text-matches("string")`).click();
+			await expect(page
+				.locator(`${FIELD} .inputValue .templateInput`))
+				.toHaveValue("@{types.string");
+			await page.locator('[data-automation-action="delete"]').click();
+		});
+
+		test("JSON - completion", async ({ page }) => {
+			const FIELD = `.BuilderFieldsOptions[data-automation-key="options"]`;
+			await page
+				.locator(`div.component.button[data-component-type="radioinput"]`)
+				.dragTo(page.locator(".CorePage"));
+
+			await page.locator('div.CoreRadioInput.component > label').click();
+			await page
+				.locator(`${FIELD} button.chip:text-matches("JSON")`)
+				.click();
+			await page
+				.locator(`${FIELD} .templateInput`)
+				.fill("@{types.");
+			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
+			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
+			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
+			await expect(page
+				.locator(`${FIELD} .templateInput`))
+				.toHaveValue("@{types.string");
+			await page.locator('[data-automation-action="delete"]').click();
+		});
+	});
+
+	function testFieldType(type, key, componentSelector) {
+		test(`${type} field - state completion`, async ({ page }) => {
+			const FIELD = `.${type}[data-automation-key="${key}"]`; 
+			await page.locator(componentSelector).click();
+			await page
+				.locator(`${FIELD} button.chip:text-matches("CSS")`)
+				.click();
+			await page
+				.locator(`${FIELD} .templateInput`)
+				.fill("@{types.");
+			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.prop`)).toHaveText(["none", "string", "integer", "float"]);
+			await expect(page.locator(`${FIELD} .fieldStateAutocomplete span.type`)).toHaveText(["null", "string", "number", "number"]);
+			page.locator(`${FIELD} .fieldStateAutocomplete span.prop:text-matches("string")`).click();
+			await expect(page
+				.locator(`${FIELD} .templateInput`))
+				.toHaveValue("@{types.string");
+		});
+	}
+
+	testFieldType("BuilderFieldsColor", "primaryTextColor", 'div.CoreText.component');
+	testFieldType("BuilderFieldsShadow", "buttonShadow", '.BuilderTreeBranch [data-branch-component-type="root"]');
+	testFieldType("BuilderFieldsAlign", "contentHAlign", '.BuilderTreeBranch [data-branch-component-type="root"]');
+	testFieldType("BuilderFieldsPadding", "contentPadding", '.BuilderTreeBranch [data-branch-component-type="root"]');
+	testFieldType("BuilderFieldsWidth", "contentWidth", '.BuilderTreeBranch [data-branch-component-type="root"]');
+});
diff --git a/tests/e2e/tests/undoRedo.spec.ts b/tests/e2e/tests/undoRedo.spec.ts
index 4ef88e6c4..072604344 100644
--- a/tests/e2e/tests/undoRedo.spec.ts
+++ b/tests/e2e/tests/undoRedo.spec.ts
@@ -48,7 +48,7 @@ test.describe('undo and redo', () => {
 
 		await page.locator(COMPONENT_LOCATOR).click();
 		await page
-			.locator('.BuilderFieldsText[data-key="text"] input')
+			.locator('.BuilderFieldsText[data-automation-key="text"] input')
 			.fill('cool text');
 		await page.locator("button.undo").click();
 		await expect(page.locator(COMPONENT_LOCATOR)).toHaveText('Button Text')