diff --git a/frontend/src/routes/template-configs/+page.svelte b/frontend/src/routes/template-configs/+page.svelte
index afb2bd4..87ddcbb 100644
--- a/frontend/src/routes/template-configs/+page.svelte
+++ b/frontend/src/routes/template-configs/+page.svelte
@@ -118,8 +118,13 @@
 		finally { loaded = true; }
 	}
 
-	function openNew() { form = defaultForm(); editing = null; showForm = true; }
-	function edit(c: any) { form = { ...defaultForm(), ...c }; editing = c.id; showForm = true; }
+	function openNew() { form = defaultForm(); editing = null; showForm = true; slotPreview = {}; slotErrors = {}; }
+	function edit(c: any) {
+		form = { ...defaultForm(), ...c }; editing = c.id; showForm = true;
+		slotPreview = {}; slotErrors = {};
+		// Trigger initial preview for all populated slots
+		setTimeout(() => refreshAllPreviews(), 100);
+	}
 
 	async function save(e: SubmitEvent) {
 		e.preventDefault(); error = '';
@@ -130,17 +135,6 @@
 		} catch (err: any) { error = err.message; }
 	}
 
-	async function previewSlot(slotKey: string) {
-		// Toggle: if already showing, hide it
-		if (slotPreview[slotKey]) { delete slotPreview[slotKey]; slotPreview = { ...slotPreview }; return; }
-		const template = (form as any)[slotKey] || '';
-		if (!template) { slotPreview = { ...slotPreview, [slotKey]: '(empty)' }; return; }
-		try {
-			const res = await api('/template-configs/preview-raw', { method: 'POST', body: JSON.stringify({ template, target_type: previewTargetType }) });
-			slotPreview = { ...slotPreview, [slotKey]: res.error ? `Error: ${res.error}` : res.rendered };
-		} catch (err: any) { slotPreview = { ...slotPreview, [slotKey]: `Error: ${err.message}` }; }
-	}
-
 	async function preview(configId: number, slotKey: string) {
 		const config = configs.find(c => c.id === configId);
 		if (!config) return;
@@ -211,8 +205,6 @@
 							<div class="flex items-center justify-between mb-1">
 								<label class="text-xs text-[var(--color-muted-foreground)]">{t(`templateConfig.${slot.label}`)}</label>
 								<div class="flex items-center gap-2">
-									<button type="button" onclick={() => previewSlot(slot.key)}
-										class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.preview')}</button>
 									{#if varsRef[slot.key]}
 										<button type="button" onclick={() => showVarsFor = slot.key}
 											class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.variables')}</button>
@@ -231,9 +223,9 @@
 										<p class="mt-1 text-xs" style="color: var(--color-error-fg);">✕ {t('common.syntaxError')}: {slotErrors[slot.key]}{slotErrorLines[slot.key] ? ` (${t('common.line')} ${slotErrorLines[slot.key]})` : ''}</p>
 									{/if}
 								{/if}
-								{#if slotPreview[slot.key]}
+								{#if slotPreview[slot.key] && !slotErrors[slot.key]}
 									<div class="mt-1 p-2 bg-[var(--color-muted)] rounded text-sm">
-										<pre class="whitespace-pre-wrap">{slotPreview[slot.key]}</pre>
+										<pre class="whitespace-pre-wrap text-xs">{slotPreview[slot.key]}</pre>
 									</div>
 								{/if}
 							{/if}