diff --git a/spec.md b/spec.md
index 5f40029..e6d5a23 100644
--- a/spec.md
+++ b/spec.md
@@ -82,6 +82,8 @@ subject.cid   -- "bafyreicuxyp5rmsrqsf3v63ww6gc3j7q6cp7qyk6bv47c3bqkj2gzswiqq"
 
 Object field names can be arbitrary strings, so RecordPath needs to disambiguate its own syntax when fields contain syntax characters.
 
+The backslash is the conventional escape character in many languages and systems, but as per the URL-unreserved character constraint in section 1, it cannot be used here. The exclamation mark ! serves as its replacement.
+
 RecordPath has six syntax characters, which must be escaped by a preceeding `!` if they appear in a field name in the path.
 
 | Literal | Escaped | Syntax hint       |
-- 
2.51.2


From 367dacb9ee85e7545b02fa9140471df23f2a9d00 Mon Sep 17 00:00:00 2001
From: phil <uniphil@gmail.com>
Date: Thu, 16 Apr 2026 20:02:19 -0400
Subject: [PATCH 2/3] link to playground

---
 readme.md                | 2 ++
 ref-impl-rust/Cargo.lock | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/readme.md b/readme.md
index 2b31448..bf16c28 100644
--- a/readme.md
+++ b/readme.md
@@ -4,6 +4,8 @@ a textual notation to locate fields within atproto records
 
 see [spec.md](./spec.md)
 
+try it out in [the playground](https://microcosm.tngl.io/RecordPath/)
+
 
 ---
 
diff --git a/ref-impl-rust/Cargo.lock b/ref-impl-rust/Cargo.lock
index 0abd081..decffcd 100644
--- a/ref-impl-rust/Cargo.lock
+++ b/ref-impl-rust/Cargo.lock
@@ -34,7 +34,7 @@ dependencies = [
 
 [[package]]
 name = "recordpath"
-version = "0.0.1"
+version = "0.0.2"
 dependencies = [
  "serde",
  "serde_json",
-- 
2.51.2


From 136ef8cc4e647d879824e38ec56d48a07606fa81 Mon Sep 17 00:00:00 2001
From: phil <uniphil@gmail.com>
Date: Fri, 17 Apr 2026 12:12:56 -0400
Subject: [PATCH 3/3] display mode for preview values

---
 playground/src/lib/JsonDisplay.svelte | 193 ++++++++++++++++++++++++++
 playground/src/routes/+page.svelte    |  51 +++++--
 2 files changed, 235 insertions(+), 9 deletions(-)
 create mode 100644 playground/src/lib/JsonDisplay.svelte

diff --git a/playground/src/lib/JsonDisplay.svelte b/playground/src/lib/JsonDisplay.svelte
new file mode 100644
index 0000000..f2b4bea
--- /dev/null
+++ b/playground/src/lib/JsonDisplay.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { parse, escapeFieldName, type Segment } from 'recordpath';
+
+	interface Props {
+		record: Record<string, unknown>;
+		activePath: string;
+		onSelectPath: (path: string) => void;
+	}
+
+	let { record, activePath, onSelectPath }: Props = $props();
+
+	let activeSegs: Segment[] = $derived.by(() => {
+		if (!activePath.trim()) return [];
+		try {
+			return parse(activePath.trim());
+		} catch {
+			return [];
+		}
+	});
+
+	function kp(prefix: string, key: string): string {
+		const esc = escapeFieldName(key);
+		return prefix ? `${prefix}.${esc}` : esc;
+	}
+
+	function isObj(v: unknown): v is Record<string, unknown> {
+		return typeof v === 'object' && v !== null && !Array.isArray(v);
+	}
+
+	function isLeaf(v: unknown): boolean {
+		return v === null || v === undefined || typeof v !== 'object';
+	}
+
+	function formatLeaf(v: unknown): string {
+		if (v === null) return 'null';
+		if (typeof v === 'string') return JSON.stringify(v);
+		return String(v);
+	}
+
+	// Resolve which segments the child should receive after matching a key.
+	function childSegs(
+		onPath: boolean,
+		seg: Segment | null,
+		rest: Segment[],
+		child: unknown
+	): Segment[] {
+		if (!onPath || !seg) return [];
+		// If segment has a scalar union qualifier, verify $type matches
+		const unionNsid = seg.qualifiers.find((q) => q.type === 'scalarUnion')?.nsid;
+		if (unionNsid && isObj(child) && child.$type !== unionNsid) return [];
+		return rest;
+	}
+
+	// For array elements: is this element on the active path?
+	function elemOnPath(seg: Segment | null, elem: unknown): boolean {
+		if (!seg) return false;
+		for (const q of seg.qualifiers) {
+			if (q.type === 'array') return true;
+			if (q.type === 'arrayUnion') {
+				return isObj(elem) && elem.$type === q.nsid;
+			}
+		}
+		return false;
+	}
+
+	// Key classes based on child type and path state
+	function keyClass(key: string, child: unknown, onPath: boolean): string {
+		const base = 'cursor-pointer hover:underline decoration-1 underline-offset-2';
+		if (key === '$type')
+			return `${base} ${onPath ? 'text-amber-600 font-semibold' : 'text-amber-500/70'}`;
+		if (Array.isArray(child))
+			return `${base} ${onPath ? 'text-emerald-700 font-semibold' : 'text-emerald-600/70'}`;
+		if (isObj(child))
+			return `${base} ${onPath ? 'text-violet-700 font-semibold' : 'text-violet-600/60'}`;
+		return `${base} ${onPath ? 'text-sky-700 font-semibold' : 'text-sky-600/70'}`;
+	}
+
+	function leafClass(matched: boolean): string {
+		return matched
+			? 'text-amber-800 bg-amber-100 rounded-sm cursor-pointer'
+			: 'text-stone-400 cursor-pointer hover:text-stone-600';
+	}
+
+	// Click target: the RecordPath to select when a key is clicked
+	function clickTarget(path: string, child: unknown): string {
+		if (isObj(child) && child.$type) return `${path}{${child.$type}}`;
+		return path;
+	}
+</script>
+
+<div class="flex-1 overflow-auto bg-white py-2 font-mono text-[0.8125rem] leading-relaxed">
+	{@render objectBlock(record, '', activeSegs, 0)}
+</div>
+
+<!-- Object: { ... } -->
+{#snippet objectBlock(obj: Record<string, unknown>, prefix: string, segs: Segment[], depth: number)}
+	<div style="padding-left: {depth * 2}ch" class="px-3">
+		<span class="text-stone-300">{'{'}</span>
+	</div>
+	{@render objectEntries(obj, prefix, segs, depth + 1)}
+	<div style="padding-left: {depth * 2}ch" class="px-3">
+		<span class="text-stone-300">{'}'}</span>
+	</div>
+{/snippet}
+
+<!-- Object entries -->
+{#snippet objectEntries(obj: Record<string, unknown>, prefix: string, segs: Segment[], depth: number)}
+	{@const entries = Object.entries(obj)}
+	{#each entries as [key, child], idx}
+		{@const path = kp(prefix, key)}
+		{@const onPath = segs.length > 0 && segs[0].key === key}
+		{@const seg = onPath ? segs[0] : null}
+		{@const rest = onPath ? segs.slice(1) : []}
+		{@const comma = idx < entries.length - 1 ? ',' : ''}
+		{@const matched = onPath && rest.length === 0 && seg !== null && seg.qualifiers.length === 0}
+
+		{#if isLeaf(child)}
+			<!-- key: leafValue -->
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<button class={keyClass(key, child, onPath)} onclick={() => onSelectPath(path)}
+					>{JSON.stringify(key)}</button
+				><span class="text-stone-300">: </span>
+				<button class={leafClass(matched)} onclick={() => onSelectPath(path)}
+					>{formatLeaf(child)}</button
+				><span class="text-stone-300">{comma}</span>
+			</div>
+		{:else if Array.isArray(child)}
+			<!-- key: [ ...elements ] -->
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<button class={keyClass(key, child, onPath)} onclick={() => onSelectPath(path)}
+					>{JSON.stringify(key)}</button
+				><span class="text-stone-300">: [</span>
+			</div>
+			{@render arrayEntries(child, path, seg, rest, depth + 1)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class="text-stone-300">]{comma}</span>
+			</div>
+		{:else}
+			<!-- key: { ...object } (maybe union) -->
+			{@const isUnion = isObj(child) && !!child.$type}
+			{@const qualPrefix = isUnion ? `${path}{${(child as Record<string, unknown>).$type}}` : path}
+			{@const cSegs = childSegs(onPath, seg, rest, child)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<button
+					class={keyClass(key, child, onPath)}
+					onclick={() => onSelectPath(clickTarget(path, child))}
+					>{JSON.stringify(key)}</button
+				><span class="text-stone-300">: {'{'}</span>
+			</div>
+			{@render objectEntries(child as Record<string, unknown>, qualPrefix, cSegs, depth + 1)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class="text-stone-300">{'}'}{comma}</span>
+			</div>
+		{/if}
+	{/each}
+{/snippet}
+
+<!-- Array entries -->
+{#snippet arrayEntries(arr: unknown[], prefix: string, seg: Segment | null, restSegs: Segment[], depth: number)}
+	{#each arr as elem, idx}
+		{@const comma = idx < arr.length - 1 ? ',' : ''}
+		{@const onPath = elemOnPath(seg, elem)}
+		{@const eSegs = onPath ? restSegs : []}
+		{@const ePrefix = isObj(elem) && elem.$type ? `${prefix}[${elem.$type}]` : `${prefix}[]`}
+		{@const matched = onPath && eSegs.length === 0}
+
+		{#if isLeaf(elem)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class={leafClass(matched)}>{formatLeaf(elem)}</span><span class="text-stone-300"
+					>{comma}</span
+				>
+			</div>
+		{:else if Array.isArray(elem)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class="text-stone-300">[</span>
+			</div>
+			{@render arrayEntries(elem, ePrefix, null, [], depth + 1)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class="text-stone-300">]{comma}</span>
+			</div>
+		{:else}
+			{@const isUnion = isObj(elem) && !!elem.$type}
+			{@const qualPrefix = isUnion ? `${prefix}[${(elem as Record<string, unknown>).$type}]` : `${prefix}[]`}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class="text-stone-300">{'{'}</span>
+			</div>
+			{@render objectEntries(elem as Record<string, unknown>, qualPrefix, eSegs, depth + 1)}
+			<div style="padding-left: {depth * 2}ch" class="px-3">
+				<span class="text-stone-300">{'}'}{comma}</span>
+			</div>
+		{/if}
+	{/each}
+{/snippet}
diff --git a/playground/src/routes/+page.svelte b/playground/src/routes/+page.svelte
index c9cf0de..869706d 100644
--- a/playground/src/routes/+page.svelte
+++ b/playground/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enumerate, match, parse, RecordPathParseError, type PathInfo } from 'recordpath';
+	import JsonDisplay from '$lib/JsonDisplay.svelte';
 
 	const SAMPLE = {
 		$type: 'app.bsky.feed.post',
@@ -48,6 +49,7 @@
 
 	let jsonText = $state(JSON.stringify(SAMPLE, null, 2));
 	let pathInput = $state('');
+	let editing = $state(false);
 
 	let parseResult = $derived.by(() => {
 		const text = jsonText.trim();
@@ -136,20 +138,51 @@
 
 	<!-- Main panels -->
 	<main class="grid flex-1 grid-cols-2 overflow-hidden">
-		<!-- Left: JSON editor -->
+		<!-- Left: JSON editor / display -->
 		<div class="flex flex-col flex-2 overflow-hidden border-r border-stone-200">
 			<div
-				class="border-b border-stone-200 bg-white px-3 py-1.5 text-[0.6875rem] font-semibold tracking-wide text-stone-400 uppercase"
+				class="flex items-center gap-2 border-b border-stone-200 bg-white px-3 py-1.5 text-[0.6875rem] font-semibold tracking-wide text-stone-400 uppercase"
 			>
 				Record JSON
+				<span class="flex-1"></span>
+				<button
+					class="cursor-pointer rounded px-1.5 py-0.5 text-[0.625rem] normal-case tracking-normal
+						{editing
+						? 'bg-sky-50 text-sky-600'
+						: 'text-stone-400 hover:text-stone-600'}"
+					onclick={() => (editing = true)}
+				>
+					Edit
+				</button>
+				<button
+					class="cursor-pointer rounded px-1.5 py-0.5 text-[0.625rem] normal-case tracking-normal
+						{!editing
+						? 'bg-sky-50 text-sky-600'
+						: 'text-stone-400 hover:text-stone-600'}"
+					onclick={() => (editing = false)}
+				>
+					Display
+				</button>
 			</div>
-			<textarea
-				bind:value={jsonText}
-				spellcheck="false"
-				placeholder="Paste a JSON record..."
-				class="flex-1 resize-none bg-white p-3 font-mono text-[0.8125rem] leading-relaxed outline-none"
-				style="tab-size: 2"
-			></textarea>
+			{#if editing}
+				<textarea
+					bind:value={jsonText}
+					spellcheck="false"
+					placeholder="Paste a JSON record..."
+					class="flex-1 resize-none bg-white p-3 font-mono text-[0.8125rem] leading-relaxed outline-none"
+					style="tab-size: 2"
+				></textarea>
+			{:else if record}
+				<JsonDisplay
+					{record}
+					activePath={pathInput}
+					onSelectPath={(p) => (pathInput = p)}
+				/>
+			{:else}
+				<div class="flex flex-1 items-center justify-center bg-white text-xs text-stone-400">
+					Paste a JSON record to get started
+				</div>
+			{/if}
 			{#if jsonError}
 				<div class="border-t border-red-200 bg-red-50 px-3 py-1.5 text-xs text-red-600">
 					{jsonError}