diff --git a/src/client/core.js b/src/client/core.js
index 0f203ac..3848557 100644
--- a/src/client/core.js
+++ b/src/client/core.js
@@ -7,12 +7,25 @@ import { serialize } from './utils.js';
 window['#SvelteDevTools'] = {
 	/**
 	 * @param {string} id
-	 * @param {string} key
+	 * @param {string[]} keys
 	 * @param {any} value
 	 */
-	inject(id, key, value) {
+	inject(id, keys, value) {
 		const { detail: component } = v4.map.get(id) || {};
-		component && component.$inject_state({ [key]: value });
+		if (component) {
+			const [prop, ...rest] = keys;
+			const original = component.$capture_state()[prop];
+			if (typeof original === 'object') {
+				let ref = original;
+				for (let i = 0; i < rest.length - 1; i += 1) {
+					ref = ref[rest[i]];
+				}
+				ref[rest[rest.length - 1]] = value;
+				component.$inject_state({ [prop]: original });
+			} else {
+				component.$inject_state({ [prop]: value });
+			}
+		}
 	},
 };
 
diff --git a/src/client/utils.js b/src/client/utils.js
index c3eb134..67a3428 100644
--- a/src/client/utils.js
+++ b/src/client/utils.js
@@ -68,7 +68,7 @@ export function serialize(node) {
 			const listeners = node.detail.__listeners || [];
 
 			res.detail = {
-				attributes: attributes.map(({ name: key, value }) => ({ key, value })),
+				attributes: attributes.map(({ name: key, value }) => ({ key, value, readonly: true })),
 				listeners: listeners.map((o) => ({ ...o, handler: o.handler.toString() })),
 			};
 			break;
@@ -86,7 +86,7 @@ export function serialize(node) {
 			const { ctx, source } = node.detail;
 			const cloned = Object.entries(clone(ctx));
 			res.detail = {
-				ctx: cloned.map(([key, value]) => ({ key, value })),
+				ctx: cloned.map(([key, value]) => ({ key, value, readonly: true })),
 				source: source.slice(source.indexOf('{'), source.indexOf('}') + 1),
 			};
 			break;
diff --git a/src/lib/panel/Editable.svelte b/src/lib/panel/Editable.svelte
index be8865a..8a4c8c8 100644
--- a/src/lib/panel/Editable.svelte
+++ b/src/lib/panel/Editable.svelte
@@ -1,38 +1,66 @@
 <script lang="ts">
 	interface Props {
 		type: 'string' | 'number' | 'null';
-		value: any;
+		value: string;
 		readonly: boolean;
-		onchange(updated: unknown): void;
+		onchange(updated: string): void;
 	}
 
 	let { type, value, readonly, onchange }: Props = $props();
 
 	let editing = $state(false);
+
+	function update(v: string) {
+		editing = false;
+		switch (true) {
+			case v === '':
+			case v === 'undefined': {
+				type = 'null';
+				v = 'undefined';
+				break;
+			}
+			case v === 'null': {
+				type = v = 'null';
+				break;
+			}
+			case v === 'true' || v === 'false': {
+				type = 'number';
+				v = `${v === 'true'}`;
+				break;
+			}
+			case !Number.isNaN(Number(v)): {
+				type = 'number';
+				v = `${Number(v)}`;
+				break;
+			}
+			default: {
+				type = 'string';
+				break;
+			}
+		}
+		value = v;
+		onchange(type === 'string' ? `"${v.replace(/"/g, '\\"')}"` : v);
+	}
 </script>
 
 {#if editing}
 	<input
-		value={JSON.stringify(value)}
+		value={value === null ? 'null' : value === undefined ? 'undefined' : value}
 		onblur={({ target }) => {
-			editing = false;
 			// @ts-expect-error - target and value exists
-			const updated = target.value;
-			onchange((value = JSON.parse(updated)));
+			update(target.value);
 		}}
 		onkeydown={({ key, target }) => {
 			if (key !== 'Enter') return;
-			editing = false;
 			// @ts-expect-error - target and value exists
-			const updated = target.value;
-			onchange((value = JSON.parse(updated)));
+			update(target.value);
 		}}
 	/>
 {:else}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<span class:readonly class={type} onclick={() => (editing = !readonly)}>
-		{JSON.stringify(value)}
+		{type === 'string' ? `"${value}"` : `${value}`}
 	</span>
 {/if}
 
diff --git a/src/lib/panel/Expandable.svelte b/src/lib/panel/Expandable.svelte
deleted file mode 100644
index 8d27af1..0000000
--- a/src/lib/panel/Expandable.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-	import Editable from './Editable.svelte';
-	import Expandable from './Expandable.svelte';
-
-	interface Props {
-		key: string | number;
-		value: any;
-		readonly: boolean;
-		error?: string;
-		onchange(updated: unknown): void;
-	}
-
-	const { key, value, readonly, error, onchange }: Props = $props();
-
-	function stringify(value: unknown, k?: any, v?: any): string {
-		if (Array.isArray(value))
-			return `[${value.map((value, i) => (i == k ? v : stringify(value))).join(',')}]`;
-		if (value === null) return 'null';
-		if (value === undefined) return 'undefined';
-
-		switch (typeof value) {
-			case 'string':
-				return `"${value}"`;
-			case 'number':
-				return value.toString();
-			case 'object':
-				return `{${Object.entries(value)
-					.map(([key, value]) => `"${key}":${key == k ? v : stringify(value)}`)
-					.join(',')}}`;
-
-			default: // when is this ever the case?
-				return value?.toString() ?? 'undefined';
-		}
-	}
-
-	let expanded = $state(false);
-
-	const type = $derived(typeof value);
-	const expandable = $derived.by(() => {
-		return (
-			value != null &&
-			value === value &&
-			type === 'object' &&
-			((Array.isArray(value) && value.length) ||
-				value.__is === 'function' ||
-				value.__is === 'symbol' ||
-				Object.keys(value).length)
-		);
-	});
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<li
-	data-tooltip={error || null}
-	style:--indent="-3px"
-	style:--y-pad="0.125rem"
-	class:expanded
-	class:expandable
-	onclick={(event) => {
-		event.stopPropagation();
-		expanded = !expanded;
-	}}
->
-	<span>{key}:</span>
-	<span>&nbsp;</span>
-
-	{#if type === 'string'}
-		<Editable type="string" {value} {readonly} {onchange} />
-	{:else if value == null || value !== value}
-		<Editable type="null" {value} {readonly} {onchange} />
-	{:else if type === 'number' || type === 'boolean'}
-		<Editable type="number" {value} {readonly} {onchange} />
-	{:else if Array.isArray(value)}
-		<span class="object">Array [{value.length || ''}]</span>
-
-		{#if value.length && expanded}
-			<ul>
-				{#each value as v, key}
-					<Expandable
-						{key}
-						value={v}
-						{readonly}
-						onchange={(updated) => onchange(stringify(value, key, updated))}
-					/>
-				{/each}
-			</ul>
-		{/if}
-	{:else if type === 'object'}
-		{#if value.__is === 'function'}
-			<span class="function">function {value.name || ''}()</span>
-			{#if expanded}<pre style:width="100%">{value.source}</pre>{/if}
-		{:else if value.__is === 'symbol'}
-			<span class="symbol">{value.name || 'Symbol()'}</span>
-		{:else if Object.keys(value).length}
-			<span class="object">Object &lbrace;&hellip;&rbrace;</span>
-			{#if expanded}
-				<ul>
-					{#each Object.entries(value) as [key, v] (key)}
-						<Expandable
-							{key}
-							value={v}
-							{readonly}
-							onchange={(updated) => onchange(stringify(value, key, updated))}
-						/>
-					{/each}
-				</ul>
-			{/if}
-		{:else}
-			<span class="object">Object &lbrace; &rbrace;</span>
-		{/if}
-	{/if}
-</li>
-
-<style>
-	ul {
-		width: 100%;
-		display: grid;
-		gap: 0.25rem;
-		padding-left: 1rem;
-		margin-top: 0.25rem;
-	}
-	li {
-		position: relative;
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		padding: 0.25rem;
-		border-radius: 0.25rem;
-	}
-	li[data-tooltip] {
-		background: rgba(179, 0, 0, 0.8);
-	}
-	li:hover {
-		background: rgba(135, 135, 137, 0.075);
-	}
-
-	.function,
-	.symbol,
-	.object {
-		color: rgb(0, 116, 232);
-	}
-
-	:global(.dark) .function,
-	:global(.dark) .symbol,
-	:global(.dark) .object {
-		color: rgb(117, 191, 255);
-	}
-</style>
diff --git a/src/lib/panel/PropertyList.svelte b/src/lib/panel/PropertyList.svelte
index 98ec3c3..e05f678 100644
--- a/src/lib/panel/PropertyList.svelte
+++ b/src/lib/panel/PropertyList.svelte
@@ -1,37 +1,102 @@
 <script lang="ts">
-	import Expandable from './Expandable.svelte';
+	import Editable from './Editable.svelte';
+	import PropertyList from './PropertyList.svelte';
+
+	import { app } from '$lib/state.svelte';
+	import { inject, errors } from './core.svelte';
 
 	interface Props {
-		id: string;
-		entries?: Array<{ key: string; value: any }>;
-		readonly?: boolean;
+		entries?: Array<{
+			key: string;
+			value: any;
+			readonly?: boolean;
+		}>;
+		keys?: string[];
 	}
 
-	let { id, entries = [], readonly = false }: Props = $props();
-
-	const errors: Record<string, string | undefined> = {};
-	function change(key: string, value: any) {
-		chrome.devtools.inspectedWindow.eval(
-			`window['#SvelteDevTools'].inject("${id}", "${key}", ${value})`,
-			(_, error) => {
-				errors[key] = error?.isException
-					? error.value.slice(0, error.value.indexOf('\n'))
-					: undefined;
-			},
-		);
-	}
+	const { entries = [], keys = [] }: Props = $props();
+
+	let expanded = $state(false);
 </script>
 
 {#if entries.length}
 	<ul>
-		{#each entries as { key, value } (key)}
-			<Expandable
-				{readonly}
-				{key}
-				{value}
-				error={errors[key]}
-				onchange={(updated) => change(key, updated)}
-			/>
+		{#each entries as { key, value, readonly = false } (key)}
+			{@const id = `${app.selected?.id}+${keys.join('.')}.${key}`}
+			{@const type = typeof value}
+
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<li
+				data-tooltip={errors[id] || null}
+				style:--indent="-3px"
+				style:--y-pad="0.125rem"
+				class:expanded
+				class:expandable={value != null &&
+					value === value &&
+					type === 'object' &&
+					((Array.isArray(value) && value.length) ||
+						value.__is === 'function' ||
+						value.__is === 'symbol' ||
+						Object.keys(value).length)}
+				onclick={(event) => {
+					event.stopPropagation();
+					expanded = !expanded;
+				}}
+			>
+				<span>{key}:</span>
+				<span>&nbsp;</span>
+
+				{#if type === 'string'}
+					<Editable
+						{readonly}
+						type="string"
+						{value}
+						onchange={(updated) => inject([...keys, key], updated)}
+					/>
+				{:else if value == null || value !== value}
+					<Editable
+						{readonly}
+						type="null"
+						value={value === null ? 'null' : 'undefined'}
+						onchange={(updated) => inject([...keys, key], updated)}
+					/>
+				{:else if type === 'number' || type === 'boolean'}
+					<Editable
+						{readonly}
+						type="number"
+						{value}
+						onchange={(updated) => inject([...keys, key], updated)}
+					/>
+				{:else if Array.isArray(value)}
+					<span class="object">Array [{value.length || ''}]</span>
+
+					{#if value.length && expanded}
+						{@const entries = value.map((v, i) => ({ key: `${i}`, value: v, readonly }))}
+
+						<PropertyList {entries} keys={[key]} />
+					{/if}
+				{:else if type === 'object'}
+					{#if value.__is === 'function'}
+						<span class="function">function {value.name || ''}()</span>
+						{#if expanded}<pre style:width="100%">{value.source}</pre>{/if}
+					{:else if value.__is === 'symbol'}
+						<span class="symbol">{value.name || 'Symbol()'}</span>
+					{:else if Object.keys(value).length}
+						<span class="object">Object &lbrace;&hellip;&rbrace;</span>
+
+						{#if expanded}
+							{@const entries = Object.entries(value).map(([key, v]) => {
+								return { key, value: v, readonly };
+							})}
+
+							<PropertyList {entries} keys={[key]} />
+						{/if}
+					{:else}
+						<span class="object">Object &lbrace; &rbrace;</span>
+					{/if}
+				{/if}
+			</li>
 		{/each}
 	</ul>
 {:else}
@@ -40,9 +105,38 @@
 
 <style>
 	ul {
+		width: 100%;
 		display: grid;
 		gap: 0.25rem;
 		padding-left: 1rem;
+		margin-top: 0.25rem;
 		font-size: 0.75rem;
 	}
+
+	li {
+		position: relative;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		padding: 0.25rem;
+		border-radius: 0.25rem;
+	}
+	li[data-tooltip] {
+		background: rgba(179, 0, 0, 0.8);
+	}
+	li:hover {
+		background: rgba(135, 135, 137, 0.075);
+	}
+
+	.function,
+	.symbol,
+	.object {
+		color: rgb(0, 116, 232);
+	}
+
+	:global(.dark) .function,
+	:global(.dark) .symbol,
+	:global(.dark) .object {
+		color: rgb(117, 191, 255);
+	}
 </style>
diff --git a/src/lib/panel/core.svelte.ts b/src/lib/panel/core.svelte.ts
new file mode 100644
index 0000000..3865e1a
--- /dev/null
+++ b/src/lib/panel/core.svelte.ts
@@ -0,0 +1,17 @@
+import { app } from '$lib/state.svelte';
+
+export const errors = $state<{ [keys: string]: string | false }>({});
+
+export function inject(keys: string[], value: any) {
+	const uuid = app.selected?.id;
+	if (!uuid) return;
+
+	const accessors = `[${keys.map((k) => `'${k}'`).join(', ')}]`;
+	chrome.devtools.inspectedWindow.eval(
+		`window['#SvelteDevTools'].inject('${uuid}', ${accessors}, ${value})`,
+		(_, error) => {
+			const id = `${uuid}+${keys.join('.')}`;
+			errors[id] = error?.isException && error.value.slice(0, error.value.indexOf('\n'));
+		},
+	);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c095369..19ceea2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -146,28 +146,28 @@
 
 		{#if app.selected?.type === 'component'}
 			<h2>Props</h2>
-			<PropertyList id={app.selected.id} entries={app.selected?.detail.attributes} />
+			<PropertyList entries={app.selected?.detail.attributes} />
 
 			<Divider type="horizontal" />
 
 			<h2>Events</h2>
-			<PropertyList id={app.selected.id} entries={events} />
+			<PropertyList entries={events} />
 
 			<Divider type="horizontal" />
 
 			<h2>State</h2>
-			<PropertyList id={app.selected.id} entries={app.selected?.detail.ctx} />
+			<PropertyList entries={app.selected?.detail.ctx} />
 		{:else if app.selected?.type === 'block' || app.selected?.type === 'iteration'}
 			<h2>State</h2>
-			<PropertyList readonly id={app.selected.id} entries={app.selected.detail.ctx} />
+			<PropertyList entries={app.selected.detail.ctx} />
 		{:else if app.selected?.type === 'element'}
 			<h2>Attributes</h2>
-			<PropertyList readonly id={app.selected.id} entries={app.selected.detail.attributes} />
+			<PropertyList entries={app.selected.detail.attributes} />
 
 			<Divider type="horizontal" />
 
 			<h2>Events</h2>
-			<PropertyList id={app.selected.id} entries={events} />
+			<PropertyList entries={events} />
 		{/if}
 	</Resizable>
 {:else}