diff --git a/site/content/examples/7guis-crud/App.svelte b/site/content/examples/7guis-crud/App.svelte
index bf68cb2b8d..388a2f4ea3 100644
--- a/site/content/examples/7guis-crud/App.svelte
+++ b/site/content/examples/7guis-crud/App.svelte
@@ -3,13 +3,22 @@
 <script>
 	export let people = [];
 
-	let filteredPeople;
-	let selected;
 	let prefix = '';
 	let first = '';
 	let last = '';
 	let i = 0;
 
+	$: filteredPeople = prefix
+		? people.filter(person => {
+			const name = `${person.last}, ${person.first}`;
+			return name.toLowerCase().startsWith(prefix.toLowerCase());
+		})
+		: people;
+
+	$: selected = filteredPeople[i];
+
+	$: reset_inputs(selected);
+
 	function create() {
 		people = people.concat({ first, last });
 		i = people.length - 1;
@@ -27,18 +36,8 @@
 		i = Math.min(i, people.length - 1);
 	}
 
-	$: filteredPeople = prefix
-		? people.filter(person => {
-			const name = `${person.last}, ${person.first}`;
-			return name.toLowerCase().startsWith(prefix.toLowerCase());
-		})
-		: people;
-
-	$: selected = filteredPeople[i];
-
-	$: if (selected) {
-		first = selected.first;
-		last = selected.last;
+	function reset_inputs(person) {
+		({ first, last } = person);
 	}
 </script>
 
diff --git a/site/content/examples/7guis-flight-booker/App.svelte b/site/content/examples/7guis-flight-booker/App.svelte
index 3b55df583a..c4a4cde0cb 100644
--- a/site/content/examples/7guis-flight-booker/App.svelte
+++ b/site/content/examples/7guis-flight-booker/App.svelte
@@ -1,26 +1,24 @@
 <script>
 	const tomorrow = new Date(Date.now() + 86400000);
 
-	const tomorrowAsString = [
+	let start = [
 		tomorrow.getFullYear(),
 		pad(tomorrow.getMonth() + 1, 2),
 		pad(tomorrow.getDate(), 2)
 	].join('-');
 
-	let start = tomorrowAsString;
-	let end = tomorrowAsString;
+	let end = start;
 	let isReturn = false;
 
-	const startDate = () => convertToDate(start);
-	const endDate = () => convertToDate(end);
-
+	$: startDate = convertToDate(start);
+	$: endDate = convertToDate(end);
 
 	function bookFlight() {
 		const type = isReturn ? 'return' : 'one-way';
 
-		let message = `You have booked a ${type} flight, leaving ${startDate().toDateString()}`;
+		let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
 		if (type === 'return') {
-			message += ` and returning ${endDate().toDateString()}`;
+			message += ` and returning ${endDate.toDateString()}`;
 		}
 
 		alert(message);
@@ -57,5 +55,5 @@
 
 <button
 	on:click={bookFlight}
-	disabled="{isReturn && (startDate() >= endDate())}"
+	disabled="{isReturn && (startDate >= endDate)}"
 >book</button>