diff --git a/site/content/examples/00-introduction/00-hello-world/App.svelte b/site/content/examples/00-introduction/00-hello-world/App.svelte
new file mode 100644
index 000000000000..22b3c84db099
--- /dev/null
+++ b/site/content/examples/00-introduction/00-hello-world/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/00-hello-world/meta.json b/site/content/examples/00-introduction/00-hello-world/meta.json
new file mode 100644
index 000000000000..2f47184710c7
--- /dev/null
+++ b/site/content/examples/00-introduction/00-hello-world/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Adding data"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
new file mode 100644
index 000000000000..6a76b43dde14
--- /dev/null
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	let src = 'tutorial/image.gif';
+	let name = 'Rick Astley';
+</script>
+
+<!-- {src} is short for src={src} -->
+<img {src} alt="{name} dancing">
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/meta.json b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json
new file mode 100644
index 000000000000..89614e0aa6a6
--- /dev/null
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Dynamic attributes"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte
new file mode 100644
index 000000000000..cacaf8ccba86
--- /dev/null
+++ b/site/content/examples/00-introduction/02-styling/App.svelte
@@ -0,0 +1,9 @@
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>Styled!</p>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/02-styling/meta.json b/site/content/examples/00-introduction/02-styling/meta.json
new file mode 100644
index 000000000000..dcdf2bff0198
--- /dev/null
+++ b/site/content/examples/00-introduction/02-styling/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Styling"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte
new file mode 100644
index 000000000000..e0a2e5fe176b
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+	}
+</style>
+
+<p>These styles...</p>
+<Nested/>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/Nested.svelte b/site/content/examples/00-introduction/03-nested-components/Nested.svelte
new file mode 100644
index 000000000000..17685233a5e9
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/Nested.svelte
@@ -0,0 +1 @@
+<p>...don't affect this element</p>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/meta.json b/site/content/examples/00-introduction/03-nested-components/meta.json
new file mode 100644
index 000000000000..5848360a403c
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Nested components"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/04-html-tags/App.svelte b/site/content/examples/00-introduction/04-html-tags/App.svelte
new file mode 100644
index 000000000000..4029f076e227
--- /dev/null
+++ b/site/content/examples/00-introduction/04-html-tags/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let string = `here's some <strong>HTML!!!</strong>`;
+</script>
+
+<p>{@html string}</p>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/04-html-tags/meta.json b/site/content/examples/00-introduction/04-html-tags/meta.json
new file mode 100644
index 000000000000..01af59ac8434
--- /dev/null
+++ b/site/content/examples/00-introduction/04-html-tags/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "HTML tags"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/meta.json b/site/content/examples/00-introduction/meta.json
new file mode 100644
index 000000000000..5c8f7bc10b6b
--- /dev/null
+++ b/site/content/examples/00-introduction/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Introduction"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
new file mode 100644
index 000000000000..bc50d74cfc75
--- /dev/null
+++ b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/meta.json b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json
new file mode 100644
index 000000000000..feb3e8f33801
--- /dev/null
+++ b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactive assignments"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
new file mode 100644
index 000000000000..f7aca3bd80b4
--- /dev/null
+++ b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let count = 1;
+
+	// the `$:` means 're-run whenever these values change'
+	$: doubled = count * 2;
+	$: quadrupled = doubled * 2;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Count: {count}
+</button>
+
+<p>{count} * 2 = {doubled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/meta.json b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json
new file mode 100644
index 000000000000..d824d8366965
--- /dev/null
+++ b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactive declarations"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/02-reactive-statements/App.svelte b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte
new file mode 100644
index 000000000000..f757be6f5107
--- /dev/null
+++ b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let count = 0;
+
+	$: if (count >= 10) {
+		alert(`count is dangerously high!`);
+		count = 9;
+	}
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/02-reactive-statements/meta.json b/site/content/examples/01-reactivity/02-reactive-statements/meta.json
new file mode 100644
index 000000000000..1ef62c88304a
--- /dev/null
+++ b/site/content/examples/01-reactivity/02-reactive-statements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactive statements"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/meta.json b/site/content/examples/01-reactivity/meta.json
new file mode 100644
index 000000000000..c908815e040a
--- /dev/null
+++ b/site/content/examples/01-reactivity/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactivity"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/App.svelte b/site/content/examples/02-props/00-declaring-props/App.svelte
new file mode 100644
index 000000000000..79d7e6b78956
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/Nested.svelte b/site/content/examples/02-props/00-declaring-props/Nested.svelte
new file mode 100644
index 000000000000..ecd3cb625410
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer;
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/meta.json b/site/content/examples/02-props/00-declaring-props/meta.json
new file mode 100644
index 000000000000..485c2708bd31
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Declaring props"
+}
\ No newline at end of file
diff --git a/site/content/examples/nested-components/App.svelte b/site/content/examples/02-props/01-default-values/App.svelte
similarity index 65%
rename from site/content/examples/nested-components/App.svelte
rename to site/content/examples/02-props/01-default-values/App.svelte
index 83cc0c6eb566..f9d63b30d654 100644
--- a/site/content/examples/nested-components/App.svelte
+++ b/site/content/examples/02-props/01-default-values/App.svelte
@@ -2,5 +2,5 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<p>This is a top-level element.</p>
+<Nested answer={42}/>
 <Nested/>
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/Nested.svelte b/site/content/examples/02-props/01-default-values/Nested.svelte
new file mode 100644
index 000000000000..35ee5c9f88c0
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer = 'a mystery';
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/meta.json b/site/content/examples/02-props/01-default-values/meta.json
new file mode 100644
index 000000000000..f690d64349b3
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Default values"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/App.svelte b/site/content/examples/02-props/02-spread-props/App.svelte
new file mode 100644
index 000000000000..f40d3b89c885
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.technology'
+	};
+</script>
+
+<Info {...pkg}/>
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/Info.svelte b/site/content/examples/02-props/02-spread-props/Info.svelte
new file mode 100644
index 000000000000..74123982441f
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/Info.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/meta.json b/site/content/examples/02-props/02-spread-props/meta.json
new file mode 100644
index 000000000000..3f4b5128bf89
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Spread props"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/meta.json b/site/content/examples/02-props/meta.json
new file mode 100644
index 000000000000..7b9e0a27831f
--- /dev/null
+++ b/site/content/examples/02-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Props"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/00-if-blocks/App.svelte b/site/content/examples/03-logic/00-if-blocks/App.svelte
new file mode 100644
index 000000000000..01b8867adeba
--- /dev/null
+++ b/site/content/examples/03-logic/00-if-blocks/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/00-if-blocks/meta.json b/site/content/examples/03-logic/00-if-blocks/meta.json
new file mode 100644
index 000000000000..21598b878efc
--- /dev/null
+++ b/site/content/examples/03-logic/00-if-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "If blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/01-else-blocks/App.svelte b/site/content/examples/03-logic/01-else-blocks/App.svelte
new file mode 100644
index 000000000000..c82565c2f7ce
--- /dev/null
+++ b/site/content/examples/03-logic/01-else-blocks/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/01-else-blocks/meta.json b/site/content/examples/03-logic/01-else-blocks/meta.json
new file mode 100644
index 000000000000..5703b7ea92ce
--- /dev/null
+++ b/site/content/examples/03-logic/01-else-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Else blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/02-else-if-blocks/App.svelte b/site/content/examples/03-logic/02-else-if-blocks/App.svelte
new file mode 100644
index 000000000000..9102618ff49f
--- /dev/null
+++ b/site/content/examples/03-logic/02-else-if-blocks/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let x = 7;
+</script>
+
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else if 5 > x}
+	<p>{x} is less than 5</p>
+{:else}
+	<p>{x} is between 5 and 10</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/02-else-if-blocks/meta.json b/site/content/examples/03-logic/02-else-if-blocks/meta.json
new file mode 100644
index 000000000000..c778d9f48b0c
--- /dev/null
+++ b/site/content/examples/03-logic/02-else-if-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Else-if blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte
new file mode 100644
index 000000000000..6ea5097be202
--- /dev/null
+++ b/site/content/examples/03-logic/03-each-blocks/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let cats = [
+		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+		{ id: 'z_AbfPXTKms', name: 'Maru' },
+		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+	];
+</script>
+
+<h1>The Famous Cats of YouTube</h1>
+
+<ul>
+	{#each cats as { id, name }, i}
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
+			{i + 1}: {name}
+		</a></li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/site/content/examples/03-logic/03-each-blocks/meta.json b/site/content/examples/03-logic/03-each-blocks/meta.json
new file mode 100644
index 000000000000..d829b3cc53a6
--- /dev/null
+++ b/site/content/examples/03-logic/03-each-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Each blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
new file mode 100644
index 000000000000..73a2dcc609f4
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, value: 'a' },
+		{ id: 2, value: 'b' },
+		{ id: 3, value: 'c' },
+		{ id: 4, value: 'd' },
+		{ id: 5, value: 'e' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing (thing.id)}
+	<Thing value={thing.value}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
new file mode 100644
index 000000000000..4e86d3210908
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
@@ -0,0 +1,9 @@
+<script>
+	// `value` is updated whenever the prop value changes...
+	export let value;
+
+	// ...but `valueAtStart` is fixed upon initialisation
+	const valueAtStart = value;
+</script>
+
+<p>{valueAtStart} / {value}</p>
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/meta.json b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json
new file mode 100644
index 000000000000..faee8bff8d20
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Keyed each blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte
new file mode 100644
index 000000000000..8c8036c0f1f4
--- /dev/null
+++ b/site/content/examples/03-logic/05-await-blocks/App.svelte
@@ -0,0 +1,30 @@
+<script>
+	let promise = getRandomNumber();
+
+	async function getRandomNumber() {
+		const res = await fetch(`tutorial/random-number`);
+		const text = await res.text();
+
+		if (res.ok) {
+			return text;
+		} else {
+			throw new Error(text);
+		}
+	}
+
+	function handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/05-await-blocks/meta.json b/site/content/examples/03-logic/05-await-blocks/meta.json
new file mode 100644
index 000000000000..c7a809f5edd1
--- /dev/null
+++ b/site/content/examples/03-logic/05-await-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Await blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/meta.json b/site/content/examples/03-logic/meta.json
new file mode 100644
index 000000000000..3ecf1ccee24c
--- /dev/null
+++ b/site/content/examples/03-logic/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Logic"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte
new file mode 100644
index 000000000000..f26112f06cec
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let m = { x: 0, y: 0 };
+
+	function handleMousemove(event) {
+		m.x = event.clientX;
+		m.y = event.clientY;
+	}
+</script>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
+
+<div on:mousemove={handleMousemove}>
+	The mouse position is {m.x} x {m.y}
+</div>
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/meta.json b/site/content/examples/04-events/00-dom-events/meta.json
new file mode 100644
index 000000000000..5b3e37e41f50
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "DOM events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte
new file mode 100644
index 000000000000..f0fd6ff17ab3
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let m = { x: 0, y: 0 };
+</script>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
+
+<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
+	The mouse position is {m.x} x {m.y}
+</div>
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/meta.json b/site/content/examples/04-events/01-inline-handlers/meta.json
new file mode 100644
index 000000000000..575b9ab2b6e0
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Inline handlers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/App.svelte b/site/content/examples/04-events/02-event-modifiers/App.svelte
new file mode 100644
index 000000000000..94df49cb2d6f
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	function handleClick() {
+		alert('no more alerts')
+	}
+</script>
+
+<button on:click|once={handleClick}>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/meta.json b/site/content/examples/04-events/02-event-modifiers/meta.json
new file mode 100644
index 000000000000..322bb5ba5e28
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Event modifiers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/App.svelte b/site/content/examples/04-events/03-component-events/App.svelte
new file mode 100644
index 000000000000..a8d14a368a0f
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Inner on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/Inner.svelte b/site/content/examples/04-events/03-component-events/Inner.svelte
new file mode 100644
index 000000000000..6ac8301f2495
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/meta.json b/site/content/examples/04-events/03-component-events/meta.json
new file mode 100644
index 000000000000..2a777d4d003c
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/App.svelte b/site/content/examples/04-events/04-event-forwarding/App.svelte
new file mode 100644
index 000000000000..973df50f0a2e
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Outer from './Outer.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Outer on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/Inner.svelte b/site/content/examples/04-events/04-event-forwarding/Inner.svelte
new file mode 100644
index 000000000000..6ac8301f2495
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/Outer.svelte b/site/content/examples/04-events/04-event-forwarding/Outer.svelte
new file mode 100644
index 000000000000..10c28f298a3a
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner on:message/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/meta.json b/site/content/examples/04-events/04-event-forwarding/meta.json
new file mode 100644
index 000000000000..3a8aa674b705
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Event forwarding"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/App.svelte b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
new file mode 100644
index 000000000000..1429cae207d8
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import FancyButton from './FancyButton.svelte';
+
+	function handleClick() {
+		alert('clicked');
+	}
+</script>
+
+<FancyButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
new file mode 100644
index 000000000000..75630ea99c08
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
@@ -0,0 +1,15 @@
+<style>
+	button {
+		font-family: 'Comic Sans MS';
+		font-size: 2em;
+		padding: 0.5em 1em;
+		color: royalblue;
+		background: gold;
+		border-radius: 1em;
+		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+	}
+</style>
+
+<button on:click>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/meta.json b/site/content/examples/04-events/05-dom-event-forwarding/meta.json
new file mode 100644
index 000000000000..9aa593808f04
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "DOM event forwarding"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/meta.json b/site/content/examples/04-events/meta.json
new file mode 100644
index 000000000000..c5f088e20879
--- /dev/null
+++ b/site/content/examples/04-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Events"
+}
\ No newline at end of file
diff --git a/site/content/examples/binding-input-text/App.svelte b/site/content/examples/05-bindings/00-text-inputs/App.svelte
similarity index 71%
rename from site/content/examples/binding-input-text/App.svelte
rename to site/content/examples/05-bindings/00-text-inputs/App.svelte
index 5d81d1e564b6..5eab79764a6f 100644
--- a/site/content/examples/binding-input-text/App.svelte
+++ b/site/content/examples/05-bindings/00-text-inputs/App.svelte
@@ -1,2 +1,6 @@
+<script>
+	let name = '';
+</script>
+
 <input bind:value={name} placeholder="enter your name">
 <p>Hello {name || 'stranger'}!</p>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/00-text-inputs/meta.json b/site/content/examples/05-bindings/00-text-inputs/meta.json
new file mode 100644
index 000000000000..45577af5be65
--- /dev/null
+++ b/site/content/examples/05-bindings/00-text-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Text inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/01-numeric-inputs/App.svelte b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte
new file mode 100644
index 000000000000..798d57e02192
--- /dev/null
+++ b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<label>
+	<input type=number bind:value={a} min=0 max=10>
+	<input type=range bind:value={a} min=0 max=10>
+</label>
+
+<label>
+	<input type=number bind:value={b} min=0 max=10>
+	<input type=range bind:value={b} min=0 max=10>
+</label>
+
+<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/01-numeric-inputs/meta.json b/site/content/examples/05-bindings/01-numeric-inputs/meta.json
new file mode 100644
index 000000000000..72f8579704f0
--- /dev/null
+++ b/site/content/examples/05-bindings/01-numeric-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Numeric inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
new file mode 100644
index 000000000000..b82d31e78317
--- /dev/null
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let yes = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={yes}>
+	Yes! Send me regular email spam
+</label>
+
+{#if yes}
+	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+{:else}
+	<p>You must opt in to continue. If you're not paying, you're the product.</p>
+{/if}
+
+<button disabled={!yes}>
+	Subscribe
+</button>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/meta.json b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json
new file mode 100644
index 000000000000..723312a3d955
--- /dev/null
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Checkbox inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/03-group-inputs/App.svelte b/site/content/examples/05-bindings/03-group-inputs/App.svelte
new file mode 100644
index 000000000000..a46c61c7e786
--- /dev/null
+++ b/site/content/examples/05-bindings/03-group-inputs/App.svelte
@@ -0,0 +1,52 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} value={flavour}>
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/examples/05-bindings/03-group-inputs/meta.json b/site/content/examples/05-bindings/03-group-inputs/meta.json
new file mode 100644
index 000000000000..2203d6e6fa6a
--- /dev/null
+++ b/site/content/examples/05-bindings/03-group-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Group inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
new file mode 100644
index 000000000000..be338bf47fc1
--- /dev/null
+++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import marked from 'marked';
+	let value = `Some words are *italic*, some are **bold**`;
+</script>
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
+
+<textarea bind:value></textarea>
+
+{@html marked(value)}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/meta.json b/site/content/examples/05-bindings/04-textarea-inputs/meta.json
new file mode 100644
index 000000000000..01adf6b5cf3d
--- /dev/null
+++ b/site/content/examples/05-bindings/04-textarea-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Textarea inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/05-select-bindings/App.svelte b/site/content/examples/05-bindings/05-select-bindings/App.svelte
new file mode 100644
index 000000000000..3f1e7fa7e1a8
--- /dev/null
+++ b/site/content/examples/05-bindings/05-select-bindings/App.svelte
@@ -0,0 +1,39 @@
+<script>
+	let questions = [
+		{ id: 1, text: `Where did you go to school?` },
+		{ id: 2, text: `What is your mother's name?` },
+		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+	];
+
+	let selected;
+
+	let answer = '';
+
+	function handleSubmit() {
+		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+	}
+</script>
+
+<style>
+	input { display: block; width: 500px; max-width: 100%; }
+</style>
+
+<h2>Insecurity questions</h2>
+
+<form on:submit|preventDefault={handleSubmit}>
+	<select bind:value={selected} on:change="{() => answer = ''}">
+		{#each questions as question}
+			<option value={question}>
+				{question.text}
+			</option>
+		{/each}
+	</select>
+
+	<input bind:value={answer}>
+
+	<button disabled={!answer} type=submit>
+		Submit
+	</button>
+</form>
+
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/05-select-bindings/meta.json b/site/content/examples/05-bindings/05-select-bindings/meta.json
new file mode 100644
index 000000000000..fe170eb0fcb2
--- /dev/null
+++ b/site/content/examples/05-bindings/05-select-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Select bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte
new file mode 100644
index 000000000000..d808850158ea
--- /dev/null
+++ b/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte
@@ -0,0 +1,53 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+<select multiple bind:value={flavours}>
+	{#each menu as flavour}
+		<option value={flavour}>
+			{flavour}
+		</option>
+	{/each}
+</select>
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json
new file mode 100644
index 000000000000..abf763540798
--- /dev/null
+++ b/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Select multiple"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte
new file mode 100644
index 000000000000..92bdc7754f38
--- /dev/null
+++ b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte
@@ -0,0 +1,39 @@
+<script>
+	let todos = [
+		{ done: false, text: 'finish Svelte tutorial' },
+		{ done: false, text: 'build an app' },
+		{ done: false, text: 'world domination' }
+	];
+
+	function add() {
+		todos = todos.concat({ done: false, text: '' });
+	}
+
+	function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+</script>
+
+<h1>Todos</h1>
+
+{#each todos as todo}
+	<div>
+		<input
+			type=checkbox
+			bind:checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			bind:value={todo.text}
+		>
+	</div>
+{/each}
+
+<button on:click={add}>
+	Add new
+</button>
+
+<button on:click={clear}>
+	Clear completed
+</button>
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/meta.json b/site/content/examples/05-bindings/07-each-block-bindings/meta.json
new file mode 100644
index 000000000000..2d27051b49fa
--- /dev/null
+++ b/site/content/examples/05-bindings/07-each-block-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Each block bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/08-media-elements/App.svelte
new file mode 100644
index 000000000000..2cf819fca0ea
--- /dev/null
+++ b/site/content/examples/05-bindings/08-media-elements/App.svelte
@@ -0,0 +1,130 @@
+<script>
+	// These values are bound to properties of the video
+	let time = 0;
+	let duration;
+	let paused = true;
+
+	let showControls = true;
+	let showControlsTimeout;
+
+	function handleMousemove(e) {
+		// Make the controls visible, but fade out after
+		// 2.5 seconds of inactivity
+		clearTimeout(showControlsTimeout);
+		showControlsTimeout = setTimeout(() => showControls = false, 2500);
+		showControls = true;
+
+		if (e.which !== 1) return; // mouse not down
+		if (!duration) return; // video not loaded yet
+
+		const { left, right } = this.getBoundingClientRect();
+		time = duration * (e.clientX - left) / (right - left);
+	}
+
+	function handleMousedown(e) {
+		// we can't rely on the built-in click event, because it fires
+		// after a drag — we have to listen for clicks ourselves
+
+		function handleMouseup() {
+			if (paused) e.target.play();
+			else e.target.pause();
+			cancel();
+		}
+
+		function cancel() {
+			e.target.removeEventListener('mouseup', handleMouseup);
+		}
+
+		e.target.addEventListener('mouseup', handleMouseup);
+
+		setTimeout(cancel, 200);
+	}
+
+	function format(seconds) {
+		if (isNaN(seconds)) return '...';
+
+		const minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds % 60);
+		if (seconds < 10) seconds = '0' + seconds;
+
+		return `${minutes}:${seconds}`;
+	}
+</script>
+
+<style>
+	div {
+		position: relative;
+	}
+
+	.controls {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		transition: opacity 1s;
+	}
+
+	.info {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	span {
+		padding: 0.2em 0.5em;
+		color: white;
+		text-shadow: 0 0 8px black;
+		font-size: 1.4em;
+		opacity: 0.7;
+	}
+
+	.time {
+		width: 3em;
+	}
+
+	.time:last-child { text-align: right }
+
+	progress {
+		display: block;
+		width: 100%;
+		height: 10px;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	progress::-webkit-progress-bar {
+		background-color: rgba(0,0,0,0.2);
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255,255,255,0.6);
+	}
+
+	video {
+		width: 100%;
+	}
+</style>
+
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="http://svelte-assets.surge.sh/caminandes-llamigos.jpg"
+		src="http://svelte-assets.surge.sh/caminandes-llamigos.mp4"
+		on:mousemove={handleMousemove}
+		on:mousedown={handleMousedown}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused
+	></video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-media-elements/meta.json b/site/content/examples/05-bindings/08-media-elements/meta.json
new file mode 100644
index 000000000000..4e40a6acee3a
--- /dev/null
+++ b/site/content/examples/05-bindings/08-media-elements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Media elements"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/App.svelte b/site/content/examples/05-bindings/09-dimensions/App.svelte
new file mode 100644
index 000000000000..ca992599c1d1
--- /dev/null
+++ b/site/content/examples/05-bindings/09-dimensions/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/meta.json b/site/content/examples/05-bindings/09-dimensions/meta.json
new file mode 100644
index 000000000000..9f8b6602c7b3
--- /dev/null
+++ b/site/content/examples/05-bindings/09-dimensions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Dimensions"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-bind-this/App.svelte b/site/content/examples/05-bindings/10-bind-this/App.svelte
new file mode 100644
index 000000000000..eacd203629aa
--- /dev/null
+++ b/site/content/examples/05-bindings/10-bind-this/App.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+	let ctx;
+	let running = false;
+
+	const r = Math.random();
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame;
+
+		(function loop() {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.height >>> 0;
+
+				const t = window.performance.now();
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}());
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #666;
+		-webkit-mask: url(logo-mask.svg) 50% 50% no-repeat;
+		mask: url(logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
+
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-bind-this/meta.json b/site/content/examples/05-bindings/10-bind-this/meta.json
new file mode 100644
index 000000000000..da5ce399ab39
--- /dev/null
+++ b/site/content/examples/05-bindings/10-bind-this/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "bind:this={canvas}"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/App.svelte b/site/content/examples/05-bindings/11-component-bindings/App.svelte
new file mode 100644
index 000000000000..67fec4a5ada9
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte
new file mode 100644
index 000000000000..c457a15cb50e
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/meta.json b/site/content/examples/05-bindings/11-component-bindings/meta.json
new file mode 100644
index 000000000000..4c921d0e8a77
--- /dev/null
+++ b/site/content/examples/05-bindings/11-component-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/meta.json b/site/content/examples/05-bindings/meta.json
new file mode 100644
index 000000000000..8bb0142eccc9
--- /dev/null
+++ b/site/content/examples/05-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
new file mode 100644
index 000000000000..1b83727627bd
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let photos = [];
+
+	onMount(async () => {
+		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
+		photos = await res.json();
+	});
+</script>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
+
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/meta.json b/site/content/examples/06-lifecycle/00-onmount/meta.json
new file mode 100644
index 000000000000..3b2799c5bce3
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "onMount"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/App.svelte b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
new file mode 100644
index 000000000000..93a721ef4430
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	let seconds = 0;
+	onInterval(() => seconds += 1, 1000);
+</script>
+
+<p>
+	The page has been open for
+	{seconds} {seconds === 1 ? 'second' : 'seconds'}
+</p>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/meta.json b/site/content/examples/06-lifecycle/01-ondestroy/meta.json
new file mode 100644
index 000000000000..d87febd1a587
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "onDestroy"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/utils.js b/site/content/examples/06-lifecycle/01-ondestroy/utils.js
new file mode 100644
index 000000000000..0f75f29e2a51
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/utils.js
@@ -0,0 +1,9 @@
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte
new file mode 100644
index 000000000000..373b6dcb6a8b
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/App.svelte
@@ -0,0 +1,106 @@
+<script>
+	import Eliza from 'elizanode';
+	import { beforeUpdate, afterUpdate } from 'svelte';
+
+	let div;
+	let autoscroll;
+
+	beforeUpdate(() => {
+		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+	});
+
+	afterUpdate(() => {
+		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+	});
+
+	const eliza = new Eliza();
+
+	let comments = [
+		{ author: 'eliza', text: eliza.getInitial() }
+	];
+
+	function handleKeydown(event) {
+		if (event.which === 13) {
+			const text = event.target.value;
+			if (!text) return;
+
+			comments = comments.concat({
+				author: 'user',
+				text
+			});
+
+			event.target.value = '';
+
+			const reply = eliza.transform(text);
+
+			setTimeout(() => {
+				comments = comments.concat({
+					author: 'eliza',
+					text: '...',
+					placeholder: true
+				});
+
+				setTimeout(() => {
+					comments = comments.filter(comment => !comment.placeholder).concat({
+						author: 'eliza',
+						text: reply
+					});
+				}, 500 + Math.random() * 500);
+			}, 200 + Math.random() * 200);
+		}
+	}
+</script>
+
+<style>
+	.chat {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-width: 320px;
+	}
+
+	.scrollable {
+		flex: 1 1 auto;
+		border-top: 1px solid #eee;
+		margin: 0 0 0.5em 0;
+		overflow-y: auto;
+	}
+
+	article {
+		margin: 0.5em 0;
+	}
+
+	.user {
+		text-align: right;
+	}
+
+	span {
+		padding: 0.5em 1em;
+		display: inline-block;
+	}
+
+	.eliza span {
+		background-color: #eee;
+		border-radius: 1em 1em 1em 0;
+	}
+
+	.user span {
+		background-color: #0074D9;
+		color: white;
+		border-radius: 1em 1em 0 1em;
+	}
+</style>
+
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/meta.json b/site/content/examples/06-lifecycle/02-update/meta.json
new file mode 100644
index 000000000000..c92a6db8dcb4
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "beforeUpdate and afterUpdate"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
new file mode 100644
index 000000000000..c9cb6de42089
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { tick } from 'svelte';
+
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.which !== 9) return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		await tick();
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/meta.json b/site/content/examples/06-lifecycle/03-tick/meta.json
new file mode 100644
index 000000000000..0a406e13aa35
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "tick"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/meta.json b/site/content/examples/06-lifecycle/meta.json
new file mode 100644
index 000000000000..2f833e2a4aba
--- /dev/null
+++ b/site/content/examples/06-lifecycle/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Lifecycle"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/App.svelte b/site/content/examples/07-stores/00-writable-stores/App.svelte
new file mode 100644
index 000000000000..ee542f789d19
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let count_value;
+
+	const unsubscribe = count.subscribe(value => {
+		count_value = value;
+	});
+</script>
+
+<h1>The count is {count_value}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
new file mode 100644
index 000000000000..043b795047b1
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-reactivity/App.svelte b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
similarity index 55%
rename from site/content/examples/homepage-demo-reactivity/App.svelte
rename to site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
index 9d1b2757c082..2b5763012b46 100644
--- a/site/content/examples/homepage-demo-reactivity/App.svelte
+++ b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
@@ -1,11 +1,11 @@
 <script>
-	let count = 0;
+	import { count } from './stores.js';
 
 	function increment() {
-		count += 1;
+		count.update(n => n + 1);
 	}
 </script>
 
 <button on:click={increment}>
-	clicks: {count}
+	+
 </button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Resetter.svelte b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte
new file mode 100644
index 000000000000..4183421e517b
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/meta.json b/site/content/examples/07-stores/00-writable-stores/meta.json
new file mode 100644
index 000000000000..e0b2a6809d5c
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Writable stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/stores.js b/site/content/examples/07-stores/00-writable-stores/stores.js
new file mode 100644
index 000000000000..143e0c99f085
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/App.svelte b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte
new file mode 100644
index 000000000000..10ebfb65bbde
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
new file mode 100644
index 000000000000..043b795047b1
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
new file mode 100644
index 000000000000..2b5763012b46
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		count.update(n => n + 1);
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
new file mode 100644
index 000000000000..4183421e517b
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/meta.json b/site/content/examples/07-stores/01-auto-subscriptions/meta.json
new file mode 100644
index 000000000000..a7e4c5fefc21
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Auto-subscriptions"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/stores.js b/site/content/examples/07-stores/01-auto-subscriptions/stores.js
new file mode 100644
index 000000000000..143e0c99f085
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/App.svelte b/site/content/examples/07-stores/02-readable-stores/App.svelte
new file mode 100644
index 000000000000..3ff0b0362f01
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { time } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/meta.json b/site/content/examples/07-stores/02-readable-stores/meta.json
new file mode 100644
index 000000000000..3f420cafd804
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Readable stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/stores.js b/site/content/examples/07-stores/02-readable-stores/stores.js
new file mode 100644
index 000000000000..015de5ad4532
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/stores.js
@@ -0,0 +1,11 @@
+import { readable } from 'svelte/store';
+
+export const time = readable(function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+}, new Date());
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/App.svelte b/site/content/examples/07-stores/03-derived-stores/App.svelte
new file mode 100644
index 000000000000..8182ecd671d4
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { time, elapsed } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
+
+<p>
+	This page has been open for
+	{$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/meta.json b/site/content/examples/07-stores/03-derived-stores/meta.json
new file mode 100644
index 000000000000..23105b0bfa4d
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Derived stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/stores.js b/site/content/examples/07-stores/03-derived-stores/stores.js
new file mode 100644
index 000000000000..2f3af1247a1c
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/stores.js
@@ -0,0 +1,18 @@
+import { readable, derive } from 'svelte/store';
+
+export const time = readable(function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+}, new Date());
+
+const start = new Date();
+
+export const elapsed = derive(
+	time,
+	$time => Math.round(($time - start) / 1000)
+);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/App.svelte b/site/content/examples/07-stores/04-custom-stores/App.svelte
new file mode 100644
index 000000000000..a320cc052ffd
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { count } from './stores.js';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<button on:click={count.increment}>+</button>
+<button on:click={count.decrement}>-</button>
+<button on:click={count.reset}>reset</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/meta.json b/site/content/examples/07-stores/04-custom-stores/meta.json
new file mode 100644
index 000000000000..7394c55f2832
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Custom stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/stores.js b/site/content/examples/07-stores/04-custom-stores/stores.js
new file mode 100644
index 000000000000..5a26025b0312
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/stores.js
@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+function createCount() {
+	const { subscribe, set, update } = writable(0);
+
+	return {
+		subscribe,
+		increment: () => update(n => n + 1),
+		decrement: () => update(n => n - 1),
+		reset: () => set(0)
+	};
+}
+
+export const count = createCount();
\ No newline at end of file
diff --git a/site/content/examples/07-stores/meta.json b/site/content/examples/07-stores/meta.json
new file mode 100644
index 000000000000..ad974de0d918
--- /dev/null
+++ b/site/content/examples/07-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte
new file mode 100644
index 000000000000..83f3b50a0474
--- /dev/null
+++ b/site/content/examples/08-motion/00-tweened/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	const progress = tweened(0, {
+		duration: 400,
+		easing: cubicOut
+	});
+</script>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
+
+<progress value={$progress}></progress>
+
+<button on:click="{() => progress.set(0)}">
+	0%
+</button>
+
+<button on:click="{() => progress.set(0.25)}">
+	25%
+</button>
+
+<button on:click="{() => progress.set(0.5)}">
+	50%
+</button>
+
+<button on:click="{() => progress.set(0.75)}">
+	75%
+</button>
+
+<button on:click="{() => progress.set(1)}">
+	100%
+</button>
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/meta.json b/site/content/examples/08-motion/00-tweened/meta.json
new file mode 100644
index 000000000000..39d3af7f38d9
--- /dev/null
+++ b/site/content/examples/08-motion/00-tweened/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Tweened"
+}
\ No newline at end of file
diff --git a/site/content/examples/motion-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte
similarity index 53%
rename from site/content/examples/motion-spring/App.svelte
rename to site/content/examples/08-motion/01-spring/App.svelte
index ae90d7cc8dd6..2cb0fd1eb78f 100644
--- a/site/content/examples/motion-spring/App.svelte
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -1,43 +1,20 @@
 <script>
 	import { spring } from 'svelte/motion';
 
-	let coords = spring({
-		x: window.innerWidth / 2,
-		y: window.innerHeight / 2
-	}, {
+	let coords = spring({ x: 50, y: 50 }, {
 		stiffness: 0.1,
 		damping: 0.25
 	});
 
 	let size = spring(10);
-
-	function follow(e) {
-		coords.set({
-			x: e.clientX,
-			y: e.clientY
-		});
-	}
-
-	function embiggen() {
-		size.set(30);
-	}
-
-	function revert() {
-		size.set(10);
-	}
 </script>
 
-<svelte:window
-	on:mousemove={follow}
-	on:mousedown={embiggen}
-	on:mouseup={revert}
-/>
-
-<svg>
-	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
+<style>
+	svg { width: 100%; height: 100% }
+	circle { fill: #ff3e00 }
+</style>
 
-<div class="controls">
+<div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
 		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
@@ -49,9 +26,10 @@
 	</label>
 </div>
 
-<style>
-	:global(body) { padding: 0 }
-	svg { width: 100%; height: 100% }
-	circle { fill: #ff3e00 }
-	.controls { position: absolute; top: 1em; left: 1em }
-</style>
\ No newline at end of file
+<svg
+	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
+	on:mousedown="{() => size.set(30)}"
+	on:mouseup="{() => size.set(10)}"
+>
+	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
+</svg>
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/meta.json b/site/content/examples/08-motion/01-spring/meta.json
new file mode 100644
index 000000000000..f871fea53e34
--- /dev/null
+++ b/site/content/examples/08-motion/01-spring/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Spring"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/meta.json b/site/content/examples/08-motion/meta.json
new file mode 100644
index 000000000000..e6fa83cd7f5e
--- /dev/null
+++ b/site/content/examples/08-motion/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Motion"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/App.svelte b/site/content/examples/09-transitions/00-transition/App.svelte
new file mode 100644
index 000000000000..b7909fb86e8e
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fade>
+		Fades in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/meta.json b/site/content/examples/09-transitions/00-transition/meta.json
new file mode 100644
index 000000000000..e07975554f59
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The transition directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
new file mode 100644
index 000000000000..01047f5e37ca
--- /dev/null
+++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fly="{{ y: 200, duration: 2000 }}">
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
new file mode 100644
index 000000000000..517bc54c3cac
--- /dev/null
+++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Adding parameters"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/02-in-and-out/App.svelte b/site/content/examples/09-transitions/02-in-and-out/App.svelte
new file mode 100644
index 000000000000..36d36664e6fc
--- /dev/null
+++ b/site/content/examples/09-transitions/02-in-and-out/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade, fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
+		Flies in, fades out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/02-in-and-out/meta.json b/site/content/examples/09-transitions/02-in-and-out/meta.json
new file mode 100644
index 000000000000..627f409fa478
--- /dev/null
+++ b/site/content/examples/09-transitions/02-in-and-out/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "In and out"
+}
\ No newline at end of file
diff --git a/site/content/examples/transitions-custom/App.svelte b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
similarity index 62%
rename from site/content/examples/transitions-custom/App.svelte
rename to site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
index bee159e4c576..6e8dfcaf081e 100644
--- a/site/content/examples/transitions-custom/App.svelte
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -1,14 +1,14 @@
 <script>
-	import * as eases from 'svelte/easing';
 	import { fade } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
 
-	let visible;
+	let visible = true;
 
-	const wheee = (node, params) => {
+	function spin(node, { duration }) {
 		return {
-			duration: params.duration,
+			duration,
 			css: t => {
-				const eased = eases.elasticOut(t);
+				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
@@ -19,17 +19,9 @@
 					);`
 			}
 		};
-	};
+	}
 </script>
 
-<input type=checkbox bind:checked={visible}> visible
-
-{#if visible}
-	<div class="centered" in:wheee="{{duration: 8000}}" out:fade>
-		<span>wheeee!!!!!</span>
-	</div>
-{/if}
-
 <style>
 	.centered {
 		position: absolute;
@@ -44,3 +36,14 @@
 		font-size: 4em;
 	}
 </style>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/meta.json b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
new file mode 100644
index 000000000000..8b70464ca8a5
--- /dev/null
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Custom CSS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
new file mode 100644
index 000000000000..3b3fb94d1c89
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -0,0 +1,36 @@
+<script>
+	let visible = false;
+
+	function typewriter(node, { speed = 50 }) {
+		const valid = (
+			node.childNodes.length === 1 &&
+			node.childNodes[0].nodeType === 3
+		);
+
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
+
+		const text = node.textContent;
+		const duration = text.length * speed;
+
+		return {
+			duration,
+			tick: t => {
+				const i = ~~(text.length * t);
+				node.textContent = text.slice(0, i);
+			}
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p in:typewriter>
+		The quick brown fox jumps over the lazy dog
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/meta.json b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json
new file mode 100644
index 000000000000..1ec11d90f974
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Custom JS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/05-transition-events/App.svelte b/site/content/examples/09-transitions/05-transition-events/App.svelte
new file mode 100644
index 000000000000..da79897365eb
--- /dev/null
+++ b/site/content/examples/09-transitions/05-transition-events/App.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let visible = true;
+	let status = 'waiting...';
+</script>
+
+<p>status: {status}</p>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p
+		transition:fly="{{ y: 200, duration: 2000 }}"
+		on:introstart="{() => status = 'intro started'}"
+		on:outrostart="{() => status = 'outro started'}"
+		on:introend="{() => status = 'intro ended'}"
+		on:outroend="{() => status = 'outro ended'}"
+	>
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/05-transition-events/meta.json b/site/content/examples/09-transitions/05-transition-events/meta.json
new file mode 100644
index 000000000000..b46e28feed27
--- /dev/null
+++ b/site/content/examples/09-transitions/05-transition-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Transition events"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
new file mode 100644
index 000000000000..c46096c20467
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -0,0 +1,146 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+
+	const { send, receive } = crossfade({
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let todos = [
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing JSConf talk' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' },
+	];
+
+	let uid = todos.length + 1;
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+
+	function handleKeydown(event) {
+		if (event.which === 13) {
+			addTodo(event.target);
+		}
+	}
+</script>
+
+<style>
+	.new-todo {
+		font-size: 1.4em;
+		width: 100%;
+		margin: 2em 0 1em 0;
+	}
+
+	.board {
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.left, .right {
+		float: left;
+		width: 50%;
+		padding: 0 1em 0 0;
+		box-sizing: border-box;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+	}
+
+	label {
+		top: 0;
+		left: 0;
+		display: block;
+		font-size: 1em;
+		line-height: 1;
+		padding: 0.5em;
+		margin: 0 auto 0.5em auto;
+		border-radius: 2px;
+		background-color: #eee;
+		user-select: none;
+	}
+
+	input { margin: 0 }
+
+	.right label {
+		background-color: rgb(180,240,100);
+	}
+
+	button {
+		float: right;
+		height: 1em;
+		box-sizing: border-box;
+		padding: 0 0.5em;
+		line-height: 1;
+		background-color: transparent;
+		border: none;
+		color: rgb(170,30,30);
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
+
+<div class='board'>
+	<input class="new-todo" placeholder="what needs to be done?" on:enter={add}>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js
new file mode 100644
index 000000000000..e11e18b60eb8
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/crossfade.js
@@ -0,0 +1,65 @@
+import { quintOut } from 'svelte/easing';
+
+export default function crossfade({ send, receive, fallback }) {
+	let requested = new Map();
+	let provided = new Map();
+
+	function crossfade(from, node) {
+		const to = node.getBoundingClientRect();
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+
+		const style = getComputedStyle(node);
+		const transform = style.transform === 'none' ? '' : style.transform;
+
+		return {
+			duration: 400,
+			easing: quintOut,
+			css: (t, u) => `
+				opacity: ${t};
+				transform: ${transform} translate(${u * dx}px,${u * dy}px);
+			`
+		};
+	}
+
+	return {
+		send(node, params) {
+			provided.set(params.key, {
+				rect: node.getBoundingClientRect()
+			});
+
+			return () => {
+				if (requested.has(params.key)) {
+					const { rect } = requested.get(params.key);
+					requested.delete(params.key);
+
+					return crossfade(rect, node);
+				}
+
+				// if the node is disappearing altogether
+				// (i.e. wasn't claimed by the other list)
+				// then we need to supply an outro
+				provided.delete(params.key);
+				return fallback(node, params);
+			};
+		},
+
+		receive(node, params) {
+			requested.set(params.key, {
+				rect: node.getBoundingClientRect()
+			});
+
+			return () => {
+				if (provided.has(params.key)) {
+					const { rect } = provided.get(params.key);
+					provided.delete(params.key);
+
+					return crossfade(rect, node);
+				}
+
+				requested.delete(params.key);
+				return fallback(node, params);
+			};
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/meta.json b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
new file mode 100644
index 000000000000..b9fc7da8984d
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Deferred transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/meta.json b/site/content/examples/09-transitions/meta.json
new file mode 100644
index 000000000000..cb9291d73f28
--- /dev/null
+++ b/site/content/examples/09-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
new file mode 100644
index 000000000000..c46096c20467
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -0,0 +1,146 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import crossfade from './crossfade.js'; // TODO put this in svelte/transition!
+
+	const { send, receive } = crossfade({
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let todos = [
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing JSConf talk' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' },
+	];
+
+	let uid = todos.length + 1;
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+
+	function handleKeydown(event) {
+		if (event.which === 13) {
+			addTodo(event.target);
+		}
+	}
+</script>
+
+<style>
+	.new-todo {
+		font-size: 1.4em;
+		width: 100%;
+		margin: 2em 0 1em 0;
+	}
+
+	.board {
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.left, .right {
+		float: left;
+		width: 50%;
+		padding: 0 1em 0 0;
+		box-sizing: border-box;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+	}
+
+	label {
+		top: 0;
+		left: 0;
+		display: block;
+		font-size: 1em;
+		line-height: 1;
+		padding: 0.5em;
+		margin: 0 auto 0.5em auto;
+		border-radius: 2px;
+		background-color: #eee;
+		user-select: none;
+	}
+
+	input { margin: 0 }
+
+	.right label {
+		background-color: rgb(180,240,100);
+	}
+
+	button {
+		float: right;
+		height: 1em;
+		box-sizing: border-box;
+		padding: 0 0.5em;
+		line-height: 1;
+		background-color: transparent;
+		border: none;
+		color: rgb(170,30,30);
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
+
+<div class='board'>
+	<input class="new-todo" placeholder="what needs to be done?" on:enter={add}>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/crossfade.js b/site/content/examples/10-animations/00-animate/crossfade.js
new file mode 100644
index 000000000000..e11e18b60eb8
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/crossfade.js
@@ -0,0 +1,65 @@
+import { quintOut } from 'svelte/easing';
+
+export default function crossfade({ send, receive, fallback }) {
+	let requested = new Map();
+	let provided = new Map();
+
+	function crossfade(from, node) {
+		const to = node.getBoundingClientRect();
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+
+		const style = getComputedStyle(node);
+		const transform = style.transform === 'none' ? '' : style.transform;
+
+		return {
+			duration: 400,
+			easing: quintOut,
+			css: (t, u) => `
+				opacity: ${t};
+				transform: ${transform} translate(${u * dx}px,${u * dy}px);
+			`
+		};
+	}
+
+	return {
+		send(node, params) {
+			provided.set(params.key, {
+				rect: node.getBoundingClientRect()
+			});
+
+			return () => {
+				if (requested.has(params.key)) {
+					const { rect } = requested.get(params.key);
+					requested.delete(params.key);
+
+					return crossfade(rect, node);
+				}
+
+				// if the node is disappearing altogether
+				// (i.e. wasn't claimed by the other list)
+				// then we need to supply an outro
+				provided.delete(params.key);
+				return fallback(node, params);
+			};
+		},
+
+		receive(node, params) {
+			requested.set(params.key, {
+				rect: node.getBoundingClientRect()
+			});
+
+			return () => {
+				if (provided.has(params.key)) {
+					const { rect } = provided.get(params.key);
+					provided.delete(params.key);
+
+					return crossfade(rect, node);
+				}
+
+				requested.delete(params.key);
+				return fallback(node, params);
+			};
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/meta.json b/site/content/examples/10-animations/00-animate/meta.json
new file mode 100644
index 000000000000..dd7e34544306
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The animate directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/meta.json b/site/content/examples/10-animations/meta.json
new file mode 100644
index 000000000000..c71301495eef
--- /dev/null
+++ b/site/content/examples/10-animations/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Animations"
+}
\ No newline at end of file
diff --git a/site/content/examples/svg-clock/App.svelte b/site/content/examples/11-svg/01-clock/App.svelte
similarity index 98%
rename from site/content/examples/svg-clock/App.svelte
rename to site/content/examples/11-svg/01-clock/App.svelte
index b83da1c203e6..49d3a7f8093b 100644
--- a/site/content/examples/svg-clock/App.svelte
+++ b/site/content/examples/11-svg/01-clock/App.svelte
@@ -20,6 +20,44 @@
 	});
 </script>
 
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.clock-face {
+		stroke: #333;
+		fill: white;
+	}
+
+	.minor {
+		stroke: #999;
+		stroke-width: 0.5;
+	}
+
+	.major {
+		stroke: #333;
+		stroke-width: 1;
+	}
+
+	.hour {
+		stroke: #333;
+	}
+
+	.minute {
+		stroke: #666;
+	}
+
+	.second, .second-counterweight {
+		stroke: rgb(180,0,0);
+	}
+
+	.second-counterweight {
+		stroke-width: 3;
+	}
+</style>
+
 <svg viewBox='-50 -50 100 100'>
 	<circle class='clock-face' r='48'/>
 
@@ -63,35 +101,4 @@
 		<line class='second' y1='10' y2='-38'/>
 		<line class='second-counterweight' y1='10' y2='2'/>
 	</g>
-</svg>
-
-<style>
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-	.clock-face {
-		stroke: #333;
-		fill: white;
-	}
-	.minor {
-		stroke: #999;
-		stroke-width: 0.5;
-	}
-	.major {
-		stroke: #333;
-		stroke-width: 1;
-	}
-	.hour {
-		stroke: #333;
-	}
-	.minute {
-		stroke: #666;
-	}
-	.second, .second-counterweight {
-		stroke: rgb(180,0,0);
-	}
-	.second-counterweight {
-		stroke-width: 3;
-	}
-</style>
\ No newline at end of file
+</svg>
\ No newline at end of file
diff --git a/site/content/examples/11-svg/01-clock/meta.json b/site/content/examples/11-svg/01-clock/meta.json
new file mode 100644
index 000000000000..ec7137feb682
--- /dev/null
+++ b/site/content/examples/11-svg/01-clock/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Clock"
+}
\ No newline at end of file
diff --git a/site/content/examples/bar-chart/App.svelte b/site/content/examples/11-svg/02-bar-chart/App.svelte
similarity index 89%
rename from site/content/examples/bar-chart/App.svelte
rename to site/content/examples/11-svg/02-bar-chart/App.svelte
index a4b01f97ddb8..e0f27586c3dc 100644
--- a/site/content/examples/bar-chart/App.svelte
+++ b/site/content/examples/11-svg/02-bar-chart/App.svelte
@@ -1,7 +1,14 @@
 <script>
 	import { scaleLinear } from 'd3-scale';
 
-	export let points;
+	const points = [
+		{ year: 1990, birthrate: 16.7 },
+		{ year: 1995, birthrate: 14.6 },
+		{ year: 2000, birthrate: 14.4 },
+		{ year: 2005, birthrate: 14 },
+		{ year: 2010, birthrate: 13 },
+		{ year: 2015, birthrate: 12.4 }
+	];
 
 	const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
 	const yTicks = [0, 5, 10, 15, 20];
@@ -71,7 +78,7 @@
 </style>
 
 <div class="chart">
-	<h2>US birthrate by year {width}/{height}</h2>
+	<h2>US birthrate by year</h2>
 	<svg bind:clientWidth={width} bind:clientHeight={height}>
 		<!-- y axis -->
 		<g class="axis y-axis" transform="translate(0,{padding.top})">
diff --git a/site/content/examples/11-svg/02-bar-chart/meta.json b/site/content/examples/11-svg/02-bar-chart/meta.json
new file mode 100644
index 000000000000..97ae2b671b2c
--- /dev/null
+++ b/site/content/examples/11-svg/02-bar-chart/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Bar chart"
+}
\ No newline at end of file
diff --git a/site/content/examples/line-chart/App.svelte b/site/content/examples/11-svg/03-area-chart/App.svelte
similarity index 98%
rename from site/content/examples/line-chart/App.svelte
rename to site/content/examples/11-svg/03-area-chart/App.svelte
index 497213ee0a9a..c41801e03672 100644
--- a/site/content/examples/line-chart/App.svelte
+++ b/site/content/examples/11-svg/03-area-chart/App.svelte
@@ -1,8 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { scaleLinear } from 'd3-scale';
-
-	export let points;
+	import points from './data.js';
 
 	const yTicks = [0, 2, 4, 6, 8];
 	const xTicks = [1980, 1990, 2000, 2010];
diff --git a/site/content/examples/11-svg/03-area-chart/data.js b/site/content/examples/11-svg/03-area-chart/data.js
new file mode 100644
index 000000000000..72cb04f0d86c
--- /dev/null
+++ b/site/content/examples/11-svg/03-area-chart/data.js
@@ -0,0 +1,40 @@
+export default [
+	{ x: 1979, y: 7.19 },
+	{ x: 1980, y: 7.83 },
+	{ x: 1981, y: 7.24 },
+	{ x: 1982, y: 7.44 },
+	{ x: 1983, y: 7.51 },
+	{ x: 1984, y: 7.10 },
+	{ x: 1985, y: 6.91 },
+	{ x: 1986, y: 7.53 },
+	{ x: 1987, y: 7.47 },
+	{ x: 1988, y: 7.48 },
+	{ x: 1989, y: 7.03 },
+	{ x: 1990, y: 6.23 },
+	{ x: 1991, y: 6.54 },
+	{ x: 1992, y: 7.54 },
+	{ x: 1993, y: 6.50 },
+	{ x: 1994, y: 7.18 },
+	{ x: 1995, y: 6.12 },
+	{ x: 1996, y: 7.87 },
+	{ x: 1997, y: 6.73 },
+	{ x: 1998, y: 6.55 },
+	{ x: 1999, y: 6.23 },
+	{ x: 2000, y: 6.31 },
+	{ x: 2001, y: 6.74 },
+	{ x: 2002, y: 5.95 },
+	{ x: 2003, y: 6.13 },
+	{ x: 2004, y: 6.04 },
+	{ x: 2005, y: 5.56 },
+	{ x: 2006, y: 5.91 },
+	{ x: 2007, y: 4.29 },
+	{ x: 2008, y: 4.72 },
+	{ x: 2009, y: 5.38 },
+	{ x: 2010, y: 4.92 },
+	{ x: 2011, y: 4.61 },
+	{ x: 2012, y: 3.62 },
+	{ x: 2013, y: 5.35 },
+	{ x: 2014, y: 5.28 },
+	{ x: 2015, y: 4.63 },
+	{ x: 2016, y: 4.72 }
+];
\ No newline at end of file
diff --git a/site/content/examples/11-svg/03-area-chart/meta.json b/site/content/examples/11-svg/03-area-chart/meta.json
new file mode 100644
index 000000000000..3c8bb48a409b
--- /dev/null
+++ b/site/content/examples/11-svg/03-area-chart/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Area chart"
+}
\ No newline at end of file
diff --git a/site/content/examples/scatterplot/App.svelte b/site/content/examples/11-svg/04-scatterplot/App.svelte
similarity index 58%
rename from site/content/examples/scatterplot/App.svelte
rename to site/content/examples/11-svg/04-scatterplot/App.svelte
index 8e88532ab588..42a0660b87f9 100644
--- a/site/content/examples/scatterplot/App.svelte
+++ b/site/content/examples/11-svg/04-scatterplot/App.svelte
@@ -1,21 +1,8 @@
 <script>
 	import Scatterplot from './Scatterplot.svelte';
-
-	export let a;
-	export let b;
-	export let c;
-	export let d;
+	import data from './data.js';
 </script>
 
-<div class="chart">
-	<h2>Anscombe's quartet</h2>
-
-	<Scatterplot points={a}/>
-	<Scatterplot points={b}/>
-	<Scatterplot points={c}/>
-	<Scatterplot points={d}/>
-</div>
-
 <style>
 	.chart {
 		width: 100%;
@@ -25,4 +12,13 @@
 		max-height: 480px;
 		margin: 0 auto;
 	}
-</style>
\ No newline at end of file
+</style>
+
+<div class="chart">
+	<h2>Anscombe's quartet</h2>
+
+	<Scatterplot points={data.a}/>
+	<Scatterplot points={data.b}/>
+	<Scatterplot points={data.c}/>
+	<Scatterplot points={data.d}/>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/scatterplot/Scatterplot.svelte b/site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte
similarity index 100%
rename from site/content/examples/scatterplot/Scatterplot.svelte
rename to site/content/examples/11-svg/04-scatterplot/Scatterplot.svelte
diff --git a/site/content/examples/11-svg/04-scatterplot/data.js b/site/content/examples/11-svg/04-scatterplot/data.js
new file mode 100644
index 000000000000..0faeb976d90e
--- /dev/null
+++ b/site/content/examples/11-svg/04-scatterplot/data.js
@@ -0,0 +1,54 @@
+export default {
+	a: [
+		{ x: 10, y: 8.04 },
+		{ x: 8, y: 6.95 },
+		{ x: 13, y: 7.58 },
+		{ x: 9, y: 8.81 },
+		{ x: 11, y: 8.33 },
+		{ x: 14, y: 9.96 },
+		{ x: 6, y: 7.24 },
+		{ x: 4, y: 4.26 },
+		{ x: 12, y: 10.84 },
+		{ x: 7, y: 4.82 },
+		{ x: 5, y: 5.68 }
+	],
+	b: [
+		{ x: 10, y: 9.14 },
+		{ x: 8, y: 8.14 },
+		{ x: 13, y: 8.74 },
+		{ x: 9, y: 8.77 },
+		{ x: 11, y: 9.26 },
+		{ x: 14, y: 8.1 },
+		{ x: 6, y: 6.13 },
+		{ x: 4, y: 3.1 },
+		{ x: 12, y: 9.13 },
+		{ x: 7, y: 7.26 },
+		{ x: 5, y: 4.74 }
+	],
+	c: [
+		{ x: 10, y: 7.46 },
+		{ x: 8, y: 6.77 },
+		{ x: 13, y: 12.74 },
+		{ x: 9, y: 7.11 },
+		{ x: 11, y: 7.81 },
+		{ x: 14, y: 8.84 },
+		{ x: 6, y: 6.08 },
+		{ x: 4, y: 5.39 },
+		{ x: 12, y: 8.15 },
+		{ x: 7, y: 6.42 },
+		{ x: 5, y: 5.73 }
+	],
+	d: [
+		{ x: 8, y: 6.58 },
+		{ x: 8, y: 5.76 },
+		{ x: 8, y: 7.71 },
+		{ x: 8, y: 8.84 },
+		{ x: 8, y: 8.47 },
+		{ x: 8, y: 7.04 },
+		{ x: 8, y: 5.25 },
+		{ x: 19, y: 12.5 },
+		{ x: 8, y: 5.56 },
+		{ x: 8, y: 7.91 },
+		{ x: 8, y: 6.89 }
+	]
+};
\ No newline at end of file
diff --git a/site/content/examples/11-svg/04-scatterplot/meta.json b/site/content/examples/11-svg/04-scatterplot/meta.json
new file mode 100644
index 000000000000..52a4c119bcec
--- /dev/null
+++ b/site/content/examples/11-svg/04-scatterplot/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Scatterplot"
+}
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-transitions/App.svelte b/site/content/examples/11-svg/05-svg-transitions/App.svelte
similarity index 100%
rename from site/content/examples/homepage-demo-transitions/App.svelte
rename to site/content/examples/11-svg/05-svg-transitions/App.svelte
diff --git a/site/content/examples/homepage-demo-transitions/custom-transitions.js b/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
similarity index 100%
rename from site/content/examples/homepage-demo-transitions/custom-transitions.js
rename to site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
diff --git a/site/content/examples/11-svg/05-svg-transitions/meta.json b/site/content/examples/11-svg/05-svg-transitions/meta.json
new file mode 100644
index 000000000000..aa14d1a3d475
--- /dev/null
+++ b/site/content/examples/11-svg/05-svg-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "SVG transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-transitions/shape.js b/site/content/examples/11-svg/05-svg-transitions/shape.js
similarity index 86%
rename from site/content/examples/homepage-demo-transitions/shape.js
rename to site/content/examples/11-svg/05-svg-transitions/shape.js
index 032a58bf24f4..9ed2128ebe8a 100644
--- a/site/content/examples/homepage-demo-transitions/shape.js
+++ b/site/content/examples/11-svg/05-svg-transitions/shape.js
@@ -1,5 +1,2 @@
 export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`;
-
-export const outer = `
-	M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z
-	M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
\ No newline at end of file
+export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
\ No newline at end of file
diff --git a/site/content/examples/11-svg/meta.json b/site/content/examples/11-svg/meta.json
new file mode 100644
index 000000000000..a26780dfc815
--- /dev/null
+++ b/site/content/examples/11-svg/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "SVG"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-actions/00-actions/App.svelte b/site/content/examples/12-actions/00-actions/App.svelte
new file mode 100644
index 000000000000..1324277bac6a
--- /dev/null
+++ b/site/content/examples/12-actions/00-actions/App.svelte
@@ -0,0 +1,49 @@
+<script>
+	import { spring } from 'svelte/motion';
+	import { pannable } from './pannable.js';
+
+	const coords = spring({ x: 0, y: 0 }, {
+		stiffness: 0.2,
+		damping: 0.4
+	});
+
+	function handlePanStart() {
+		coords.stiffness = coords.damping = 1;
+	}
+
+	function handlePanMove(event) {
+		coords.update($coords => ({
+			x: $coords.x + event.detail.dx,
+			y: $coords.y + event.detail.dy
+		}));
+	}
+
+	function handlePanEnd(event) {
+		coords.stiffness = 0.2;
+		coords.damping = 0.4;
+		coords.set({ x: 0, y: 0 });
+	}
+</script>
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		border-radius: 4px;
+		background-color: #ff3e00;
+		cursor: move;
+	}
+</style>
+
+<div class="box"
+	use:pannable
+	on:panstart={handlePanStart}
+	on:panmove={handlePanMove}
+	on:panend={handlePanEnd}
+	style="transform: translate({$coords.x}px,{$coords.y}px)"
+></div>
\ No newline at end of file
diff --git a/site/content/examples/12-actions/00-actions/meta.json b/site/content/examples/12-actions/00-actions/meta.json
new file mode 100644
index 000000000000..463fc963af69
--- /dev/null
+++ b/site/content/examples/12-actions/00-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The use directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-actions/00-actions/pannable.js b/site/content/examples/12-actions/00-actions/pannable.js
new file mode 100644
index 000000000000..f7d15328be51
--- /dev/null
+++ b/site/content/examples/12-actions/00-actions/pannable.js
@@ -0,0 +1,47 @@
+export function pannable(node) {
+	let x;
+	let y;
+
+	function handleMousedown(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('panstart', {
+			detail: { x, y }
+		}));
+
+		window.addEventListener('mousemove', handleMousemove);
+		window.addEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMousemove(event) {
+		const dx = event.clientX - x;
+		const dy = event.clientY - y;
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('panmove', {
+			detail: { x, y, dx, dy }
+		}));
+	}
+
+	function handleMouseup(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('panend', {
+			detail: { x, y }
+		}));
+
+		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
+	}
+
+	node.addEventListener('mousedown', handleMousedown);
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte b/site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte
new file mode 100644
index 000000000000..0bd9d56113fc
--- /dev/null
+++ b/site/content/examples/12-actions/01-adding-parameters-to-actions/App.svelte
@@ -0,0 +1,70 @@
+<script>
+	let language = "english";
+
+	const translations = {
+		english: {
+			tooltip: "Switch Languages",
+		},
+		latin: {
+			tooltip: "Itchsway Anguageslay",
+		}
+	};
+
+	function tooltip(node, text) {
+		const tooltip = document.createElement('div');
+		tooltip.textContent = text;
+
+		Object.assign(tooltip.style, {
+			position: 'absolute',
+			background: 'black',
+			color: 'white',
+			padding: '0.5em 1em',
+			fontSize: '12px',
+			pointerEvents: 'none',
+			transform: 'translate(5px, -50%)',
+			borderRadius: '2px',
+			transition: 'opacity 0.4s'
+		});
+
+		function position() {
+			const { top, right, bottom } = node.getBoundingClientRect();
+			tooltip.style.top = `${(top + bottom) / 2}px`;
+			tooltip.style.left = `${right}px`;
+		}
+
+		function append() {
+			document.body.appendChild(tooltip);
+			tooltip.style.opacity = 0;
+			setTimeout(() => tooltip.style.opacity = 1);
+			position();
+		}
+
+		function remove() {
+			tooltip.remove();
+		}
+
+		node.addEventListener('mouseenter', append);
+		node.addEventListener('mouseleave', remove);
+
+		return {
+			update(text) {
+				tooltip.textContent = text;
+				position();
+			},
+
+			destroy() {
+				tooltip.remove();
+				node.removeEventListener('mouseenter', append);
+				node.removeEventListener('mouseleave', remove);
+			}
+		};
+	}
+
+	function toggleLanguage() {
+		language = language === 'english' ? 'latin' : 'english'
+	}
+</script>
+
+<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+	{language}
+</button>
\ No newline at end of file
diff --git a/site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json b/site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json
new file mode 100644
index 000000000000..517bc54c3cac
--- /dev/null
+++ b/site/content/examples/12-actions/01-adding-parameters-to-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Adding parameters"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-actions/meta.json b/site/content/examples/12-actions/meta.json
new file mode 100644
index 000000000000..a15461028365
--- /dev/null
+++ b/site/content/examples/12-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Actions"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-classes/00-classes/App.svelte b/site/content/examples/13-classes/00-classes/App.svelte
new file mode 100644
index 000000000000..4da386991d5d
--- /dev/null
+++ b/site/content/examples/13-classes/00-classes/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<button
+	class:active="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class:active="{current === 'bar'}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class:active="{current === 'baz'}"
+	on:click="{() => current = 'baz'}"
+>baz</button>
\ No newline at end of file
diff --git a/site/content/examples/13-classes/00-classes/meta.json b/site/content/examples/13-classes/00-classes/meta.json
new file mode 100644
index 000000000000..7641cc6a5a87
--- /dev/null
+++ b/site/content/examples/13-classes/00-classes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The class directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-classes/01-class-shorthand/App.svelte b/site/content/examples/13-classes/01-class-shorthand/App.svelte
new file mode 100644
index 000000000000..0f4e0d9f2438
--- /dev/null
+++ b/site/content/examples/13-classes/01-class-shorthand/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big>
+	some {big ? 'big' : 'small'} text
+</div>
\ No newline at end of file
diff --git a/site/content/examples/13-classes/01-class-shorthand/meta.json b/site/content/examples/13-classes/01-class-shorthand/meta.json
new file mode 100644
index 000000000000..72c51bd387ce
--- /dev/null
+++ b/site/content/examples/13-classes/01-class-shorthand/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Shorthand class directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-classes/meta.json b/site/content/examples/13-classes/meta.json
new file mode 100644
index 000000000000..9c2b8a41f67b
--- /dev/null
+++ b/site/content/examples/13-classes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Classes"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-composition/00-slots/App.svelte b/site/content/examples/14-composition/00-slots/App.svelte
new file mode 100644
index 000000000000..cd0ebde93546
--- /dev/null
+++ b/site/content/examples/14-composition/00-slots/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/00-slots/Box.svelte b/site/content/examples/14-composition/00-slots/Box.svelte
new file mode 100644
index 000000000000..7ed13f386fe9
--- /dev/null
+++ b/site/content/examples/14-composition/00-slots/Box.svelte
@@ -0,0 +1,14 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
+
+<div class="box">
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/00-slots/meta.json b/site/content/examples/14-composition/00-slots/meta.json
new file mode 100644
index 000000000000..bd30c8935ac3
--- /dev/null
+++ b/site/content/examples/14-composition/00-slots/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Slots"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-composition/01-slot-fallbacks/App.svelte b/site/content/examples/14-composition/01-slot-fallbacks/App.svelte
new file mode 100644
index 000000000000..e30be6d1fc2e
--- /dev/null
+++ b/site/content/examples/14-composition/01-slot-fallbacks/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/01-slot-fallbacks/Box.svelte b/site/content/examples/14-composition/01-slot-fallbacks/Box.svelte
new file mode 100644
index 000000000000..66c580632cc2
--- /dev/null
+++ b/site/content/examples/14-composition/01-slot-fallbacks/Box.svelte
@@ -0,0 +1,16 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
+
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/01-slot-fallbacks/meta.json b/site/content/examples/14-composition/01-slot-fallbacks/meta.json
new file mode 100644
index 000000000000..26e7fcfb9253
--- /dev/null
+++ b/site/content/examples/14-composition/01-slot-fallbacks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Slot fallbacks"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-composition/02-named-slots/App.svelte b/site/content/examples/14-composition/02-named-slots/App.svelte
new file mode 100644
index 000000000000..80478093590a
--- /dev/null
+++ b/site/content/examples/14-composition/02-named-slots/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import ContactCard from './ContactCard.html';
+</script>
+
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/02-named-slots/ContactCard.svelte b/site/content/examples/14-composition/02-named-slots/ContactCard.svelte
new file mode 100644
index 000000000000..1acf2909430f
--- /dev/null
+++ b/site/content/examples/14-composition/02-named-slots/ContactCard.svelte
@@ -0,0 +1,47 @@
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 0 no-repeat;
+		background-size: 20px 20px;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address { background-image: url(tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(tutorial/icons/email.svg) }
+	.missing { color: #999 }
+</style>
+
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/02-named-slots/meta.json b/site/content/examples/14-composition/02-named-slots/meta.json
new file mode 100644
index 000000000000..60b82e991c11
--- /dev/null
+++ b/site/content/examples/14-composition/02-named-slots/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Named slots"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-composition/03-slot-props/App.svelte b/site/content/examples/14-composition/03-slot-props/App.svelte
new file mode 100644
index 000000000000..36772a507749
--- /dev/null
+++ b/site/content/examples/14-composition/03-slot-props/App.svelte
@@ -0,0 +1,46 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/03-slot-props/Hoverable.svelte b/site/content/examples/14-composition/03-slot-props/Hoverable.svelte
new file mode 100644
index 000000000000..69f2fc8ef6d9
--- /dev/null
+++ b/site/content/examples/14-composition/03-slot-props/Hoverable.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/14-composition/03-slot-props/meta.json b/site/content/examples/14-composition/03-slot-props/meta.json
new file mode 100644
index 000000000000..74e2ff197c45
--- /dev/null
+++ b/site/content/examples/14-composition/03-slot-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Slot props"
+}
\ No newline at end of file
diff --git a/site/content/examples/modal-with-slot/App.svelte b/site/content/examples/14-composition/04-modal/App.svelte
similarity index 97%
rename from site/content/examples/modal-with-slot/App.svelte
rename to site/content/examples/14-composition/04-modal/App.svelte
index 665a89554e8e..ac9d441f52b9 100644
--- a/site/content/examples/modal-with-slot/App.svelte
+++ b/site/content/examples/14-composition/04-modal/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Modal from './Modal.svelte';
 
-	export let showModal;
+	let showModal = true;
 </script>
 
 {#if showModal}
diff --git a/site/content/examples/modal-with-slot/Modal.svelte b/site/content/examples/14-composition/04-modal/Modal.svelte
similarity index 100%
rename from site/content/examples/modal-with-slot/Modal.svelte
rename to site/content/examples/14-composition/04-modal/Modal.svelte
index 87f1b022990c..5ffa5989a41d 100644
--- a/site/content/examples/modal-with-slot/Modal.svelte
+++ b/site/content/examples/14-composition/04-modal/Modal.svelte
@@ -4,17 +4,6 @@
 	const dispatch = createEventDispatcher();
 </script>
 
-<div class='modal-background' on:click='{() => dispatch("close")}'></div>
-
-<div class='modal'>
-	<slot name='header'></slot>
-	<hr>
-	<slot></slot>
-	<hr>
-
-	<button on:click='{() => dispatch("close")}'>close modal</button>
-</div>
-
 <style>
 	.modal-background {
 		position: fixed;
@@ -43,3 +32,14 @@
 		display: block;
 	}
 </style>
+
+<div class='modal-background' on:click='{() => dispatch("close")}'></div>
+
+<div class='modal'>
+	<slot name='header'></slot>
+	<hr>
+	<slot></slot>
+	<hr>
+
+	<button on:click='{() => dispatch("close")}'>close modal</button>
+</div>
diff --git a/site/content/examples/14-composition/04-modal/meta.json b/site/content/examples/14-composition/04-modal/meta.json
new file mode 100644
index 000000000000..c39791fcf601
--- /dev/null
+++ b/site/content/examples/14-composition/04-modal/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Modal"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-composition/meta.json b/site/content/examples/14-composition/meta.json
new file mode 100644
index 000000000000..54cf2db82dfa
--- /dev/null
+++ b/site/content/examples/14-composition/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component composition"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-context/00-context-api/App.svelte b/site/content/examples/15-context/00-context-api/App.svelte
new file mode 100644
index 000000000000..ea1ba4c7ae7c
--- /dev/null
+++ b/site/content/examples/15-context/00-context-api/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Map from './Map.svelte';
+	import MapMarker from './MapMarker.svelte';
+</script>
+
+<Map lat={35} lon={-84} zoom={3.5}>
+	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping"/>
+	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
+	<MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
+	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
+	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
+	<MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
+</Map>
\ No newline at end of file
diff --git a/site/content/examples/15-context/00-context-api/Map.svelte b/site/content/examples/15-context/00-context-api/Map.svelte
new file mode 100644
index 000000000000..0282cbc31166
--- /dev/null
+++ b/site/content/examples/15-context/00-context-api/Map.svelte
@@ -0,0 +1,50 @@
+<script>
+	import { onMount, setContext } from 'svelte';
+	import { mapbox, key } from './mapbox.js';
+
+	setContext(key, {
+		getMap: () => map
+	});
+
+	export let lat;
+	export let lon;
+	export let zoom;
+
+	let container;
+	let map;
+
+	onMount(() => {
+		const link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
+
+		link.onload = () => {
+			map = new mapbox.Map({
+				container,
+				style: 'mapbox://styles/mapbox/streets-v9',
+				center: [lon, lat],
+				zoom
+			});
+		};
+
+		document.head.appendChild(link);
+
+		return () => {
+			map.remove();
+			link.parentNode.removeChild(link);
+		};
+	});
+</script>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+
+<div bind:this={container}>
+	{#if map}
+		<slot></slot>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/site/content/examples/15-context/00-context-api/MapMarker.svelte b/site/content/examples/15-context/00-context-api/MapMarker.svelte
new file mode 100644
index 000000000000..c9366525077f
--- /dev/null
+++ b/site/content/examples/15-context/00-context-api/MapMarker.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { getContext } from 'svelte';
+	import { mapbox, key } from './mapbox.js';
+
+	const { getMap } = getContext(key);
+	const map = getMap();
+
+	export let lat;
+	export let lon;
+	export let label;
+
+	const popup = new mapbox.Popup({ offset: 25 })
+		.setText(label);
+
+	const marker = new mapbox.Marker()
+		.setLngLat([lon, lat])
+		.setPopup(popup)
+		.addTo(map);
+</script>
\ No newline at end of file
diff --git a/site/content/examples/15-context/00-context-api/mapbox.js b/site/content/examples/15-context/00-context-api/mapbox.js
new file mode 100644
index 000000000000..55b4200038a4
--- /dev/null
+++ b/site/content/examples/15-context/00-context-api/mapbox.js
@@ -0,0 +1,8 @@
+import mapbox from 'mapbox-gl';
+
+// https://docs.mapbox.com/help/glossary/access-token/
+mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
+
+const key = {};
+
+export { mapbox, key };
\ No newline at end of file
diff --git a/site/content/examples/15-context/00-context-api/meta.json b/site/content/examples/15-context/00-context-api/meta.json
new file mode 100644
index 000000000000..2601c87cae0e
--- /dev/null
+++ b/site/content/examples/15-context/00-context-api/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "setContext and getContext"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-context/meta.json b/site/content/examples/15-context/meta.json
new file mode 100644
index 000000000000..d3bd862676a2
--- /dev/null
+++ b/site/content/examples/15-context/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Context API"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/00-svelte-self/App.svelte b/site/content/examples/16-special-elements/00-svelte-self/App.svelte
new file mode 100644
index 000000000000..ff02fa6a42f9
--- /dev/null
+++ b/site/content/examples/16-special-elements/00-svelte-self/App.svelte
@@ -0,0 +1,41 @@
+<script>
+	import Folder from './Folder.svelte';
+
+	let root = [
+		{
+			type: 'folder',
+			name: 'Important work stuff',
+			files: [
+				{ type: 'file', name: 'quarterly-results.xlsx' }
+			]
+		},
+		{
+			type: 'folder',
+			name: 'Animal GIFs',
+			files: [
+				{
+					type: 'folder',
+					name: 'Dogs',
+					files: [
+						{ type: 'file', name: 'treadmill.gif' },
+						{ type: 'file', name: 'rope-jumping.gif' }
+					]
+				},
+				{
+					type: 'folder',
+					name: 'Goats',
+					files: [
+						{ type: 'file', name: 'parkour.gif' },
+						{ type: 'file', name: 'rampage.gif' }
+					]
+				},
+				{ type: 'file', name: 'cat-roomba.gif' },
+				{ type: 'file', name: 'duck-shuffle.gif' },
+				{ type: 'file', name: 'monkey-on-a-pig.gif' }
+			]
+		},
+		{ type: 'file', name: 'TODO.md' }
+	];
+</script>
+
+<Folder name="Home" files={root} expanded/>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/00-svelte-self/File.svelte b/site/content/examples/16-special-elements/00-svelte-self/File.svelte
new file mode 100644
index 000000000000..e34686101a82
--- /dev/null
+++ b/site/content/examples/16-special-elements/00-svelte-self/File.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let name;
+	$: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: 0 0.1em no-repeat;
+		background-size: 1em 1em;
+	}
+</style>
+
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/16-special-elements/00-svelte-self/Folder.svelte
new file mode 100644
index 000000000000..c25bb2a93dfe
--- /dev/null
+++ b/site/content/examples/16-special-elements/00-svelte-self/Folder.svelte
@@ -0,0 +1,52 @@
+<script>
+	import File from './File.svelte';
+
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background-size: 1em 1em;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.expanded {
+		background-image: url(tutorial/icons/folder-open.svg);
+	}
+
+	ul {
+		padding: 0.2em 0 0 0.5em;
+		margin: 0 0 0 0.5em;
+		list-style: none;
+		border-left: 1px solid #eee;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+</style>
+
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/00-svelte-self/meta.json b/site/content/examples/16-special-elements/00-svelte-self/meta.json
new file mode 100644
index 000000000000..14485d7cee00
--- /dev/null
+++ b/site/content/examples/16-special-elements/00-svelte-self/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:self>"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/01-svelte-component/App.svelte b/site/content/examples/16-special-elements/01-svelte-component/App.svelte
new file mode 100644
index 000000000000..a510fa8ad8b5
--- /dev/null
+++ b/site/content/examples/16-special-elements/01-svelte-component/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	import RedThing from './RedThing.svelte';
+	import GreenThing from './GreenThing.svelte';
+	import BlueThing from './BlueThing.svelte';
+
+	const options = [
+		{ color: 'red',   component: RedThing   },
+		{ color: 'green', component: GreenThing },
+		{ color: 'blue',  component: BlueThing  },
+	];
+
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option.color}</option>
+	{/each}
+</select>
+
+<svelte:component this={selected.component}/>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte b/site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte
new file mode 100644
index 000000000000..f9130d9d653f
--- /dev/null
+++ b/site/content/examples/16-special-elements/01-svelte-component/BlueThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: blue; }
+</style>
+
+<strong>blue thing</strong>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte b/site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte
new file mode 100644
index 000000000000..9cbee235d368
--- /dev/null
+++ b/site/content/examples/16-special-elements/01-svelte-component/GreenThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: green; }
+</style>
+
+<strong>green thing</strong>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte b/site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte
new file mode 100644
index 000000000000..42f5e4c6724d
--- /dev/null
+++ b/site/content/examples/16-special-elements/01-svelte-component/RedThing.svelte
@@ -0,0 +1,5 @@
+<style>
+	strong { color: red; }
+</style>
+
+<strong>red thing</strong>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/01-svelte-component/meta.json b/site/content/examples/16-special-elements/01-svelte-component/meta.json
new file mode 100644
index 000000000000..bb3675d5e5f3
--- /dev/null
+++ b/site/content/examples/16-special-elements/01-svelte-component/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:component>"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/02-svelte-window/App.svelte b/site/content/examples/16-special-elements/02-svelte-window/App.svelte
new file mode 100644
index 000000000000..845d666dffe0
--- /dev/null
+++ b/site/content/examples/16-special-elements/02-svelte-window/App.svelte
@@ -0,0 +1,42 @@
+<script>
+	let key;
+	let keyCode;
+
+	function handleKeydown(event) {
+		key = event.key;
+		keyCode = event.keyCode;
+	}
+</script>
+
+<style>
+	div {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	kbd {
+		background-color: #eee;
+		border-radius: 4px;
+		font-size: 6em;
+		padding: 0.2em 0.5em;
+		border-top: 5px solid rgba(255,255,255,0.5);
+		border-left: 5px solid rgba(255,255,255,0.5);
+		border-right: 5px solid rgba(0,0,0,0.2);
+		border-bottom: 5px solid rgba(0,0,0,0.2);
+		color: #555;
+	}
+</style>
+
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/02-svelte-window/meta.json b/site/content/examples/16-special-elements/02-svelte-window/meta.json
new file mode 100644
index 000000000000..18357e9ef94c
--- /dev/null
+++ b/site/content/examples/16-special-elements/02-svelte-window/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:window>"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte b/site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte
new file mode 100644
index 000000000000..3dbfd43f218e
--- /dev/null
+++ b/site/content/examples/16-special-elements/03-svelte-window-bindings/App.svelte
@@ -0,0 +1,88 @@
+<script>
+	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+	let y;
+</script>
+
+<svelte:window bind:scrollY={y}/>
+
+<a class="parallax-container" href="https://www.firewatchgame.com">
+	{#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer}
+		<img
+			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
+			alt="parallax layer {layer}"
+		>
+	{/each}
+</a>
+
+<div class="text">
+	<span style="opacity: {1 - Math.max(0, y / 40)}">
+		scroll down
+	</span>
+
+	<div class="foreground">
+		You have scrolled {y} pixels
+	</div>
+</div>
+
+<style>
+	.parallax-container {
+		position: fixed;
+		width: 2400px;
+		height: 712px;
+		left: 50%;
+		transform: translate(-50%,0);
+	}
+
+	.parallax-container img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		will-change: transform;
+	}
+
+	.parallax-container img:last-child::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgb(45,10,13);
+	}
+
+	.text {
+		position: relative;
+		width: 100%;
+		height: 300vh;
+		color: rgb(220,113,43);
+		text-align: center;
+		padding: 4em 0.5em 0.5em 0.5em;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	span {
+		display: block;
+		font-size: 1em;
+		text-transform: uppercase;
+		will-change: transform, opacity;
+	}
+
+	.foreground {
+		position: absolute;
+		top: 711px;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 712px);
+		background-color: rgb(32,0,1);
+		color: white;
+		padding: 50vh 0 0 0;
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: rgb(253, 174, 51);
+	}
+</style>
diff --git a/site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json b/site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json
new file mode 100644
index 000000000000..9903a804bbf9
--- /dev/null
+++ b/site/content/examples/16-special-elements/03-svelte-window-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:window> bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/04-svelte-body/App.svelte b/site/content/examples/16-special-elements/04-svelte-body/App.svelte
new file mode 100644
index 000000000000..ac946962ebe7
--- /dev/null
+++ b/site/content/examples/16-special-elements/04-svelte-body/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	let hereKitty = false;
+
+	const handleMouseenter = () => hereKitty = true;
+	const handleMouseleave = () => hereKitty = false;
+</script>
+
+<style>
+	img {
+		position: absolute;
+		left: 0;
+		bottom: -60px;
+		transform: translate(-80%, 0) rotate(-30deg);
+		transform-origin: 100% 100%;
+		transition: transform 0.4s;
+	}
+
+	.curious {
+		transform: translate(-15%, 0) rotate(0deg);
+	}
+
+	:global(body) {
+		overflow: hidden;
+	}
+</style>
+
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="tutorial/kitten.png"
+>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/04-svelte-body/meta.json b/site/content/examples/16-special-elements/04-svelte-body/meta.json
new file mode 100644
index 000000000000..a140d2c16854
--- /dev/null
+++ b/site/content/examples/16-special-elements/04-svelte-body/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:body>"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/05-svelte-head/App.svelte b/site/content/examples/16-special-elements/05-svelte-head/App.svelte
new file mode 100644
index 000000000000..38089c9fdd30
--- /dev/null
+++ b/site/content/examples/16-special-elements/05-svelte-head/App.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<link rel="stylesheet" href="tutorial/dark-theme.css">
+</svelte:head>
+
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/05-svelte-head/meta.json b/site/content/examples/16-special-elements/05-svelte-head/meta.json
new file mode 100644
index 000000000000..d35a752d152d
--- /dev/null
+++ b/site/content/examples/16-special-elements/05-svelte-head/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:head>"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/06-svelte-options/App.svelte b/site/content/examples/16-special-elements/06-svelte-options/App.svelte
new file mode 100644
index 000000000000..e0051449eee1
--- /dev/null
+++ b/site/content/examples/16-special-elements/06-svelte-options/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Square from './Square.svelte';
+</script>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+
+<svg viewBox="0 0 100 100">
+	<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
+</svg>
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/06-svelte-options/Square.svelte b/site/content/examples/16-special-elements/06-svelte-options/Square.svelte
new file mode 100644
index 000000000000..38f26d1dbacb
--- /dev/null
+++ b/site/content/examples/16-special-elements/06-svelte-options/Square.svelte
@@ -0,0 +1,15 @@
+<svelte:options namespace="svg"/>
+
+<script>
+	export let cx;
+	export let cy;
+	export let size;
+	export let style;
+
+	$: x1 = cx - size / 2;
+	$: y1 = cy - size / 2;
+	$: x2 = x1 + size;
+	$: y2 = y1 + size;
+</script>
+
+<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>
diff --git a/site/content/examples/16-special-elements/06-svelte-options/meta.json b/site/content/examples/16-special-elements/06-svelte-options/meta.json
new file mode 100644
index 000000000000..242c00685069
--- /dev/null
+++ b/site/content/examples/16-special-elements/06-svelte-options/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:options>"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-special-elements/meta.json b/site/content/examples/16-special-elements/meta.json
new file mode 100644
index 000000000000..2718c14b5984
--- /dev/null
+++ b/site/content/examples/16-special-elements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Special elements"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-module-context/00-sharing-code/App.svelte b/site/content/examples/17-module-context/00-sharing-code/App.svelte
new file mode 100644
index 000000000000..3c0133350a4f
--- /dev/null
+++ b/site/content/examples/17-module-context/00-sharing-code/App.svelte
@@ -0,0 +1,43 @@
+<script>
+	import AudioPlayer from './AudioPlayer.svelte';
+</script>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="tutorial/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="tutorial/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="tutorial/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="tutorial/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="tutorial/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/examples/17-module-context/00-sharing-code/AudioPlayer.svelte b/site/content/examples/17-module-context/00-sharing-code/AudioPlayer.svelte
new file mode 100644
index 000000000000..27dbe1993ba2
--- /dev/null
+++ b/site/content/examples/17-module-context/00-sharing-code/AudioPlayer.svelte
@@ -0,0 +1,46 @@
+<script context="module">
+	const elements = new Set();
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	onMount(() => {
+		elements.add(audio);
+		return () => elements.delete(audio);
+	});
+
+	function stopOthers() {
+		elements.forEach(element => {
+			if (element !== audio) element.pause();
+		});
+	}
+</script>
+
+<style>
+	article { margin: 0 0 1em 0; max-width: 800px }
+	h2, p { margin: 0 0 0.3em 0; }
+	audio { width: 100%; margin: 0.5em 0 1em 0; }
+	.playing { color: #ff3e00; }
+</style>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
\ No newline at end of file
diff --git a/site/content/examples/17-module-context/00-sharing-code/meta.json b/site/content/examples/17-module-context/00-sharing-code/meta.json
new file mode 100644
index 000000000000..15c3725377e0
--- /dev/null
+++ b/site/content/examples/17-module-context/00-sharing-code/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Sharing code"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-module-context/01-module-exports/App.svelte b/site/content/examples/17-module-context/01-module-exports/App.svelte
new file mode 100644
index 000000000000..cd5ab44b211f
--- /dev/null
+++ b/site/content/examples/17-module-context/01-module-exports/App.svelte
@@ -0,0 +1,47 @@
+<script>
+	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
+</script>
+
+<button on:click={stopAll}>
+	stop all audio
+</button>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="tutorial/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="tutorial/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="tutorial/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="tutorial/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="tutorial/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte b/site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte
new file mode 100644
index 000000000000..4e3d191dbf69
--- /dev/null
+++ b/site/content/examples/17-module-context/01-module-exports/AudioPlayer.svelte
@@ -0,0 +1,52 @@
+<script context="module">
+	const elements = new Set();
+
+	export function stopAll() {
+		elements.forEach(element => {
+			element.pause();
+		});
+	}
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	onMount(() => {
+		elements.add(audio);
+		return () => elements.delete(audio);
+	});
+
+	function stopOthers() {
+		elements.forEach(element => {
+			if (element !== audio) element.pause();
+		});
+	}
+</script>
+
+<style>
+	article { margin: 0 0 1em 0; max-width: 800px }
+	h2, p { margin: 0 0 0.3em 0; }
+	audio { width: 100%; margin: 0.5em 0 1em 0; }
+	.playing { color: #ff3e00; }
+</style>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
\ No newline at end of file
diff --git a/site/content/examples/17-module-context/01-module-exports/meta.json b/site/content/examples/17-module-context/01-module-exports/meta.json
new file mode 100644
index 000000000000..82be49d1c75f
--- /dev/null
+++ b/site/content/examples/17-module-context/01-module-exports/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Exports"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-module-context/meta.json b/site/content/examples/17-module-context/meta.json
new file mode 100644
index 000000000000..1a8720e2ce51
--- /dev/null
+++ b/site/content/examples/17-module-context/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Module context"
+}
\ No newline at end of file
diff --git a/site/content/examples/18-debugging/00-debug/App.svelte b/site/content/examples/18-debugging/00-debug/App.svelte
new file mode 100644
index 000000000000..1b91ac740b72
--- /dev/null
+++ b/site/content/examples/18-debugging/00-debug/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+<input bind:value={user.firstname}>
+<input bind:value={user.lastname}>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
diff --git a/site/content/examples/18-debugging/00-debug/meta.json b/site/content/examples/18-debugging/00-debug/meta.json
new file mode 100644
index 000000000000..44ad7690243c
--- /dev/null
+++ b/site/content/examples/18-debugging/00-debug/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The @debug tag"
+}
\ No newline at end of file
diff --git a/site/content/examples/18-debugging/meta.json b/site/content/examples/18-debugging/meta.json
new file mode 100644
index 000000000000..5eeed281d38b
--- /dev/null
+++ b/site/content/examples/18-debugging/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Debugging"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-counter/App.svelte b/site/content/examples/19-7guis/01-7guis-counter/App.svelte
similarity index 80%
rename from site/content/examples/7guis-counter/App.svelte
rename to site/content/examples/19-7guis/01-7guis-counter/App.svelte
index 385a3c97499c..11c5993901da 100644
--- a/site/content/examples/7guis-counter/App.svelte
+++ b/site/content/examples/19-7guis/01-7guis-counter/App.svelte
@@ -1,3 +1,7 @@
+<script>
+	let count = 0;
+</script>
+
 <!-- https://github.com/eugenkiss/7guis/wiki#counter -->
 <input type=number bind:value={count}>
 <button on:click="{() => count += 1}">count</button>
\ No newline at end of file
diff --git a/site/content/examples/19-7guis/01-7guis-counter/meta.json b/site/content/examples/19-7guis/01-7guis-counter/meta.json
new file mode 100644
index 000000000000..a3c3ba33c2b4
--- /dev/null
+++ b/site/content/examples/19-7guis/01-7guis-counter/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Counter"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-temperature/App.svelte b/site/content/examples/19-7guis/02-7guis-temperature/App.svelte
similarity index 100%
rename from site/content/examples/7guis-temperature/App.svelte
rename to site/content/examples/19-7guis/02-7guis-temperature/App.svelte
diff --git a/site/content/examples/19-7guis/02-7guis-temperature/meta.json b/site/content/examples/19-7guis/02-7guis-temperature/meta.json
new file mode 100644
index 000000000000..3a578f388717
--- /dev/null
+++ b/site/content/examples/19-7guis/02-7guis-temperature/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Temperature Converter"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-flight-booker/App.svelte b/site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte
similarity index 100%
rename from site/content/examples/7guis-flight-booker/App.svelte
rename to site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte
diff --git a/site/content/examples/19-7guis/03-7guis-flight-booker/meta.json b/site/content/examples/19-7guis/03-7guis-flight-booker/meta.json
new file mode 100644
index 000000000000..8f546a740cfa
--- /dev/null
+++ b/site/content/examples/19-7guis/03-7guis-flight-booker/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Flight booker"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-timer/App.svelte b/site/content/examples/19-7guis/04-7guis-timer/App.svelte
similarity index 100%
rename from site/content/examples/7guis-timer/App.svelte
rename to site/content/examples/19-7guis/04-7guis-timer/App.svelte
diff --git a/site/content/examples/19-7guis/04-7guis-timer/meta.json b/site/content/examples/19-7guis/04-7guis-timer/meta.json
new file mode 100644
index 000000000000..516b8bc3c265
--- /dev/null
+++ b/site/content/examples/19-7guis/04-7guis-timer/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Timer"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-crud/App.svelte b/site/content/examples/19-7guis/05-7guis-crud/App.svelte
similarity index 91%
rename from site/content/examples/7guis-crud/App.svelte
rename to site/content/examples/19-7guis/05-7guis-crud/App.svelte
index 388a2f4ea3a7..ed53430eff40 100644
--- a/site/content/examples/7guis-crud/App.svelte
+++ b/site/content/examples/19-7guis/05-7guis-crud/App.svelte
@@ -1,7 +1,20 @@
 <!-- https://eugenkiss.github.io/7guis/tasks#crud -->
 
 <script>
-	export let people = [];
+	let people = [
+		{
+			first: 'Hans',
+			last: 'Emil'
+		},
+		{
+			first: 'Max',
+			last: 'Mustermann'
+		},
+		{
+			first: 'Roman',
+			last: 'Tisch'
+		}
+	];
 
 	let prefix = '';
 	let first = '';
diff --git a/site/content/examples/19-7guis/05-7guis-crud/meta.json b/site/content/examples/19-7guis/05-7guis-crud/meta.json
new file mode 100644
index 000000000000..6f617938ba6f
--- /dev/null
+++ b/site/content/examples/19-7guis/05-7guis-crud/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "CRUD"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-circles/App.svelte b/site/content/examples/19-7guis/06-7guis-circles/App.svelte
similarity index 100%
rename from site/content/examples/7guis-circles/App.svelte
rename to site/content/examples/19-7guis/06-7guis-circles/App.svelte
diff --git a/site/content/examples/19-7guis/06-7guis-circles/meta.json b/site/content/examples/19-7guis/06-7guis-circles/meta.json
new file mode 100644
index 000000000000..03a82d6b6f28
--- /dev/null
+++ b/site/content/examples/19-7guis/06-7guis-circles/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Circle Drawer"
+}
\ No newline at end of file
diff --git a/site/content/examples/19-7guis/meta.json b/site/content/examples/19-7guis/meta.json
new file mode 100644
index 000000000000..61439f7f4d97
--- /dev/null
+++ b/site/content/examples/19-7guis/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "7GUIs"
+}
\ No newline at end of file
diff --git a/site/content/examples/hacker-news/App.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
similarity index 100%
rename from site/content/examples/hacker-news/App.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/App.svelte
diff --git a/site/content/examples/hacker-news/Comment.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
similarity index 100%
rename from site/content/examples/hacker-news/Comment.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/Comment.svelte
diff --git a/site/content/examples/hacker-news/Item.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
similarity index 100%
rename from site/content/examples/hacker-news/Item.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/Item.svelte
diff --git a/site/content/examples/hacker-news/List.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
similarity index 100%
rename from site/content/examples/hacker-news/List.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/List.svelte
diff --git a/site/content/examples/hacker-news/Summary.svelte b/site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte
similarity index 100%
rename from site/content/examples/hacker-news/Summary.svelte
rename to site/content/examples/20-miscellaneous/01-hacker-news/Summary.svelte
diff --git a/site/content/examples/20-miscellaneous/01-hacker-news/meta.json b/site/content/examples/20-miscellaneous/01-hacker-news/meta.json
new file mode 100644
index 000000000000..becbac4ea740
--- /dev/null
+++ b/site/content/examples/20-miscellaneous/01-hacker-news/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Hacker News"
+}
\ No newline at end of file
diff --git a/site/content/examples/immutable/App.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
similarity index 71%
rename from site/content/examples/immutable/App.svelte
rename to site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
index 8cfc14aacb05..e81d7816770f 100644
--- a/site/content/examples/immutable/App.svelte
+++ b/site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
@@ -4,7 +4,11 @@
 	import ImmutableTodo from './ImmutableTodo.svelte';
 	import MutableTodo from './MutableTodo.svelte';
 
-	export let todos;
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
 
 	function toggle(id) {
 		todos = todos.map(todo => {
@@ -26,7 +30,7 @@
 <h2>Immutable</h2>
 {#each todos as todo}
 	<label on:click="{() => toggle(todo.id)}">
-		<span>{todo.done ? "😎": "☹️"}</span>
+		<span>{todo.done ? "😎": "🙁"}</span>
 		<ImmutableTodo {todo}/>
 	</label>
 {/each}
@@ -34,7 +38,7 @@
 <h2>Mutable</h2>
 {#each todos as todo}
 	<label on:click="{() => toggle(todo.id)}">
-		<span>{todo.done ? "😎": "☹️"}</span>
+		<span>{todo.done ? "😎": "🙁"}</span>
 		<MutableTodo {todo}/>
 	</label>
 {/each}
diff --git a/site/content/examples/immutable/ImmutableTodo.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
similarity index 100%
rename from site/content/examples/immutable/ImmutableTodo.svelte
rename to site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
diff --git a/site/content/examples/immutable/MutableTodo.svelte b/site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
similarity index 100%
rename from site/content/examples/immutable/MutableTodo.svelte
rename to site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
diff --git a/site/content/examples/immutable/flash.js b/site/content/examples/20-miscellaneous/02-immutable-data/flash.js
similarity index 100%
rename from site/content/examples/immutable/flash.js
rename to site/content/examples/20-miscellaneous/02-immutable-data/flash.js
diff --git a/site/content/examples/20-miscellaneous/02-immutable-data/meta.json b/site/content/examples/20-miscellaneous/02-immutable-data/meta.json
new file mode 100644
index 000000000000..68e56ee7fa6f
--- /dev/null
+++ b/site/content/examples/20-miscellaneous/02-immutable-data/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Immutable data"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-miscellaneous/meta.json b/site/content/examples/20-miscellaneous/meta.json
new file mode 100644
index 000000000000..116634ec42b4
--- /dev/null
+++ b/site/content/examples/20-miscellaneous/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Miscellaneous"
+}
\ No newline at end of file
diff --git a/site/content/examples/7guis-circles/data.json5 b/site/content/examples/7guis-circles/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/7guis-circles/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/7guis-counter/data.json5 b/site/content/examples/7guis-counter/data.json5
deleted file mode 100644
index f30dc46c1118..000000000000
--- a/site/content/examples/7guis-counter/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "count": 0
-}
\ No newline at end of file
diff --git a/site/content/examples/7guis-crud/data.json5 b/site/content/examples/7guis-crud/data.json5
deleted file mode 100644
index c3e6dc3e6797..000000000000
--- a/site/content/examples/7guis-crud/data.json5
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "people": [
-    {
-      "first": "Hans",
-      "last": "Emil"
-    },
-    {
-      "first": "Max",
-      "last": "Mustermann"
-    },
-    {
-      "first": "Roman",
-      "last": "Tisch"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/site/content/examples/7guis-flight-booker/data.json5 b/site/content/examples/7guis-flight-booker/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/7guis-flight-booker/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/7guis-temperature/data.json5 b/site/content/examples/7guis-temperature/data.json5
deleted file mode 100644
index 21950c8dfbf6..000000000000
--- a/site/content/examples/7guis-temperature/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "celsius": 0
-}
\ No newline at end of file
diff --git a/site/content/examples/7guis-timer/data.json5 b/site/content/examples/7guis-timer/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/7guis-timer/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/await-block/App.svelte b/site/content/examples/await-block/App.svelte
deleted file mode 100644
index dce3340dde96..000000000000
--- a/site/content/examples/await-block/App.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-	let promise;
-
-	function findAnswer() {
-		promise = new Promise(fulfil => {
-			const delay = 1000 + Math.random() * 3000;
-			setTimeout(() => fulfil(42), delay);
-		});
-	}
-</script>
-
-<button on:click='{findAnswer}'>find the answer</button>
-
-{#if promise}
-	{#await promise}
-		<p>wait for it...</p>
-	{:then answer}
-		<p>the answer is {answer}!</p>
-	{:catch error}
-		<p>well that's odd</p>
-	{/await}
-{/if}
diff --git a/site/content/examples/await-block/data.json5 b/site/content/examples/await-block/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/await-block/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/bar-chart/data.json5 b/site/content/examples/bar-chart/data.json5
deleted file mode 100644
index 389c90a7d170..000000000000
--- a/site/content/examples/bar-chart/data.json5
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "points": [
-    {
-      "year": 1990,
-      "birthrate": 16.7
-    },
-    {
-      "year": 1995,
-      "birthrate": 14.6
-    },
-    {
-      "year": 2000,
-      "birthrate": 14.4
-    },
-    {
-      "year": 2005,
-      "birthrate": 14
-    },
-    {
-      "year": 2010,
-      "birthrate": 13
-    },
-    {
-      "year": 2015,
-      "birthrate": 12.4
-    }
-  ]
-}
\ No newline at end of file
diff --git a/site/content/examples/binding-input-checkbox-group/App.svelte b/site/content/examples/binding-input-checkbox-group/App.svelte
deleted file mode 100644
index 617e71e17d96..000000000000
--- a/site/content/examples/binding-input-checkbox-group/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<label>
-	<input type=checkbox bind:group={selected} value="red">
-	red
-</label>
-
-<label>
-	<input type=checkbox bind:group={selected} value="green">
-	green
-</label>
-
-<label>
-	<input type=checkbox bind:group={selected} value="blue">
-	blue
-</label>
-
-<p>{selected.join(', ') || 'nothing'} selected</p>
\ No newline at end of file
diff --git a/site/content/examples/binding-input-checkbox-group/data.json5 b/site/content/examples/binding-input-checkbox-group/data.json5
deleted file mode 100644
index 2285e3abfa82..000000000000
--- a/site/content/examples/binding-input-checkbox-group/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "selected": ["blue"]
-}
\ No newline at end of file
diff --git a/site/content/examples/binding-input-checkbox/App.svelte b/site/content/examples/binding-input-checkbox/App.svelte
deleted file mode 100644
index b8facdd53b58..000000000000
--- a/site/content/examples/binding-input-checkbox/App.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-{#each todos as todo}
-	<div class="todo {todo.done ? 'done': ''}">
-		<input type=checkbox bind:checked={todo.done}>
-		<input type=text bind:value={todo.description}>
-	</div>
-{/each}
-
-<style>
-	input[type="text"] {
-		width: 20em;
-		max-width: calc(100% - 2em);
-	}
-
-	.done {
-		opacity: 0.6;
-	}
-</style>
\ No newline at end of file
diff --git a/site/content/examples/binding-input-checkbox/data.json5 b/site/content/examples/binding-input-checkbox/data.json5
deleted file mode 100644
index 4afee559a5d0..000000000000
--- a/site/content/examples/binding-input-checkbox/data.json5
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "todos": [
-    {
-      "description": "Buy some milk",
-      "done": true
-    },
-    {
-      "description": "Do the laundry",
-      "done": true
-    },
-    {
-      "description": "Find life's true purpose",
-      "done": false
-    }
-  ]
-}
\ No newline at end of file
diff --git a/site/content/examples/binding-input-numeric/App.svelte b/site/content/examples/binding-input-numeric/App.svelte
deleted file mode 100644
index 566c16006c78..000000000000
--- a/site/content/examples/binding-input-numeric/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<!-- number and range inputs are bound to numeric values -->
-<input bind:value={a} type=number min=0 max=10>
-<input bind:value={b} type=range min=0 max=10>
-
-<p>{a} * {b} = {a * b}</p>
-
-<style>
-	input {
-		display: block;
-		width: 10em
-	}
-</style>
\ No newline at end of file
diff --git a/site/content/examples/binding-input-numeric/data.json5 b/site/content/examples/binding-input-numeric/data.json5
deleted file mode 100644
index 1aa99a76cda8..000000000000
--- a/site/content/examples/binding-input-numeric/data.json5
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "a": 5,
-  "b": 5
-}
\ No newline at end of file
diff --git a/site/content/examples/binding-input-radio/App.svelte b/site/content/examples/binding-input-radio/App.svelte
deleted file mode 100644
index f83813754ff1..000000000000
--- a/site/content/examples/binding-input-radio/App.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<label>
-	<input type=radio bind:group={selected} value="red">
-	red
-</label>
-
-<label>
-	<input type=radio bind:group={selected} value="green">
-	green
-</label>
-
-<label>
-	<input type=radio bind:group={selected} value="blue">
-	blue
-</label>
-
-<p style="color: {selected};">selected {selected}</p>
\ No newline at end of file
diff --git a/site/content/examples/binding-input-radio/data.json5 b/site/content/examples/binding-input-radio/data.json5
deleted file mode 100644
index 961184190e4d..000000000000
--- a/site/content/examples/binding-input-radio/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "selected": "blue"
-}
\ No newline at end of file
diff --git a/site/content/examples/binding-input-text/data.json5 b/site/content/examples/binding-input-text/data.json5
deleted file mode 100644
index 393554903d00..000000000000
--- a/site/content/examples/binding-input-text/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "name": ""
-}
\ No newline at end of file
diff --git a/site/content/examples/binding-media-elements/App.svelte b/site/content/examples/binding-media-elements/App.svelte
deleted file mode 100644
index fdfb4573d49a..000000000000
--- a/site/content/examples/binding-media-elements/App.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-	let paused = true;
-	let t = 0;
-	let d;
-	let bg;
-
-	$: icon = `https://icon.now.sh/${paused ? 'play' : 'pause'}_circle_filled`;
-
-	$: {
-		const p = d ? t / d : 0;
-		const h = 90 + 90 * p;
-		const l = 10 + p * 30;
-		bg = `hsl(${h},50%,${l}%)`;
-	}
-
-	function pad(num) {
-		return num < 10 ? '0' + num : num;
-	}
-
-	const format = time => {
-		if (isNaN(time)) return '--:--.-';
-		const minutes = Math.floor(time / 60);
-		const seconds = (time % 60).toFixed(1);
-
-		return minutes + ':' + pad(seconds)
-	};
-
-	function seek(event) {
-		if (event.buttons === 1) {
-			event.preventDefault();
-			const p = event.clientX / window.innerWidth;
-			t = p * d;
-		}
-	}
-</script>
-
-<svelte:window on:click={seek} on:mousemove={seek}/>
-
-<audio bind:currentTime={t} bind:duration={d} bind:paused>
-	<source type="audio/mp3" src="https://deepnote.surge.sh/deepnote.mp3">
-</audio>
-
-<p>THX Deep Note</p>
-<div class="status" on:click="{event => event.stopPropagation()}">
-	<img alt="play/pause button" on:click="{() => paused = !paused}" src="{icon}/333333">
-	<span class="elapsed">{format(t)}</span>
-	<span class="duration">{format(d)}</span>
-</div>
-
-<div class="progress" style="width: {d ? 100 * t/d : 0}%; background: {bg};">
-	<p>THX Deep Note</p>
-	<div class="status" on:click="{event => event.stopPropagation()}">
-		<img alt="play/pause button" src="{icon}/ffffff">
-		<span class="elapsed">{format(t)}</span>
-		<span class="duration">{format(d)}</span>
-	</div>
-</div>
-
-<style>
-	.progress {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		color: white;
-		overflow: hidden;
-		pointer-events: none;
-	}
-
-	p {
-		position: absolute;
-		left: 1em;
-		top: 1em;
-		width: 20em;
-	}
-
-	.status {
-		position: absolute;
-		bottom: 1em;
-		left: 1em;
-		width: calc(100vw - 2em);
-	}
-
-	img {
-		position: absolute;
-		left: 0;
-		bottom: 2em;
-		width: 3em;
-		cursor: pointer;
-	}
-
-	.elapsed { float: left; }
-	.duration { float: right; }
-</style>
diff --git a/site/content/examples/binding-media-elements/data.json5 b/site/content/examples/binding-media-elements/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/binding-media-elements/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/binding-textarea/App.svelte b/site/content/examples/binding-textarea/App.svelte
deleted file mode 100644
index 4fd46f262566..000000000000
--- a/site/content/examples/binding-textarea/App.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-	import marked from 'marked';
-
-	export let markdown;
-</script>
-
-<textarea bind:value={markdown} resize="none"></textarea>
-<div class="output">{@html marked(markdown)}</div>
-
-<style>
-	textarea {
-		width: 100%;
-		height: 50%;
-	}
-</style>
\ No newline at end of file
diff --git a/site/content/examples/binding-textarea/data.json5 b/site/content/examples/binding-textarea/data.json5
deleted file mode 100644
index 12268060fbd0..000000000000
--- a/site/content/examples/binding-textarea/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "markdown": "# Markdown editor\n\nTODOs:\n\n* make a Svelte app\n* think of a third item for this list"
-}
\ No newline at end of file
diff --git a/site/content/examples/each-blocks/App.svelte b/site/content/examples/each-blocks/App.svelte
deleted file mode 100644
index b8ba07a5e92a..000000000000
--- a/site/content/examples/each-blocks/App.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<h1>Cats of YouTube</h1>
-
-<ul>
-	{#each cats as cat}
-		<li><a target="_blank" href={cat.video}>{cat.name}</a></li>
-	{/each}
-</ul>
\ No newline at end of file
diff --git a/site/content/examples/each-blocks/data.json5 b/site/content/examples/each-blocks/data.json5
deleted file mode 100644
index 41eff03354e4..000000000000
--- a/site/content/examples/each-blocks/data.json5
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "cats": [
-    {
-      "name": "Keyboard Cat",
-      "video": "https://www.youtube.com/watch?v=J---aiyznGQ"
-    },
-    {
-      "name": "Maru",
-      "video": "https://www.youtube.com/watch?v=z_AbfPXTKms"
-    },
-    {
-      "name": "Henri The Existential Cat",
-      "video": "https://www.youtube.com/watch?v=OUtn3pvWmpg"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/site/content/examples/hacker-news/data.json5 b/site/content/examples/hacker-news/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/hacker-news/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/hello-world/App.svelte b/site/content/examples/hello-world/App.svelte
deleted file mode 100644
index 70a9a95503ed..000000000000
--- a/site/content/examples/hello-world/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<h1>Hello {name}!</h1>
-
-<!--
-This is a Svelte component. Click 'JS output' in
-the output section to see compiled code.
-
-You can interact with this component via your
-browser's console - try running the following:
-
-    app.name = 'everybody';
-
-You can also update the name via the props
-editor on this page.
--->
\ No newline at end of file
diff --git a/site/content/examples/hello-world/data.json5 b/site/content/examples/hello-world/data.json5
deleted file mode 100644
index 3949aecc6a89..000000000000
--- a/site/content/examples/hello-world/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "name": "world"
-}
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-hello-world/App.svelte b/site/content/examples/homepage-demo-hello-world/App.svelte
deleted file mode 100644
index 543c6059c427..000000000000
--- a/site/content/examples/homepage-demo-hello-world/App.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-hello-world/data.json5 b/site/content/examples/homepage-demo-hello-world/data.json5
deleted file mode 100644
index 3949aecc6a89..000000000000
--- a/site/content/examples/homepage-demo-hello-world/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "name": "world"
-}
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-reactivity/data.json5 b/site/content/examples/homepage-demo-reactivity/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/homepage-demo-reactivity/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-scoped-styles/App.svelte b/site/content/examples/homepage-demo-scoped-styles/App.svelte
deleted file mode 100644
index b1fe0495a93d..000000000000
--- a/site/content/examples/homepage-demo-scoped-styles/App.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	import Foo from './Foo.svelte';
-</script>
-
-<style>
-	p {
-		font-weight: bold;
-	}
-</style>
-
-<p>this &lt;p&gt; is bold but not red</p>
-<Foo/>
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-scoped-styles/Foo.svelte b/site/content/examples/homepage-demo-scoped-styles/Foo.svelte
deleted file mode 100644
index eb1dd82f7fb4..000000000000
--- a/site/content/examples/homepage-demo-scoped-styles/Foo.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<style>
-	p {
-		color: red;
-	}
-</style>
-
-<p>this &lt;p&gt; is red but not bold</p>
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-scoped-styles/data.json5 b/site/content/examples/homepage-demo-scoped-styles/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/homepage-demo-scoped-styles/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/homepage-demo-transitions/data.json5 b/site/content/examples/homepage-demo-transitions/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/homepage-demo-transitions/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/if-blocks/App.svelte b/site/content/examples/if-blocks/App.svelte
deleted file mode 100644
index 57de21915969..000000000000
--- a/site/content/examples/if-blocks/App.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-{#if foo}
-	<p>foo!</p>
-{:else}
-	<p>not foo!</p>
-{/if}
\ No newline at end of file
diff --git a/site/content/examples/if-blocks/data.json5 b/site/content/examples/if-blocks/data.json5
deleted file mode 100644
index c803db47493a..000000000000
--- a/site/content/examples/if-blocks/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "foo": true
-}
\ No newline at end of file
diff --git a/site/content/examples/immutable/data.json5 b/site/content/examples/immutable/data.json5
deleted file mode 100644
index a0ed59d82bf7..000000000000
--- a/site/content/examples/immutable/data.json5
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-	todos: [
-		{ id: 1, done: true, text: "wash the car" },
-		{ id: 2, done: false, text: "take the dog for a walk" },
-		{ id: 3, done: false, text: "mow the lawn" }
-	]
-}
diff --git a/site/content/examples/line-chart/data.json5 b/site/content/examples/line-chart/data.json5
deleted file mode 100644
index 88e7f02f3512..000000000000
--- a/site/content/examples/line-chart/data.json5
+++ /dev/null
@@ -1,156 +0,0 @@
-{
-  "points": [
-    {
-      "x": 1979,
-      "y": 7.19
-    },
-    {
-      "x": 1980,
-      "y": 7.83
-    },
-    {
-      "x": 1981,
-      "y": 7.24
-    },
-    {
-      "x": 1982,
-      "y": 7.44
-    },
-    {
-      "x": 1983,
-      "y": 7.51
-    },
-    {
-      "x": 1984,
-      "y": 7.1
-    },
-    {
-      "x": 1985,
-      "y": 6.91
-    },
-    {
-      "x": 1986,
-      "y": 7.53
-    },
-    {
-      "x": 1987,
-      "y": 7.47
-    },
-    {
-      "x": 1988,
-      "y": 7.48
-    },
-    {
-      "x": 1989,
-      "y": 7.03
-    },
-    {
-      "x": 1990,
-      "y": 6.23
-    },
-    {
-      "x": 1991,
-      "y": 6.54
-    },
-    {
-      "x": 1992,
-      "y": 7.54
-    },
-    {
-      "x": 1993,
-      "y": 6.5
-    },
-    {
-      "x": 1994,
-      "y": 7.18
-    },
-    {
-      "x": 1995,
-      "y": 6.12
-    },
-    {
-      "x": 1996,
-      "y": 7.87
-    },
-    {
-      "x": 1997,
-      "y": 6.73
-    },
-    {
-      "x": 1998,
-      "y": 6.55
-    },
-    {
-      "x": 1999,
-      "y": 6.23
-    },
-    {
-      "x": 2000,
-      "y": 6.31
-    },
-    {
-      "x": 2001,
-      "y": 6.74
-    },
-    {
-      "x": 2002,
-      "y": 5.95
-    },
-    {
-      "x": 2003,
-      "y": 6.13
-    },
-    {
-      "x": 2004,
-      "y": 6.04
-    },
-    {
-      "x": 2005,
-      "y": 5.56
-    },
-    {
-      "x": 2006,
-      "y": 5.91
-    },
-    {
-      "x": 2007,
-      "y": 4.29
-    },
-    {
-      "x": 2008,
-      "y": 4.72
-    },
-    {
-      "x": 2009,
-      "y": 5.38
-    },
-    {
-      "x": 2010,
-      "y": 4.92
-    },
-    {
-      "x": 2011,
-      "y": 4.61
-    },
-    {
-      "x": 2012,
-      "y": 3.62
-    },
-    {
-      "x": 2013,
-      "y": 5.35
-    },
-    {
-      "x": 2014,
-      "y": 5.28
-    },
-    {
-      "x": 2015,
-      "y": 4.63
-    },
-    {
-      "x": 2016,
-      "y": 4.72
-    }
-  ]
-}
\ No newline at end of file
diff --git a/site/content/examples/manifest.json b/site/content/examples/manifest.json
deleted file mode 100644
index cc7b2f887bf4..000000000000
--- a/site/content/examples/manifest.json
+++ /dev/null
@@ -1,184 +0,0 @@
-[
-	{
-		"name": "Basics",
-		"examples": [
-			{
-				"slug": "hello-world",
-				"title": "Hello World!"
-			},
-			{
-				"slug": "if-blocks",
-				"title": "If blocks"
-			},
-			{
-				"slug": "each-blocks",
-				"title": "Each blocks"
-			},
-			{
-				"slug": "scoped-styles",
-				"title": "Scoped styles"
-			}
-		]
-	},
-	{
-		"name": "Two-way bindings",
-		"examples": [
-			{
-				"slug": "binding-input-text",
-				"title": "Text input"
-			},
-			{
-				"slug": "binding-input-numeric",
-				"title": "Numeric input"
-			},
-			{
-				"slug": "binding-textarea",
-				"title": "Textarea"
-			},
-			{
-				"slug": "binding-input-checkbox",
-				"title": "Checkbox input"
-			},
-			{
-				"slug": "binding-input-checkbox-group",
-				"title": "Checkbox input (grouped)"
-			},
-			{
-				"slug": "binding-input-radio",
-				"title": "Radio input"
-			},
-			{
-				"slug": "binding-media-elements",
-				"title": "Media elements"
-			}
-		]
-	},
-	{
-		"name": "Nested components",
-		"examples": [
-			{
-				"slug": "nested-components",
-				"title": "Nested components"
-			},
-			{
-				"slug": "modal-with-slot",
-				"title": "Modal with <slot>"
-			},
-			{
-				"slug": "self-references",
-				"title": "Self-references"
-			}
-		]
-	},
-	{
-		"name": "SVG and dataviz",
-		"examples": [
-			{
-				"slug": "svg-clock",
-				"title": "SVG Clock"
-			},
-			{
-				"slug": "line-chart",
-				"title": "Line/area chart"
-			},
-			{
-				"slug": "bar-chart",
-				"title": "Bar chart"
-			},
-			{
-				"slug": "scatterplot",
-				"title": "Scatterplot"
-			}
-		]
-	},
-	{
-		"name": "Transitions",
-		"examples": [
-			{
-				"slug": "transitions-fade",
-				"title": "Simple fade"
-			},
-			{
-				"slug": "transitions-fly",
-				"title": "Parameterised"
-			},
-			{
-				"slug": "transitions-in-out",
-				"title": "In and out"
-			},
-			{
-				"slug": "transitions-custom",
-				"title": "Custom CSS"
-			}
-		]
-	},
-	{
-		"name": "Motion",
-		"examples": [
-			{
-				"slug": "motion-spring",
-				"title": "Spring physics"
-			}
-		]
-	},
-	{
-		"name": "Async data",
-		"examples": [
-			{
-				"slug": "await-block",
-				"title": "Await block"
-			}
-		]
-	},
-	{
-		"name": "7guis",
-		"examples": [
-			{
-				"slug": "7guis-counter",
-				"title": "Counter"
-			},
-			{
-				"slug": "7guis-temperature",
-				"title": "Temperature converter"
-			},
-			{
-				"slug": "7guis-flight-booker",
-				"title": "Flight booker"
-			},
-			{
-				"slug": "7guis-timer",
-				"title": "Timer"
-			},
-			{
-				"slug": "7guis-crud",
-				"title": "CRUD"
-			},
-			{
-				"slug": "7guis-circles",
-				"title": "Circles"
-			}
-		]
-	},
-	{
-		"name": "<:Window>",
-		"examples": [
-			{
-				"slug": "parallax",
-				"title": "Parallax"
-			}
-		]
-	},
-	{
-		"name": "Miscellaneous",
-		"examples": [
-			{
-				"slug": "hacker-news",
-				"title": "Hacker News"
-			},
-			{
-				"slug": "immutable",
-				"title": "Immutable data"
-			}
-		]
-	}
-]
diff --git a/site/content/examples/modal-with-slot/data.json5 b/site/content/examples/modal-with-slot/data.json5
deleted file mode 100644
index 18cc32884c26..000000000000
--- a/site/content/examples/modal-with-slot/data.json5
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "showModal": true
-}
\ No newline at end of file
diff --git a/site/content/examples/nested-components/Nested.svelte b/site/content/examples/nested-components/Nested.svelte
deleted file mode 100644
index 74ee56a5ed5a..000000000000
--- a/site/content/examples/nested-components/Nested.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>And this is a nested component.</p>
\ No newline at end of file
diff --git a/site/content/examples/nested-components/data.json5 b/site/content/examples/nested-components/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/nested-components/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/parallax/App.svelte b/site/content/examples/parallax/App.svelte
deleted file mode 100644
index 38ffd716b5ad..000000000000
--- a/site/content/examples/parallax/App.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-	let sy;
-</script>
-
-<!-- this binds `sy` to the current value of `window.scrollY` -->
-<svelte:window bind:scrollY={sy}/>
-
-<!-- try changing the values that `sy` is multiplied by -
-     values closer to 0 appear further away -->
-<div class="parallax-container">
-	<img style="transform: translate(0,{-sy * 0.2}px)" src="https://www.firewatchgame.com/images/parallax/parallax0.png">
-	<img style="transform: translate(0,{-sy * 0.3}px)" src="https://www.firewatchgame.com/images/parallax/parallax1.png">
-	<img style="transform: translate(0,{-sy * 0.4}px)" src="https://www.firewatchgame.com/images/parallax/parallax3.png">
-	<img style="transform: translate(0,{-sy * 0.5}px)" src="https://www.firewatchgame.com/images/parallax/parallax5.png">
-	<img style="transform: translate(0,{-sy * 0.6}px)" src="https://www.firewatchgame.com/images/parallax/parallax7.png">
-</div>
-
-<div class="text">
-	<small style="
-		transform: translate(0,{-sy * 1.5}px);
-		opacity: {1 - Math.max( 0, sy / 80 )}
-	">(scroll down)</small>
-	<span>parallax has never been this easy</span>
-</div>
-
-<style>
-	.parallax-container {
-		position: fixed;
-		width: 2400px;
-		height: 712px;
-		left: 50%;
-		transform: translate(-50%,0);
-	}
-
-	.parallax-container img {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		will-change: transform;
-	}
-
-	.text {
-		position: relative;
-		width: 100%;
-		min-height: 100vh;
-		color: white;
-		text-align: center;
-		padding: 50vh 0.5em 0.5em 0.5em;
-		box-sizing: border-box;
-	}
-
-	.text::before {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		background: linear-gradient(to bottom, rgba(45,10,13,0) 60vh,rgba(45,10,13,1) 712px);
-	}
-
-	small {
-		display: block;
-		font-size: 4vw;
-		will-change: transform, opacity;
-	}
-
-	.text span {
-		font-size: 20vw;
-		position: relative;
-		z-index: 2;
-	}
-
-	:global(body) { margin: 0; padding: 0; }
-</style>
diff --git a/site/content/examples/parallax/data.json5 b/site/content/examples/parallax/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/parallax/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/scatterplot/data.json5 b/site/content/examples/scatterplot/data.json5
deleted file mode 100644
index 8d879e1edd6c..000000000000
--- a/site/content/examples/scatterplot/data.json5
+++ /dev/null
@@ -1,186 +0,0 @@
-{
-  "a": [
-    {
-      "x": 10,
-      "y": 8.04
-    },
-    {
-      "x": 8,
-      "y": 6.95
-    },
-    {
-      "x": 13,
-      "y": 7.58
-    },
-    {
-      "x": 9,
-      "y": 8.81
-    },
-    {
-      "x": 11,
-      "y": 8.33
-    },
-    {
-      "x": 14,
-      "y": 9.96
-    },
-    {
-      "x": 6,
-      "y": 7.24
-    },
-    {
-      "x": 4,
-      "y": 4.26
-    },
-    {
-      "x": 12,
-      "y": 10.84
-    },
-    {
-      "x": 7,
-      "y": 4.82
-    },
-    {
-      "x": 5,
-      "y": 5.68
-    }
-  ],
-  "b": [
-    {
-      "x": 10,
-      "y": 9.14
-    },
-    {
-      "x": 8,
-      "y": 8.14
-    },
-    {
-      "x": 13,
-      "y": 8.74
-    },
-    {
-      "x": 9,
-      "y": 8.77
-    },
-    {
-      "x": 11,
-      "y": 9.26
-    },
-    {
-      "x": 14,
-      "y": 8.1
-    },
-    {
-      "x": 6,
-      "y": 6.13
-    },
-    {
-      "x": 4,
-      "y": 3.1
-    },
-    {
-      "x": 12,
-      "y": 9.13
-    },
-    {
-      "x": 7,
-      "y": 7.26
-    },
-    {
-      "x": 5,
-      "y": 4.74
-    }
-  ],
-  "c": [
-    {
-      "x": 10,
-      "y": 7.46
-    },
-    {
-      "x": 8,
-      "y": 6.77
-    },
-    {
-      "x": 13,
-      "y": 12.74
-    },
-    {
-      "x": 9,
-      "y": 7.11
-    },
-    {
-      "x": 11,
-      "y": 7.81
-    },
-    {
-      "x": 14,
-      "y": 8.84
-    },
-    {
-      "x": 6,
-      "y": 6.08
-    },
-    {
-      "x": 4,
-      "y": 5.39
-    },
-    {
-      "x": 12,
-      "y": 8.15
-    },
-    {
-      "x": 7,
-      "y": 6.42
-    },
-    {
-      "x": 5,
-      "y": 5.73
-    }
-  ],
-  "d": [
-    {
-      "x": 8,
-      "y": 6.58
-    },
-    {
-      "x": 8,
-      "y": 5.76
-    },
-    {
-      "x": 8,
-      "y": 7.71
-    },
-    {
-      "x": 8,
-      "y": 8.84
-    },
-    {
-      "x": 8,
-      "y": 8.47
-    },
-    {
-      "x": 8,
-      "y": 7.04
-    },
-    {
-      "x": 8,
-      "y": 5.25
-    },
-    {
-      "x": 19,
-      "y": 12.5
-    },
-    {
-      "x": 8,
-      "y": 5.56
-    },
-    {
-      "x": 8,
-      "y": 7.91
-    },
-    {
-      "x": 8,
-      "y": 6.89
-    }
-  ]
-}
\ No newline at end of file
diff --git a/site/content/examples/scoped-styles/App.svelte b/site/content/examples/scoped-styles/App.svelte
deleted file mode 100644
index c4d73176f0e0..000000000000
--- a/site/content/examples/scoped-styles/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="foo">
-	Big red Comic Sans
-</div>
-
-<style>
-	.foo {
-		color: red;
-		font-size: 2em;
-		font-family: 'Comic Sans MS';
-	}
-</style>
\ No newline at end of file
diff --git a/site/content/examples/scoped-styles/data.json5 b/site/content/examples/scoped-styles/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/scoped-styles/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/self-references/App.svelte b/site/content/examples/self-references/App.svelte
deleted file mode 100644
index bd4475e206f7..000000000000
--- a/site/content/examples/self-references/App.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<ul>
-	<li>{node.name}
-		{#if node.children}
-			{#each node.children as child}
-				<svelte:self node={child}/>
-			{/each}
-		{/if}
-	</li>
-</ul>
\ No newline at end of file
diff --git a/site/content/examples/self-references/data.json5 b/site/content/examples/self-references/data.json5
deleted file mode 100644
index de0cfbd19492..000000000000
--- a/site/content/examples/self-references/data.json5
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "node": {
-    "name": "Fruit",
-    "children": [
-      {
-        "name": "Red",
-        "children": [
-          {
-            "name": "Cherry"
-          },
-          {
-            "name": "Strawberry"
-          }
-        ]
-      },
-      {
-        "name": "Green",
-        "children": [
-          {
-            "name": "Apple"
-          },
-          {
-            "name": "Pear"
-          },
-          {
-            "name": "Lime"
-          }
-        ]
-      }
-    ]
-  }
-}
\ No newline at end of file
diff --git a/site/content/examples/svg-clock/data.json5 b/site/content/examples/svg-clock/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/svg-clock/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/transitions-custom/data.json5 b/site/content/examples/transitions-custom/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/transitions-custom/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/transitions-fade/App.svelte b/site/content/examples/transitions-fade/App.svelte
deleted file mode 100644
index 528d495361de..000000000000
--- a/site/content/examples/transitions-fade/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition';
-
-	let visible;
-</script>
-
-<input type=checkbox bind:checked={visible}> visible
-
-{#if visible}
-	<p transition:fade>fades in and out</p>
-{/if}
diff --git a/site/content/examples/transitions-fade/data.json5 b/site/content/examples/transitions-fade/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/transitions-fade/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/transitions-fly/App.svelte b/site/content/examples/transitions-fly/App.svelte
deleted file mode 100644
index 43e4a1dd2d26..000000000000
--- a/site/content/examples/transitions-fly/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-
-	let visible;
-</script>
-
-<input type=checkbox bind:checked={visible}> visible
-
-{#if visible}
-	<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
-{/if}
diff --git a/site/content/examples/transitions-fly/data.json5 b/site/content/examples/transitions-fly/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/transitions-fly/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/examples/transitions-in-out/App.svelte b/site/content/examples/transitions-in-out/App.svelte
deleted file mode 100644
index 7b995bc04d3a..000000000000
--- a/site/content/examples/transitions-in-out/App.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	import { fade, fly } from 'svelte/transition';
-
-	let visible;
-</script>
-
-<input type=checkbox bind:checked={visible}> visible
-
-{#if visible}
-	<p in:fly="{{y: 50}}" out:fade>flies up, fades out</p>
-{/if}
diff --git a/site/content/examples/transitions-in-out/data.json5 b/site/content/examples/transitions-in-out/data.json5
deleted file mode 100644
index 9e26dfeeb6e6..000000000000
--- a/site/content/examples/transitions-in-out/data.json5
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
index d3cf1a44ed15..f1c03071ed65 100644
--- a/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
@@ -2,8 +2,6 @@
 	let name = 'world';
 </script>
 
-<label>
-	<input value={name}>
-</label>
+<input value={name}>
 
 <h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
index 662785bfcef8..89dd54a709ed 100644
--- a/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -2,8 +2,6 @@
 	let name = 'world';
 </script>
 
-<label>
-	<input bind:value={name}>
-</label>
+<input bind:value={name}>
 
 <h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
index 480ba4419e2b..fc6725e89470 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
@@ -80,5 +80,9 @@
 		padding: 50vh 0 0 0;
 	}
 
-	:global(body) { margin: 0; padding: 0; }
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: rgb(253, 174, 51);
+	}
 </style>
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
index a4b6f927b797..3dbfd43f218e 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
@@ -80,5 +80,9 @@
 		padding: 50vh 0 0 0;
 	}
 
-	:global(body) { margin: 0; padding: 0; }
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: rgb(253, 174, 51);
+	}
 </style>
diff --git a/site/package-lock.json b/site/package-lock.json
index 149733cc0c52..bfcf6d367a8a 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -702,6 +702,16 @@
         "regexpu-core": "^4.1.3"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.2.5.tgz",
+      "integrity": "sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.5.7",
+        "regenerator-runtime": "^0.12.0"
+      }
+    },
     "@babel/preset-env": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.3.1.tgz",
@@ -818,6 +828,312 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@jimp/bmp": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.6.0.tgz",
+      "integrity": "sha512-zZOcVT1zK/1QL5a7qirkzPPgDKB1ianER7pBdpR2J71vx/g8MnrPbL3h/jEVPxjdci2Hph/VWhc/oLBtTbqO8w==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "bmp-js": "^0.1.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/core": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/core/-/core-0.6.0.tgz",
+      "integrity": "sha512-ngAkyCLtX7buc2QyFy0ql/j4R2wGYQVsVhW2G3Y0GVAAklRIFIUYpyNKrqs228xA8f2O6XStbDStFlYkt7uNeg==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "any-base": "^1.1.0",
+        "buffer": "^5.2.0",
+        "core-js": "^2.5.7",
+        "exif-parser": "^0.1.12",
+        "file-type": "^9.0.0",
+        "load-bmfont": "^1.3.1",
+        "mkdirp": "0.5.1",
+        "phin": "^2.9.1",
+        "pixelmatch": "^4.0.2",
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@jimp/custom": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.6.0.tgz",
+      "integrity": "sha512-+YZIWhf03Rfbi+VPbHomKInu3tcntF/aij/JrIJd1QZq13f8m3mRNxakXupiL18KH0C8BPNDk8RiwFX+HaOw3A==",
+      "dev": true,
+      "requires": {
+        "@jimp/core": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/gif": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/gif/-/gif-0.6.0.tgz",
+      "integrity": "sha512-aWQ02P0ymTN1eh0BVsY+84wMdb/QeiVpCNQZl9y50cRnpuMM8TTmF/ZdCEBDiTRFcwXzHsqBXcLwEcYp3X2lTw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "omggif": "^1.0.9"
+      }
+    },
+    "@jimp/jpeg": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.6.0.tgz",
+      "integrity": "sha512-quYb+lM4h57jQvr2q9dEIkc0laTljws4dunIdFhJRfa5UlNL5mHInk8h5MxyALo0mZdT07TAcxiDHw5QXZ28JQ==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "jpeg-js": "^0.3.4"
+      }
+    },
+    "@jimp/plugin-blit": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.6.0.tgz",
+      "integrity": "sha512-LjiCa+8OT2fgmvBpZt0ogurg/eu5kB8ZFWDRwHPcf8i+058sZC20dar/qrjVd5Knssq4ynjb5oAHsGuJq16Rqw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-blur": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.6.0.tgz",
+      "integrity": "sha512-/vjGcEiHda6OLTCYqXPFkfSTbL+RatZoGcp1vewcWqChUccn9QVINTlxB7nEI/3Nb/i7KdhOPNEQh1k6q6QXsw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-color": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.6.0.tgz",
+      "integrity": "sha512-mvDeAwN8ZpDkOaABMJ0w9zUzo9OOtu1qvvPkSirXDTMiXt1nsbfz8BoeoD7nU2MFhQj5MiGjH65UDnsH5ZzYuw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@jimp/plugin-contain": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-contain/-/plugin-contain-0.6.0.tgz",
+      "integrity": "sha512-gPHnoQkDztMbvnTVo01BaMoM/hhDJdeJ7FRToD4p4Qvdor4V0I6NXtjOeUPXfD94miTgh/UTyJDqeG4GZzi4sA==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-cover": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-cover/-/plugin-cover-0.6.0.tgz",
+      "integrity": "sha512-iv9lA2v3qv+x3eaTThtyzFg+hO8/pSnM8NBymC5OlpSJnR54aWi7BVFXLJAF27T4EZyXko432PVul2IdY3BEPw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-crop": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.6.0.tgz",
+      "integrity": "sha512-YftdmFZ2YnZDYyBulkStCt2MZbKKfbjytkE+6i3Djk2b/Rfryg5xjgzVnAumCRQJhVPukexrnc2V7KKbEgx7mQ==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-displace": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-displace/-/plugin-displace-0.6.0.tgz",
+      "integrity": "sha512-kkva5Fy3r7J7QmiqYQ5c9NeUKKkN7+KSfCGsZ6tkRHK4REMIXhQO/OnJN8XG6RReV29O6QykdyeTXDiHUDiROw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-dither": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-dither/-/plugin-dither-0.6.0.tgz",
+      "integrity": "sha512-ILSG7bl3SOqmcIa9C4nBvs0h0E0ObnMbeKWUZiNuz6i0OAlbxryiIfU4j0UVQD5XqT9ksC5mviVNrvOMw4SZLw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-flip": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-flip/-/plugin-flip-0.6.0.tgz",
+      "integrity": "sha512-MXGGwABjERvfqVadEzJuVAmbsEQfjxXD0O/mMBegU1Qh7/JmnKAVplQCnojsMPxUdao/FKZjQqOnB/j4LLJtOQ==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-gaussian": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-gaussian/-/plugin-gaussian-0.6.0.tgz",
+      "integrity": "sha512-RUsBCyj6Ukxgn/TU8v6c6WRbSFqKM0iknLVqDkKIuiOyJB7ougv66fqomh/i/h3ihIkEnf50BuO0c3ovrczfvw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-invert": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-invert/-/plugin-invert-0.6.0.tgz",
+      "integrity": "sha512-zTCqK8el6eqcNKAxw0y57gHBFgxygI5iM8dQDPyqsvVWO71i8XII7ubnJhEvPPN7vhIKlOSnS9XXglezvJoX4Q==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-mask": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-mask/-/plugin-mask-0.6.0.tgz",
+      "integrity": "sha512-zkZVqAA7lxWhkn5EbPjBQ6tPluYIGfLMSX4kD1gksj+MVJJnVAd459AVuEXCvkUvv4wG5AlH8m6ve5NZj9vvxw==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-normalize": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-normalize/-/plugin-normalize-0.6.0.tgz",
+      "integrity": "sha512-7bNGT+S0rw9gvmxpkNsA19JSqBZYFrAn9QhEmoN4HIimdKtJaoLJh/GnxrPuOBLuv1IPJntoTOOWvOmfrQ6/ww==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-print": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-print/-/plugin-print-0.6.0.tgz",
+      "integrity": "sha512-kXNHYo7bGQiMZkUqhCvm6OomjJtZnLGs7cgXp9qsCfPcDBLLW+X3oxnoLaePQMlpQt6hX/lzFnNaWKv/KB1jlA==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "load-bmfont": "^1.4.0"
+      }
+    },
+    "@jimp/plugin-resize": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.6.0.tgz",
+      "integrity": "sha512-m0AA/mPkJG++RuftBFDUMRenqgIN/uSh88Kqs33VURYaabApni4ML3QslE1TCJtl2Lnu1eosxYlbzODjHx49eg==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-rotate": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.6.0.tgz",
+      "integrity": "sha512-1QGlIisyxs2HNLuynq/ETc4h7E6At3yR+IYAhG9U4KONG4RqlIy0giyDhnfEZaiqOE+O7f+0Z7zN6GoSHmQjzg==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugin-scale": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.6.0.tgz",
+      "integrity": "sha512-le/ttYwYioNPRoMlMaoJMCTv+m8d1v0peo/3J8E6Rf9ok7Bw3agkvjL9ILnsmr8jXj1YLrBSPKRs5nJ6ziM/qA==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "@jimp/plugins": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/plugins/-/plugins-0.6.0.tgz",
+      "integrity": "sha512-9+znfBJM1B31kvw+IcQFnAuDntQhwca/SONFnKOSZ8BNiQdiuTNbXHFxOo3tvdv1ngtB+LkkiTgK+QoF358b8g==",
+      "dev": true,
+      "requires": {
+        "@jimp/plugin-blit": "^0.6.0",
+        "@jimp/plugin-blur": "^0.6.0",
+        "@jimp/plugin-color": "^0.6.0",
+        "@jimp/plugin-contain": "^0.6.0",
+        "@jimp/plugin-cover": "^0.6.0",
+        "@jimp/plugin-crop": "^0.6.0",
+        "@jimp/plugin-displace": "^0.6.0",
+        "@jimp/plugin-dither": "^0.6.0",
+        "@jimp/plugin-flip": "^0.6.0",
+        "@jimp/plugin-gaussian": "^0.6.0",
+        "@jimp/plugin-invert": "^0.6.0",
+        "@jimp/plugin-mask": "^0.6.0",
+        "@jimp/plugin-normalize": "^0.6.0",
+        "@jimp/plugin-print": "^0.6.0",
+        "@jimp/plugin-resize": "^0.6.0",
+        "@jimp/plugin-rotate": "^0.6.0",
+        "@jimp/plugin-scale": "^0.6.0",
+        "core-js": "^2.5.7",
+        "timm": "^1.6.1"
+      }
+    },
+    "@jimp/png": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/png/-/png-0.6.0.tgz",
+      "integrity": "sha512-DBtMyQyrJxuKI7/1dVqLek+rCMM8U6BSOTHgo05wU7lhJKTB6fn2tbYfsnHQKzd9ld1M2qKuC+O1GTVdB2yl6w==",
+      "dev": true,
+      "requires": {
+        "@jimp/utils": "^0.6.0",
+        "core-js": "^2.5.7",
+        "pngjs": "^3.3.3"
+      }
+    },
+    "@jimp/tiff": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/tiff/-/tiff-0.6.0.tgz",
+      "integrity": "sha512-PV95CquEsolFziq0zZrAEJIzZSKwMK89TvkOXTPDi/xesgdXGC2rtG1IZFpC9L4UX5hi/M5GaeJa49xULX6Nqw==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.5.7",
+        "utif": "^2.0.1"
+      }
+    },
+    "@jimp/types": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/types/-/types-0.6.0.tgz",
+      "integrity": "sha512-j4tm82huEWpLrwave/2NYnMTY6us/6K9Js6Vd/CHoM/ki8M71tMXEVzc8tly92wtnEzQ9+FEk0Ue6pYo68m/5A==",
+      "dev": true,
+      "requires": {
+        "@jimp/bmp": "^0.6.0",
+        "@jimp/gif": "^0.6.0",
+        "@jimp/jpeg": "^0.6.0",
+        "@jimp/png": "^0.6.0",
+        "@jimp/tiff": "^0.6.0",
+        "core-js": "^2.5.7",
+        "timm": "^1.6.1"
+      }
+    },
+    "@jimp/utils": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@jimp/utils/-/utils-0.6.0.tgz",
+      "integrity": "sha512-z5iYEfqc45vlYweROneNkjv32en6jS7lPL/eMLIvaEcQAHaoza20Dw8fUoJ0Ht9S92kR74xeTunAZq+gK2w67Q==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.5.7"
+      }
+    },
     "@polka/url": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
@@ -865,6 +1181,12 @@
         "color-convert": "^1.9.0"
       }
     },
+    "any-base": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
+      "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==",
+      "dev": true
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
@@ -1016,12 +1338,24 @@
         }
       }
     },
+    "base64-js": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
+      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
+      "dev": true
+    },
     "binary-extensions": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.0.tgz",
       "integrity": "sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==",
       "dev": true
     },
+    "bmp-js": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
+      "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM=",
+      "dev": true
+    },
     "body-parser": {
       "version": "1.18.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
@@ -1088,6 +1422,22 @@
         "node-releases": "^1.1.3"
       }
     },
+    "buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
+      "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4"
+      }
+    },
+    "buffer-equal": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
+      "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -1370,6 +1720,12 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "core-js": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1503,6 +1859,12 @@
       "resolved": "https://registry.npmjs.org/do-not-zip/-/do-not-zip-1.0.0.tgz",
       "integrity": "sha512-Pgd81ET43bhAGaN2Hq1zluSX1FmD7kl7KcV9ER/lawiLsRUB9pRA5y8r6us29Xk6BrINZETO8TjhYwtwafWUww=="
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
+      "dev": true
+    },
     "dotenv": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
@@ -1579,7 +1941,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },
@@ -1615,6 +1977,12 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exif-parser": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
+      "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=",
+      "dev": true
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -1840,6 +2208,12 @@
         }
       }
     },
+    "file-type": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-9.0.0.tgz",
+      "integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw==",
+      "dev": true
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -1892,6 +2266,15 @@
         "locate-path": "^3.0.0"
       }
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2576,6 +2959,16 @@
         }
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dev": true,
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
     "globals": {
       "version": "11.10.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.10.0.tgz",
@@ -2722,6 +3115,12 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "ieee754": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
+      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
+      "dev": true
+    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -2891,6 +3290,12 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=",
+      "dev": true
+    },
     "is-glob": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
@@ -3016,6 +3421,25 @@
         }
       }
     },
+    "jimp": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/jimp/-/jimp-0.6.0.tgz",
+      "integrity": "sha512-RYpN+AAlTEMf8Bnkhq2eeTNyr70rDK/2UUfUqzBJmwmZwdR6fxRJvgbCGWT1BDVRxaAqo+4CWm8ePBxOIsr4jg==",
+      "dev": true,
+      "requires": {
+        "@babel/polyfill": "^7.0.0",
+        "@jimp/custom": "^0.6.0",
+        "@jimp/plugins": "^0.6.0",
+        "@jimp/types": "^0.6.0",
+        "core-js": "^2.5.7"
+      }
+    },
+    "jpeg-js": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.3.4.tgz",
+      "integrity": "sha512-6IzjQxvnlT8UlklNmDXIJMWxijULjqGrzgqc0OG7YadZdvm7KPQ1j0ehmQQHckgEWOfgpptzcnWgESovxudpTA==",
+      "dev": true
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -3078,6 +3502,22 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "load-bmfont": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.0.tgz",
+      "integrity": "sha512-kT63aTAlNhZARowaNYcY29Fn/QYkc52M3l6V1ifRcPewg2lvUZDAj7R6dXjOL9D0sict76op3T5+odumDSF81g==",
+      "dev": true,
+      "requires": {
+        "buffer-equal": "0.0.1",
+        "mime": "^1.3.4",
+        "parse-bmfont-ascii": "^1.0.3",
+        "parse-bmfont-binary": "^1.0.5",
+        "parse-bmfont-xml": "^1.1.4",
+        "phin": "^2.9.1",
+        "xhr": "^2.0.1",
+        "xtend": "^4.0.0"
+      }
+    },
     "load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -3251,6 +3691,15 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "dev": true,
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -3524,6 +3973,12 @@
         "isobject": "^3.0.1"
       }
     },
+    "omggif": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.9.tgz",
+      "integrity": "sha1-3LcCTazVDFK00wPwSALJHAV8dl8=",
+      "dev": true
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -3598,6 +4053,12 @@
       "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
       "dev": true
     },
+    "pako": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+      "dev": true
+    },
     "param-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
@@ -3607,6 +4068,28 @@
         "no-case": "^2.2.0"
       }
     },
+    "parse-bmfont-ascii": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz",
+      "integrity": "sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU=",
+      "dev": true
+    },
+    "parse-bmfont-binary": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz",
+      "integrity": "sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY=",
+      "dev": true
+    },
+    "parse-bmfont-xml": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz",
+      "integrity": "sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==",
+      "dev": true,
+      "requires": {
+        "xml-parse-from-string": "^1.0.0",
+        "xml2js": "^0.4.5"
+      }
+    },
     "parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@@ -3636,6 +4119,16 @@
         }
       }
     },
+    "parse-headers": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.2.tgz",
+      "integrity": "sha512-/LypJhzFmyBIDYP9aDVgeyEb5sQfbfY5mnDq4hVhlQ69js87wXfmEI5V3xI6vvXasqebp0oCytYFLxsBVfCzSg==",
+      "dev": true,
+      "requires": {
+        "for-each": "^0.3.3",
+        "string.prototype.trim": "^1.1.2"
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -3737,6 +4230,12 @@
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
       "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
     },
+    "phin": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
+      "integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==",
+      "dev": true
+    },
     "pidtree": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.0.tgz",
@@ -3749,6 +4248,21 @@
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
       "dev": true
     },
+    "pixelmatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz",
+      "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=",
+      "dev": true,
+      "requires": {
+        "pngjs": "^3.0.0"
+      }
+    },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+      "dev": true
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -3775,6 +4289,12 @@
       "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
       "dev": true
     },
+    "process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
@@ -4303,6 +4823,12 @@
         "string-hash": "^1.1.3"
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -4719,6 +5245,17 @@
         "function-bind": "^1.0.2"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
+      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.0",
+        "function-bind": "^1.0.2"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -4759,9 +5296,9 @@
       }
     },
     "svelte": {
-      "version": "3.0.0-beta.10",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.10.tgz",
-      "integrity": "sha512-PDA034OwoMwna9+L99QVN/g9fodfxne3+wWaKph4WmcDDn0cAYRzTgu1h8WfAKK7tyt1iTcOBxKP9y+jonJ0/g==",
+      "version": "3.0.0-beta.14",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.14.tgz",
+      "integrity": "sha512-naFCFs5JRYe5PGz3+Vg0LiFMqkQUc4bdiH4e7sd6jyDyia0fWd4CJrLxWiC5kHv5Qo5Iv+y26hBHnDoIGAw3zw==",
       "dev": true
     },
     "tar": {
@@ -4798,6 +5335,12 @@
         }
       }
     },
+    "timm": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/timm/-/timm-1.6.1.tgz",
+      "integrity": "sha512-hqDTYi/bWuDxL2i6T3v6nrvkAQ/1Bc060GSkVEQZp02zTSTB4CHSKsOkliequCftQaNRcjRqUZmpGWs5FfhrNg==",
+      "dev": true
+    },
     "tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
@@ -4813,6 +5356,12 @@
         "globrex": "^0.1.1"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=",
+      "dev": true
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -5044,6 +5593,15 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "utif": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz",
+      "integrity": "sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==",
+      "dev": true,
+      "requires": {
+        "pako": "^1.0.5"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5147,6 +5705,46 @@
         "slide": "^1.1.5"
       }
     },
+    "xhr": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.5.0.tgz",
+      "integrity": "sha512-4nlO/14t3BNUZRXIXfXe+3N6w3s1KoxcJUUURctd64BLRe67E4gRwp4PjywtDY72fXpZ1y6Ch0VZQRY/gMPzzQ==",
+      "dev": true,
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "xml-parse-from-string": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
+      "integrity": "sha1-qQKekp09vN7RafPG4oI42VpdWig=",
+      "dev": true
+    },
+    "xml2js": {
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
+      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
+      "dev": true,
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~9.0.1"
+      }
+    },
+    "xmlbuilder": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+      "dev": true
+    },
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
diff --git a/site/package.json b/site/package.json
index 605682db32ba..de3edb8f6437 100644
--- a/site/package.json
+++ b/site/package.json
@@ -42,6 +42,7 @@
     "chokidar": "^2.1.2",
     "degit": "^2.1.3",
     "eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
+    "jimp": "^0.6.0",
     "now": "^14.0.0",
     "npm-run-all": "^4.1.5",
     "rollup": "^1.2.2",
@@ -53,6 +54,6 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.26.0-alpha.10",
-    "svelte": "^3.0.0-beta.10"
+    "svelte": "^3.0.0-beta.14"
   }
 }
diff --git a/site/scripts/get-example-thumbnails/index.js b/site/scripts/get-example-thumbnails/index.js
new file mode 100644
index 000000000000..0b2f425cf1b2
--- /dev/null
+++ b/site/scripts/get-example-thumbnails/index.js
@@ -0,0 +1,64 @@
+const fs = require('fs');
+const puppeteer = require('puppeteer');
+const Jimp = require('jimp');
+const c = require('kleur');
+
+const slugs = [];
+
+fs.readdirSync(`content/examples`).forEach(group_dir => {
+	fs.readdirSync(`content/examples/${group_dir}`).filter(file => file !== 'meta.json').map(example_dir => {
+		const slug = example_dir.replace(/^\d+-/, '');
+		slugs.push(slug);
+	});
+});
+
+async function main() {
+	const browser = await puppeteer.launch({
+		defaultViewport: {
+			width: 1280,
+			height: 960,
+			deviceScaleFactor: 2
+		}
+	});
+
+	const page = await browser.newPage();
+
+	for (const slug of slugs) {
+		try {
+			const output_file = `static/examples/thumbnails/${slug}.png`;
+			if (fs.existsSync(output_file)) {
+				console.log(c.gray(`skipping ${slug}`));
+				continue;
+			}
+
+			console.log(slug);
+			await page.goto(`http://localhost:3000/repl?example=${slug}`);
+
+			await page.waitForSelector('iframe.inited[title=Result]');
+			await page.waitFor(1500);
+			const iframe = await page.$('iframe.inited[title=Result]');
+			const buffer = await iframe.screenshot();
+
+			const image = await Jimp.read(buffer);
+			image.crop(3, 3, image.bitmap.width - 6, image.bitmap.height - 6);
+			image.autocrop();
+
+			if (image.bitmap.width > 300 || image.bitmap.width > 200) {
+				const scale = Math.min(
+					300 / image.bitmap.width,
+					200 / image.bitmap.height
+				);
+
+				image.scale(scale);
+			}
+
+			await image.write(output_file);
+		} catch (err) {
+			console.log(c.bold().red(`failed to screenshot ${slug}`));
+		}
+	}
+
+	await browser.close();
+}
+
+main();
\ No newline at end of file
diff --git a/site/scripts/get-examples-from-tutorials/index.js b/site/scripts/get-examples-from-tutorials/index.js
new file mode 100644
index 000000000000..f828a089beb0
--- /dev/null
+++ b/site/scripts/get-examples-from-tutorials/index.js
@@ -0,0 +1,74 @@
+const sander = require('sander');
+
+process.chdir(`${__dirname}/../..`);
+
+function extract_frontmatter(markdown) {
+	const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
+	const frontMatter = match[1];
+	const content = markdown.slice(match[0].length);
+
+	const metadata = {};
+	frontMatter.split('\n').forEach(pair => {
+		const colonIndex = pair.indexOf(':');
+		metadata[pair.slice(0, colonIndex).trim()] = pair
+			.slice(colonIndex + 1)
+			.trim();
+	});
+
+	return { metadata, content };
+}
+
+const tutorial_sections = sander.readdirSync(`content/tutorial`).map(section_dir => {
+	const section_slug = section_dir.replace(/^\d+-/, '');
+
+	const meta = JSON.parse(sander.readFileSync(`content/tutorial/${section_dir}/meta.json`, { encoding: 'utf-8' }));
+
+	const chapters = sander.readdirSync(`content/tutorial/${section_dir}`).map(chapter_dir => {
+		const app_dir = `content/tutorial/${section_dir}/${chapter_dir}/app-b`;
+		if (!sander.existsSync(app_dir)) return;
+
+		const markdown = sander.readFileSync(`content/tutorial/${section_dir}/${chapter_dir}/text.md`, { encoding: 'utf-8' });
+		const { metadata } = extract_frontmatter(markdown);
+
+		const chapter_slug = chapter_dir.replace(/^\d+-/, '');
+
+		return {
+			slug: chapter_slug,
+			title: metadata.title,
+			files: sander.readdirSync(app_dir).map(name => {
+				return {
+					name,
+					source: sander.readFileSync(`${app_dir}/${name}`, { encoding: 'utf-8' })
+				};
+			})
+		};
+	}).filter(Boolean);
+
+	return {
+		slug: section_slug,
+		title: meta.title,
+		chapters
+	};
+}).filter(section => section.chapters.length > 0);
+
+const pad = i => i < 10 ? `0${i}` : i;
+
+tutorial_sections.forEach((section, i) => {
+	const section_dir = `${pad(i)}-${section.slug}`;
+
+	sander.writeFileSync(`content/examples/${section_dir}/meta.json`, JSON.stringify({
+		title: section.title
+	}, null, '\t'));
+
+	section.chapters.forEach((chapter, i) => {
+		const chapter_dir = `${pad(i)}-${chapter.slug}`;
+
+		sander.writeFileSync(`content/examples/${section_dir}/${chapter_dir}/meta.json`, JSON.stringify({
+			title: chapter.title
+		}, null, '\t'));
+
+		chapter.files.forEach(file => {
+			sander.writeFileSync(`content/examples/${section_dir}/${chapter_dir}/${file.name}`, file.source);
+		});
+	});
+});
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/PropEditor.svelte b/site/src/components/Repl/Output/PropEditor.svelte
deleted file mode 100644
index 4ea6ce5e7fa6..000000000000
--- a/site/src/components/Repl/Output/PropEditor.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-	import * as fleece from 'golden-fleece';
-	import CodeMirror from '../CodeMirror.svelte';
-
-	const dispatch = createEventDispatcher();
-
-	export let value;
-
-	let error;
-	let code;
-
-	if (value === undefined) {
-		code = 'undefined';
-	} else {
-		code = fleece.stringify(value);
-		console.log({ value, code });
-	}
-
-	$: try {
-		value = fleece.evaluate(code);
-	} catch (e) {
-		error = e;
-	}
-
-	let previous_code;
-
-	function handleChange(event) {
-		try {
-			const value = fleece.evaluate(event.detail.value);
-			code = previous_code = event.detail.value;
-			error = null;
-			dispatch('change', { value });
-		} catch (e) {
-			error = e;
-		}
-	}
-
-	function stringify(value) {
-		if (value === undefined) return '<undefined>';
-
-		const code = previous_code
-			? fleece.patch(previous_code, value)
-			: fleece.stringify(value);
-
-		previous_code = code;
-		return code;
-	}
-</script>
-
-<style>
-	.prop-editor {
-		border: 1px solid #eee;
-	}
-
-	.error {
-		background-color: rgba(218, 16, 96, 0.1);
-		border: 1px solid #da106e;
-	}
-</style>
-
-<div class="prop-editor" class:error title="{error && error.message || ''}">
-	<CodeMirror
-		mode="json"
-		code={stringify(value)}
-		lineNumbers={false}
-		on:change={handleChange}
-		tab={false}
-		flex
-	/>
-</div>
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/ReplProxy.js b/site/src/components/Repl/Output/ReplProxy.js
index 44b77b84dd44..7ae56e35b713 100644
--- a/site/src/components/Repl/Output/ReplProxy.js
+++ b/site/src/components/Repl/Output/ReplProxy.js
@@ -57,11 +57,6 @@ export default class ReplProxy {
 			this.handleCommandMessage(event.data);
 		}
 
-		if (action === 'prop_update') {
-			const { prop, value } = args;
-			this.handlers.onPropUpdate(prop, value)
-		}
-
 		if (action === 'fetch_progress') {
 			this.handlers.onFetchProgress(args.remaining)
 		}
@@ -71,14 +66,6 @@ export default class ReplProxy {
 		return this.iframeCommand('eval', { script });
 	}
 
-	setProp(prop, value) {
-		return this.iframeCommand('set_prop', {prop, value})
-	}
-
-	bindProps(props) {
-		return this.iframeCommand('bind_props', { props })
-	}
-
 	handleLinks() {
 		return this.iframeCommand('catch_clicks', {});
 	}
diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte
index eec904526ff5..f5fcb0295e69 100644
--- a/site/src/components/Repl/Output/Viewer.svelte
+++ b/site/src/components/Repl/Output/Viewer.svelte
@@ -6,9 +6,8 @@
 	import { decode } from 'sourcemap-codec';
 
 	const dispatch = createEventDispatcher();
-	const { bundle, values, navigate } = getContext('REPL');
+	const { bundle, navigate } = getContext('REPL');
 
-	export let props;
 	export let error; // TODO should this be exposed as a prop?
 
 	export function setProp(prop, value) {
@@ -23,16 +22,10 @@
 	let proxy = null;
 
 	let ready = false;
+	let inited = false;
 
 	onMount(() => {
 		proxy = new ReplProxy(iframe, {
-			onPropUpdate: (prop, value) => {
-				dispatch('binding', { prop, value });
-				values.update(values => Object.assign({}, values, {
-					[prop]: value
-				}));
-			},
-
 			onFetchProgress: progress => {
 				pending_imports = progress;
 			}
@@ -84,13 +77,10 @@
 				window._svelteTransitionManager = null;
 
 				window.component = new SvelteComponent({
-					target: document.body,
-					props: ${JSON.stringify($values)}
+					target: document.body
 				});
 			`);
 
-			await proxy.bindProps(props);
-
 			error = null;
 		} catch (e) {
 			const loc = getLocationFromStack(e.stack, $bundle.dom.map);
@@ -101,6 +91,8 @@
 
 			error = e;
 		}
+
+		inited = true;
 	}
 
 	$: if (ready) apply_bundle($bundle);
@@ -136,7 +128,7 @@
 </style>
 
 <div class="iframe-container">
-	<iframe title="Result" bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
+	<iframe title="Result" class:inited bind:this={iframe} sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
 		<!doctype html>
 		<html>
 			<head>
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
index ce67ca5f7a32..ae648cde9dbb 100644
--- a/site/src/components/Repl/Output/index.svelte
+++ b/site/src/components/Repl/Output/index.svelte
@@ -4,18 +4,14 @@
 	import Viewer from './Viewer.svelte';
 	import CompilerOptions from './CompilerOptions.svelte';
 	import Compiler from './Compiler.js';
-	import PropEditor from './PropEditor.svelte';
 	import CodeMirror from '../CodeMirror.svelte';
 
-	const { values, register_output } = getContext('REPL');
+	const { register_output } = getContext('REPL');
 
 	export let version;
 	export let sourceErrorLoc;
 	export let runtimeError;
 	export let embedded;
-	export let show_props;
-
-	let props;
 
 	let compile_options = {
 		generate: 'dom',
@@ -39,7 +35,6 @@
 
 			js_editor.set(compiled.js, 'js');
 			css_editor.set(compiled.css, 'css');
-			if (compiled.props) props = compiled.props;
 		},
 
 		update: async selected => {
@@ -49,7 +44,6 @@
 
 			js_editor.update(compiled.js);
 			css_editor.update(compiled.css);
-			if (compiled.props) props = compiled.props;
 		}
 	});
 
@@ -67,23 +61,6 @@
 	const setters = {};
 
 	let view = 'result';
-
-	function updateValues(prop, value) {
-		values.update(v => Object.assign({}, v, {
-			[prop]: value
-		}));
-	}
-
-	function setPropFromViewer(prop, value) {
-		// console.log(setters, prop, value);
-		// setters[prop](value);
-		updateValues(prop, value);
-	}
-
-	function setPropFromEditor(prop, value) {
-		viewer.setProp(prop, value);
-		updateValues(prop, value);
-	}
 </script>
 
 <style>
@@ -119,19 +96,6 @@
 		color: var(--text);
 	}
 
-	.props {
-		display: grid;
-		padding: 0.5em;
-		grid-template-columns: auto 1fr;
-		grid-auto-rows: min-content;
-		grid-gap: 0.5em;
-		overflow-y: auto;
-	}
-
-	.props code {
-		top: .1rem;
-	}
-
 	.tab-content {
 		position: absolute;
 		width: 100%;
@@ -166,44 +130,11 @@
 
 <!-- component viewer -->
 <div class="tab-content" class:visible="{view === 'result'}">
-	<SplitPane type="vertical" pos={67} fixed={!show_props} fixed_pos={100}>
-		<div slot="a">
-			<Viewer
-				bind:this={viewer}
-				{props}
-				bind:error={runtimeError}
-				on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
-			/>
-		</div>
-
-		<section slot="b">
-			{#if show_props}
-				<h3>Props editor</h3>
-
-				{#if props}
-					{#if props.length > 0}
-						<div class="props">
-							{#each props.sort() as prop (prop)}
-								<code style="display: block; whitespace: pre;">{prop}</code>
-
-								<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
-								<PropEditor
-									value={$values[prop]}
-									on:change="{e => setPropFromEditor(prop, e.detail.value)}"
-								/>
-							{/each}
-						</div>
-					{:else}
-						<div style="padding: 0.5em" class="linkify">
-							<!-- TODO explain distincion between logic-less and logic-ful components? -->
-							<!-- TODO style the <a> so it looks like a link -->
-							<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="docs#external-properties">declare props with the export keyword</a></p>
-						</div>
-					{/if}
-				{/if}
-			{/if}
-		</section>
-	</SplitPane>
+	<Viewer
+		bind:this={viewer}
+		bind:error={runtimeError}
+		on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
+	/>
 </div>
 
 <!-- js output -->
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
index 30757f1868f2..aa9a9fed93a9 100644
--- a/site/src/components/Repl/index.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -11,7 +11,6 @@
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let embedded = false;
 	export let orientation = 'columns';
-	export let show_props = true;
 
 	export function toJSON() {
 		// TODO there's a bug here — Svelte hoists this function because
@@ -22,14 +21,12 @@
 
 		return {
 			imports: $bundle.imports,
-			components: $components,
-			values: $values
+			components: $components
 		};
 	}
 
 	export function set(data) {
 		components.set(data.components);
-		values.set(data.values);
 		selected.set(data.components[0]);
 
 		module_editor.set($selected.source, $selected.type);
@@ -40,7 +37,6 @@
 		const { name, type } = $selected || {};
 
 		components.set(data.components);
-		values.set(data.values);
 
 		const matched_component = data.components.find(file => file.name === name && file.type === type);
 		selected.set(matched_component || data.components[0]);
@@ -57,7 +53,6 @@
 	const dispatch = createEventDispatcher();
 
 	const components = writable([]);
-	const values = writable({});
 	const selected = writable(null);
 	const bundle = writable(null);
 
@@ -66,7 +61,6 @@
 
 	setContext('REPL', {
 		components,
-		values,
 		selected,
 		bundle,
 
@@ -227,7 +221,7 @@
 			</section>
 
 			<section slot=b style='height: 100%;'>
-				<Output {version} {embedded} {show_props}/>
+				<Output {version} {embedded}/>
 			</section>
 		</SplitPane>
 	</div>
diff --git a/site/src/routes/api/examples/[slug].js b/site/src/routes/api/examples/[slug].js
deleted file mode 100644
index 03bf72376659..000000000000
--- a/site/src/routes/api/examples/[slug].js
+++ /dev/null
@@ -1,73 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import manifest from '../../../../content/examples/manifest.json';
-
-const lookup = new Map();
-const titles = new Map();
-const slugs = new Set();
-
-manifest.forEach(group => {
-	group.examples.forEach(example => {
-		titles.set(example.slug, example.title);
-		slugs.add(example.slug);
-	});
-});
-
-function createExample(slug) {
-	const files = fs.readdirSync(`content/examples/${slug}`);
-
-	const components = files
-		.map(file => {
-			const ext = path.extname(file);
-			if (ext !== '.svelte' && ext !== '.js') return null;
-
-			const source = fs.readFileSync(`content/examples/${slug}/${file}`, 'utf-8');
-
-			return {
-				name: file.replace(ext, ''),
-				type: ext.slice(1),
-				source
-			};
-		})
-		.filter(Boolean)
-		.sort((a, b) => {
-			if (a.name === 'App' && a.type === 'svelte') return -1;
-			if (b.name === 'App' && b.type === 'svelte') return 1;
-
-			if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
-
-			return a.name < b.name ? -1 : 1;
-		});
-
-	const json5 = fs.existsSync(`content/examples/${slug}/data.json5`)
-		? fs.readFileSync(`content/examples/${slug}/data.json5`, 'utf-8')
-		: '{}';
-
-	return JSON.stringify({
-		title: titles.get(slug),
-		components,
-		json5
-	});
-}
-
-export function get(req, res) {
-	const { slug } = req.params;
-
-	try {
-		if (!lookup.has(slug) || process.env.NODE_ENV !== 'production') {
-			lookup.set(slug, createExample(slug));
-		}
-
-		res.writeHead(200, {
-			'Content-Type': 'application/json'
-		});
-
-		res.end(lookup.get(slug));
-	} catch (err) {
-		res.writeHead(404, {
-			'Content-Type': 'application/json'
-		});
-
-		res.end(JSON.stringify({ error: 'not found' }));
-	}
-}
\ No newline at end of file
diff --git a/site/src/routes/examples/[slug].json.js b/site/src/routes/examples/[slug].json.js
new file mode 100644
index 000000000000..222da42bb1bb
--- /dev/null
+++ b/site/src/routes/examples/[slug].json.js
@@ -0,0 +1,25 @@
+import { get_example } from './_examples.js';
+
+const cache = new Map();
+
+export function get(req, res) {
+	const { slug } = req.params;
+
+	try {
+		if (!cache.has(slug) || process.env.NODE_ENV !== 'production') {
+			cache.set(slug, JSON.stringify(get_example(slug)));
+		}
+
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(cache.get(slug));
+	} catch (err) {
+		res.writeHead(404, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({ error: 'not found' }));
+	}
+}
\ No newline at end of file
diff --git a/site/src/routes/examples/_examples.js b/site/src/routes/examples/_examples.js
new file mode 100644
index 000000000000..75c0aab08f96
--- /dev/null
+++ b/site/src/routes/examples/_examples.js
@@ -0,0 +1,51 @@
+import fs from 'fs';
+import path from 'path';
+
+let lookup;
+const titles = new Map();
+
+export function get_examples() {
+	lookup = new Map();
+
+	return fs.readdirSync(`content/examples`).map(group_dir => {
+		const metadata = JSON.parse(fs.readFileSync(`content/examples/${group_dir}/meta.json`, 'utf-8'));
+
+		return {
+			title: metadata.title,
+			examples: fs.readdirSync(`content/examples/${group_dir}`).filter(file => file !== 'meta.json').map(example_dir => {
+				const slug = example_dir.replace(/^\d+-/, '');
+
+				if (lookup.has(slug)) throw new Error(`Duplicate example slug "${slug}"`);
+				lookup.set(slug, `${group_dir}/${example_dir}`);
+
+				const metadata = JSON.parse(fs.readFileSync(`content/examples/${group_dir}/${example_dir}/meta.json`, 'utf-8'));
+				titles.set(slug, metadata.title);
+
+				return {
+					slug,
+					title: metadata.title
+				};
+			})
+		};
+	});
+}
+
+export function get_example(slug) {
+	if (!lookup || !lookup.has(slug)) get_examples();
+
+	const dir = lookup.get(slug);
+	const title = titles.get(slug);
+
+	if (!dir || !title) throw { status: 404, message: 'not found' };
+
+	const files = fs.readdirSync(`content/examples/${dir}`)
+		.filter(name => name[0] !== '.' && name !== 'meta.json')
+		.map(name => {
+			return {
+				name,
+				source: fs.readFileSync(`content/examples/${dir}/${name}`, 'utf-8')
+			};
+		});
+
+	return { title, files };
+}
\ No newline at end of file
diff --git a/site/src/routes/examples/index.json.js b/site/src/routes/examples/index.json.js
new file mode 100644
index 000000000000..4cb4d9c55444
--- /dev/null
+++ b/site/src/routes/examples/index.json.js
@@ -0,0 +1,23 @@
+import { get_examples } from './_examples.js';
+
+let cached;
+
+export function get(req, res) {
+	try {
+		if (!cached || process.env.NODE_ENV !== 'production') {
+			cached = JSON.stringify(get_examples());
+		}
+
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(cached);
+	} catch (e) {
+		res.writeHead(e.status || 500, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({ message: e.message }));
+	}
+}
\ No newline at end of file
diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte
index 27c43b8ecf60..fa6ee3502547 100644
--- a/site/src/routes/examples/index.svelte
+++ b/site/src/routes/examples/index.svelte
@@ -1 +1,114 @@
-<h1>TODO</h1>
\ No newline at end of file
+<script context="module">
+	export async function preload() {
+		const groups = await this.fetch(`examples.json`).then(r => r.json());
+
+		return {
+			groups
+		};
+	}
+</script>
+
+<script>
+	export let groups;
+</script>
+
+<style>
+	.content {
+		max-width: 120rem;
+		margin: 0 auto;
+	}
+
+	h1 {
+		margin: 4rem 0 4rem -0.05em;
+		font-size: 4rem;
+	}
+
+	h2 {
+		margin: 0 0 1em 0;
+		font-size: 18px;
+		border-bottom: 1px solid #eee;
+		text-transform: uppercase;
+		padding: 0 0 0.5em 0;
+	}
+
+	section {
+		margin: 0 0 2em 0;
+	}
+
+	.example {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: 0 0 0 85px;
+		min-height: 50px;
+		font-weight: 300;
+	}
+
+	.grid {
+		grid-template-columns: repeat(1, 1fr);
+		grid-gap: 0.5em;
+	}
+
+	@media (min-width: 720px) {
+		.grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	@media (min-width: 1080px) {
+		.grid {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+
+	.thumbnail {
+		position: absolute;
+		background: white 50% 50% no-repeat;
+		background-size: contain;
+		width: 75px;
+		height: 50px;
+		left: 0;
+		top: 0;
+		border: 1px solid #ccc;
+		border-radius: 2px;
+		box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+	}
+
+	/* .thumbnail::before {
+		content: "";
+		width: 1px;
+		margin-left: -1px;
+		float: left;
+		height: 0;
+		padding-top: 100%;
+	}
+
+	.thumbnail::after {
+		content: "";
+		display: table;
+		clear: both;
+	} */
+
+	img {
+		background-color: #eee;
+	}
+</style>
+
+<div class="content">
+	<h1>Examples</h1>
+
+	{#each groups as group}
+		<section>
+			<h2>{group.title}</h2>
+
+			<div class="grid">
+				{#each group.examples as example}
+					<a class="example" href="repl?example={example.slug}">
+						<div class="thumbnail" style="background-image: url(examples/thumbnails/{example.slug}.png)"></div>
+						<span>{example.title}</span>
+					</a>
+				{/each}
+			</div>
+		</section>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/site/src/routes/gist/create.js b/site/src/routes/gist/create.js
index 601f21d466bc..1f55a51498ee 100644
--- a/site/src/routes/gist/create.js
+++ b/site/src/routes/gist/create.js
@@ -13,7 +13,7 @@ export async function post(req, res) {
 	}
 
 	try {
-		const { name, components, json5 } = await body(req);
+		const { name, components } = await body(req);
 
 		const files = {
 			'meta.json': {
@@ -33,10 +33,6 @@ export async function post(req, res) {
 			files[file] = { content: component.source };
 		});
 
-		if (json5) {
-			files['data.json5'] = { content: json5 };
-		}
-
 		const r = await fetch(`https://api.github.com/gists`, {
 			method: 'POST',
 			headers: {
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 0171d4a450a0..edde4372c651 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -233,7 +233,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Hello world example"
-		src="/repl/embed?demo=homepage-demo-hello-world"
+		src="/repl/embed?example=hello-world"
 		scrolling="no"
 	></iframe>
 </section>
@@ -245,7 +245,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Scope styles example"
-		src="/repl/embed?demo=homepage-demo-scoped-styles"
+		src="/repl/embed?example=nested-components"
 		scrolling="no"
 	></iframe>
 </section>
@@ -257,7 +257,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Reactivity example"
-		src="/repl/embed?demo=homepage-demo-reactivity"
+		src="/repl/embed?example=reactive-assignments"
 		scrolling="no"
 	></iframe>
 </section>
@@ -269,7 +269,7 @@ npm run dev & open http://localhost:5000
 
 	<iframe
 		title="Transitions example"
-		src="/repl/embed?demo=homepage-demo-transitions"
+		src="/repl/embed?example=svg-transitions"
 		scrolling="no"
 	></iframe>
 </section>
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index 9f1b6a47a757..f02cdc8fd266 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -1,5 +1,4 @@
 <script>
-	import * as fleece from 'golden-fleece';
 	import { createEventDispatcher } from 'svelte';
 	import UserMenu from './UserMenu.svelte';
 	import Icon from '../../../../components/Icon.svelte';
@@ -11,7 +10,6 @@
 	const dispatch = createEventDispatcher();
 
 	export let repl;
-	export let examples;
 	export let gist;
 	export let name;
 	export let zen_mode;
@@ -54,8 +52,7 @@
 	async function fork(intentWasSave) {
 		saving = true;
 
-		const { components, values } = repl.toJSON();
-		const json5 = fleece.stringify(values); // TODO preserve the original code
+		const { components } = repl.toJSON();
 
 		try {
 			const r = await fetch(`gist/create`, {
@@ -63,8 +60,7 @@
 				credentials: 'include',
 				body: JSON.stringify({
 					name,
-					components,
-					json5
+					components
 				})
 			});
 
@@ -106,8 +102,7 @@
 
 		saving = true;
 
-		const { components, values } = repl.toJSON();
-		const json5 = fleece.stringify(values); // TODO preserve the original code
+		const { components } = repl.toJSON();
 
 		try {
 			const files = {};
@@ -131,13 +126,6 @@
 				}
 			});
 
-			if (!gist.files['data.json5'] || json5 !== gist.files['data.json5'].content) {
-				files['data.json5'] = { content: json5 };
-			}
-
-			// data.json has been deprecated in favour of data.json5
-			if (gist.files['data.json']) gist.files['data.json'] = null;
-
 			const r = await fetch(`gist/${gist.id}`, {
 				method: 'PATCH',
 				credentials: 'include',
@@ -171,7 +159,7 @@
 	async function download() {
 		downloading = true;
 
-		const { components, imports, values } = repl.toJSON();
+		const { components, imports } = repl.toJSON();
 
 		const files = await (await fetch('/svelte-app.json')).json();
 
@@ -192,8 +180,7 @@
 			path: `src/main.js`, data: `import App from './App.svelte';
 
 var app = new App({
-	target: document.body,
-	props: ${JSON.stringify(values, null, '\t').replace(/\n/g, '\n\t')}
+	target: document.body
 });
 
 export default app;` });
@@ -207,32 +194,11 @@ export default app;` });
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="app-controls">
-	<div>
-		<div class="icon" style="position: relative; width: 3.2rem; top: -.2rem">
-			<Icon name="menu" />
-
-			<select
-				class="hidden-select"
-				on:change="{e => dispatch('select', { slug: e.target.value })}"
-			>
-				<option value={null} disabled>Select an example</option>
-
-				{#each examples as group}
-					<optgroup label={group.name}>
-						{#each group.examples as example}
-							<option value={example.slug}>{example.title}</option>
-						{/each}
-					</optgroup>
-				{/each}
-			</select>
-		</div>
-
-		<input
-			bind:value={name}
-			on:focus="{e => e.target.select()}"
-			use:enter="{e => e.target.blur()}"
-		>
-	</div>
+	<input
+		bind:value={name}
+		on:focus="{e => e.target.select()}"
+		use:enter="{e => e.target.blur()}"
+	>
 
 	<div style="text-align: right; margin-right:.4rem">
 		<button class="icon" on:click="{() => zen_mode = !zen_mode}" title="fullscreen editor">
diff --git a/site/src/routes/repl/_utils/process_example.js b/site/src/routes/repl/_utils/process_example.js
new file mode 100644
index 000000000000..fc61d79ad347
--- /dev/null
+++ b/site/src/routes/repl/_utils/process_example.js
@@ -0,0 +1,16 @@
+export function process_example(files) {
+	return files
+		.map(file => {
+			const [name, type] = file.name.split('.');
+			return { name, type, source: file.source };
+		})
+		.sort((a, b) => {
+			if (a.name === 'App' && a.type === 'svelte') return -1;
+			if (b.name === 'App' && b.type === 'svelte') return 1;
+
+			if (a.type === b.type) return a.name < b.name ? -1 : 1;
+
+			if (a.type === 'svelte') return -1;
+			if (b.type === 'svelte') return 1;
+		});
+}
\ No newline at end of file
diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
index fc74d8df5f57..9cc680afb013 100644
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@@ -3,17 +3,17 @@
 		return {
 			version: query.version || 'beta',
 			gist: query.gist,
-			demo: query.demo
+			example: query.example
 		};
 	}
 </script>
 
 <script>
 	import { onMount } from 'svelte';
-	import * as fleece from 'golden-fleece';
+	import { process_example } from './_utils/process_example.js';
 	import Repl from '../../components/Repl/index.svelte';
 
-	export let version, gist, demo;
+	export let version, gist, example;
 
 	let repl;
 	let name = 'loading...';
@@ -33,8 +33,6 @@
 
 				name = description;
 
-				let values = {};
-
 				const components = Object.keys(files)
 					.map(file => {
 						const dot = file.lastIndexOf('.');
@@ -42,11 +40,6 @@
 
 						const source = files[file].content;
 
-						// while we're here...
-						if (file === 'data.json' || file === 'data.json5') {
-							values = tryParseData(source) || {};
-						}
-
 						return {
 							name: file.slice(0, dot),
 							type: file.slice(dot + 1),
@@ -63,31 +56,20 @@
 						return a.name < b.name ? -1 : 1;
 					});
 
-				repl.set({ components, values });
+				repl.set({ components });
 			});
-		} else if (demo) {
-			const url = `api/examples/${demo}`;
-
-			fetch(url).then(async response => {
+		} else if (example) {
+			fetch(`examples/${example}.json`).then(async response => {
 				if (response.ok) {
 					const data = await response.json();
 
 					repl.set({
-						values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
-						components: data.components
+						components: process_example(data.files)
 					});
 				}
 			});
 		}
 	});
-
-	function tryParseData(json5) {
-		try {
-			return fleece.evaluate(json5);
-		} catch (err) {
-			return null;
-		}
-	}
 </script>
 
 <style>
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 4adf5368d01b..8671717f5ddc 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -3,7 +3,7 @@
 		return {
 			version: query.version || 'beta',
 			gist_id: query.gist,
-			demo: query.demo || 'hello-world'
+			example: query.example || 'hello-world'
 		};
 	}
 </script>
@@ -11,12 +11,13 @@
 <script>
 	import { onMount } from 'svelte';
 	import { locate } from 'locate-character';
-	import * as fleece from 'golden-fleece';
+	import { process_example } from './_utils/process_example.js';
 	import AppControls from './_components/AppControls/index.svelte';
 	import Repl from '../../components/Repl/index.svelte';
-	import examples from '../../../content/examples/manifest.json';
 
-	export let version, demo, gist_id;
+	export let version, example, gist_id;
+
+	console.log({ example });
 
 	let repl;
 	let gist;
@@ -28,7 +29,7 @@
 
 		if (version !== 'latest') params.push(`version=${version}`);
 		if (gist_id) params.push(`gist=${gist_id}`);
-		else if (demo) params.push(`demo=${demo}`);
+		else if (example) params.push(`example=${example}`);
 
 		const url = params.length > 0
 			? `repl?${params.join('&')}`
@@ -37,13 +38,6 @@
 		history.replaceState({}, 'x', url);
 	}
 
-	const slugs = new Set();
-	examples.forEach(group => {
-		group.examples.forEach(example => {
-			slugs.add(example.slug);
-		});
-	});
-
 	onMount(() => {
 		if (version !== 'local') {
 			fetch(`https://unpkg.com/svelte@${version || 'beta'}/package.json`)
@@ -60,8 +54,6 @@
 
 				name = description;
 
-				let values = {};
-
 				const components = Object.keys(files)
 					.map(file => {
 						const dot = file.lastIndexOf('.');
@@ -69,11 +61,6 @@
 
 						const source = files[file].content;
 
-						// while we're here...
-						if (file === 'data.json' || file === 'data.json5') {
-							values = tryParseData(source) || {};
-						}
-
 						let type = file.slice(dot + 1);
 						if (type === 'html') type = 'svelte';
 
@@ -93,28 +80,22 @@
 						return a.name < b.name ? -1 : 1;
 					});
 
-				repl.set({ components, values });
+				repl.set({ components });
 			});
 		}
 	});
 
-	function load_demo(slug) {
-		const url = slugs.has(slug)
-			? `api/examples/${slug}`
-			: `guide/demo/${slug}.json`;
+	function load_example(slug) {
+		console.log(`loading ${slug}`);
 
-		fetch(url).then(async response => {
+		fetch(`examples/${slug}.json`).then(async response => {
 			if (response.ok) {
 				const data = await response.json();
 
 				name = data.title;
 
-				console.log(data.components);
-
-				repl.set({
-					values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
-					components: data.components
-				});
+				const components = process_example(data.files);
+				repl.set({ components });
 
 				gist = null;
 			}
@@ -122,22 +103,13 @@
 	}
 
 	function handle_fork(event) {
-		console.log(event);
-		demo = null;
+		example = null;
 		gist = event.detail.gist;
 		gist_id = gist.id;
 	}
 
-	function tryParseData(json5) {
-		try {
-			return fleece.evaluate(json5);
-		} catch (err) {
-			return null;
-		}
-	}
-
-	$: if (process.browser && demo) {
-		load_demo(demo);
+	$: if (process.browser && example) {
+		load_example(example);
 	}
 </script>
 
@@ -191,12 +163,10 @@
 
 <div class="repl-outer {zen_mode ? 'zen-mode' : ''}">
 	<AppControls
-		{examples}
 		{name}
 		{gist}
 		{repl}
 		bind:zen_mode
-		on:select="{e => (demo = e.detail.slug, gist = null)}"
 		on:forked={handle_fork}
 	/>
 
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 1b71b08b94a3..eca56862705b 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -64,23 +64,21 @@
 	});
 
 	$: if (repl) {
+		completed = false;
 		repl.set({
-			components: chapter.app_a.map(clone),
-			values: {}
+			components: chapter.app_a.map(clone)
 		});
 	}
 
 	function reset() {
 		repl.update({
-			components: chapter.app_a.map(clone),
-			values: {}
+			components: chapter.app_a.map(clone)
 		});
 	}
 
 	function complete() {
 		repl.update({
-			components: chapter.app_b.map(clone),
-			values: {}
+			components: chapter.app_b.map(clone)
 		});
 	}
 
@@ -258,6 +256,6 @@
 	</div>
 
 	<div class="tutorial-repl">
-		<Repl bind:this={repl} orientation="rows" show_props={false} on:change={handle_change}/>
+		<Repl bind:this={repl} orientation="rows" on:change={handle_change}/>
 	</div>
 </div>
diff --git a/site/static/examples/thumbnails/7guis-circles.png b/site/static/examples/thumbnails/7guis-circles.png
new file mode 100644
index 000000000000..653343a48cfc
Binary files /dev/null and b/site/static/examples/thumbnails/7guis-circles.png differ
diff --git a/site/static/examples/thumbnails/7guis-counter.png b/site/static/examples/thumbnails/7guis-counter.png
new file mode 100644
index 000000000000..1b2c25182b71
Binary files /dev/null and b/site/static/examples/thumbnails/7guis-counter.png differ
diff --git a/site/static/examples/thumbnails/7guis-crud.png b/site/static/examples/thumbnails/7guis-crud.png
new file mode 100644
index 000000000000..6eaa8b25fd5a
Binary files /dev/null and b/site/static/examples/thumbnails/7guis-crud.png differ
diff --git a/site/static/examples/thumbnails/7guis-flight-booker.png b/site/static/examples/thumbnails/7guis-flight-booker.png
new file mode 100644
index 000000000000..f2f523884129
Binary files /dev/null and b/site/static/examples/thumbnails/7guis-flight-booker.png differ
diff --git a/site/static/examples/thumbnails/7guis-temperature.png b/site/static/examples/thumbnails/7guis-temperature.png
new file mode 100644
index 000000000000..2d9a5f19b894
Binary files /dev/null and b/site/static/examples/thumbnails/7guis-temperature.png differ
diff --git a/site/static/examples/thumbnails/7guis-timer.png b/site/static/examples/thumbnails/7guis-timer.png
new file mode 100644
index 000000000000..c025f7439857
Binary files /dev/null and b/site/static/examples/thumbnails/7guis-timer.png differ
diff --git a/site/static/examples/thumbnails/actions.png b/site/static/examples/thumbnails/actions.png
new file mode 100644
index 000000000000..0f5d239edb1a
Binary files /dev/null and b/site/static/examples/thumbnails/actions.png differ
diff --git a/site/static/examples/thumbnails/adding-parameters-to-actions.png b/site/static/examples/thumbnails/adding-parameters-to-actions.png
new file mode 100644
index 000000000000..6c5b0822a584
Binary files /dev/null and b/site/static/examples/thumbnails/adding-parameters-to-actions.png differ
diff --git a/site/static/examples/thumbnails/adding-parameters-to-transitions.png b/site/static/examples/thumbnails/adding-parameters-to-transitions.png
new file mode 100644
index 000000000000..b32c6d3c9a80
Binary files /dev/null and b/site/static/examples/thumbnails/adding-parameters-to-transitions.png differ
diff --git a/site/static/examples/thumbnails/animate.png b/site/static/examples/thumbnails/animate.png
new file mode 100644
index 000000000000..8334d7ecb0af
Binary files /dev/null and b/site/static/examples/thumbnails/animate.png differ
diff --git a/site/static/examples/thumbnails/auto-subscriptions.png b/site/static/examples/thumbnails/auto-subscriptions.png
new file mode 100644
index 000000000000..2f2170697420
Binary files /dev/null and b/site/static/examples/thumbnails/auto-subscriptions.png differ
diff --git a/site/static/examples/thumbnails/await-blocks.png b/site/static/examples/thumbnails/await-blocks.png
new file mode 100644
index 000000000000..138f943af314
Binary files /dev/null and b/site/static/examples/thumbnails/await-blocks.png differ
diff --git a/site/static/examples/thumbnails/bar-chart.png b/site/static/examples/thumbnails/bar-chart.png
new file mode 100644
index 000000000000..178bf4d92c6c
Binary files /dev/null and b/site/static/examples/thumbnails/bar-chart.png differ
diff --git a/site/static/examples/thumbnails/bind-this.png b/site/static/examples/thumbnails/bind-this.png
new file mode 100644
index 000000000000..29531b76a84f
Binary files /dev/null and b/site/static/examples/thumbnails/bind-this.png differ
diff --git a/site/static/examples/thumbnails/checkbox-inputs.png b/site/static/examples/thumbnails/checkbox-inputs.png
new file mode 100644
index 000000000000..06342ff48890
Binary files /dev/null and b/site/static/examples/thumbnails/checkbox-inputs.png differ
diff --git a/site/static/examples/thumbnails/class-shorthand.png b/site/static/examples/thumbnails/class-shorthand.png
new file mode 100644
index 000000000000..31f34e964ff0
Binary files /dev/null and b/site/static/examples/thumbnails/class-shorthand.png differ
diff --git a/site/static/examples/thumbnails/classes.png b/site/static/examples/thumbnails/classes.png
new file mode 100644
index 000000000000..1eee71fa7a75
Binary files /dev/null and b/site/static/examples/thumbnails/classes.png differ
diff --git a/site/static/examples/thumbnails/clock.png b/site/static/examples/thumbnails/clock.png
new file mode 100644
index 000000000000..3f2b2b0d3ebc
Binary files /dev/null and b/site/static/examples/thumbnails/clock.png differ
diff --git a/site/static/examples/thumbnails/component-bindings.png b/site/static/examples/thumbnails/component-bindings.png
new file mode 100644
index 000000000000..481e129b57ef
Binary files /dev/null and b/site/static/examples/thumbnails/component-bindings.png differ
diff --git a/site/static/examples/thumbnails/component-events.png b/site/static/examples/thumbnails/component-events.png
new file mode 100644
index 000000000000..960c7c7dbed0
Binary files /dev/null and b/site/static/examples/thumbnails/component-events.png differ
diff --git a/site/static/examples/thumbnails/context-api.png b/site/static/examples/thumbnails/context-api.png
new file mode 100644
index 000000000000..2a9c16e4c158
Binary files /dev/null and b/site/static/examples/thumbnails/context-api.png differ
diff --git a/site/static/examples/thumbnails/custom-css-transitions.png b/site/static/examples/thumbnails/custom-css-transitions.png
new file mode 100644
index 000000000000..05ae8357014d
Binary files /dev/null and b/site/static/examples/thumbnails/custom-css-transitions.png differ
diff --git a/site/static/examples/thumbnails/custom-js-transitions.png b/site/static/examples/thumbnails/custom-js-transitions.png
new file mode 100644
index 000000000000..470af19284c5
Binary files /dev/null and b/site/static/examples/thumbnails/custom-js-transitions.png differ
diff --git a/site/static/examples/thumbnails/custom-stores.png b/site/static/examples/thumbnails/custom-stores.png
new file mode 100644
index 000000000000..2f2170697420
Binary files /dev/null and b/site/static/examples/thumbnails/custom-stores.png differ
diff --git a/site/static/examples/thumbnails/debug.png b/site/static/examples/thumbnails/debug.png
new file mode 100644
index 000000000000..c3155954bcd4
Binary files /dev/null and b/site/static/examples/thumbnails/debug.png differ
diff --git a/site/static/examples/thumbnails/declaring-props.png b/site/static/examples/thumbnails/declaring-props.png
new file mode 100644
index 000000000000..6eda4ecaf5dc
Binary files /dev/null and b/site/static/examples/thumbnails/declaring-props.png differ
diff --git a/site/static/examples/thumbnails/default-values.png b/site/static/examples/thumbnails/default-values.png
new file mode 100644
index 000000000000..e8c26e7280a7
Binary files /dev/null and b/site/static/examples/thumbnails/default-values.png differ
diff --git a/site/static/examples/thumbnails/deferred-transitions.png b/site/static/examples/thumbnails/deferred-transitions.png
new file mode 100644
index 000000000000..8334d7ecb0af
Binary files /dev/null and b/site/static/examples/thumbnails/deferred-transitions.png differ
diff --git a/site/static/examples/thumbnails/derived-stores.png b/site/static/examples/thumbnails/derived-stores.png
new file mode 100644
index 000000000000..b8d0f1802787
Binary files /dev/null and b/site/static/examples/thumbnails/derived-stores.png differ
diff --git a/site/static/examples/thumbnails/dimensions.png b/site/static/examples/thumbnails/dimensions.png
new file mode 100644
index 000000000000..95796d6b12e8
Binary files /dev/null and b/site/static/examples/thumbnails/dimensions.png differ
diff --git a/site/static/examples/thumbnails/dom-event-forwarding.png b/site/static/examples/thumbnails/dom-event-forwarding.png
new file mode 100644
index 000000000000..89136fe37e23
Binary files /dev/null and b/site/static/examples/thumbnails/dom-event-forwarding.png differ
diff --git a/site/static/examples/thumbnails/dom-events.png b/site/static/examples/thumbnails/dom-events.png
new file mode 100644
index 000000000000..a219f75c48c5
Binary files /dev/null and b/site/static/examples/thumbnails/dom-events.png differ
diff --git a/site/static/examples/thumbnails/dynamic-attributes.png b/site/static/examples/thumbnails/dynamic-attributes.png
new file mode 100644
index 000000000000..f209e9959015
Binary files /dev/null and b/site/static/examples/thumbnails/dynamic-attributes.png differ
diff --git a/site/static/examples/thumbnails/each-block-bindings.png b/site/static/examples/thumbnails/each-block-bindings.png
new file mode 100644
index 000000000000..4d1369be97a1
Binary files /dev/null and b/site/static/examples/thumbnails/each-block-bindings.png differ
diff --git a/site/static/examples/thumbnails/each-blocks.png b/site/static/examples/thumbnails/each-blocks.png
new file mode 100644
index 000000000000..3a0c6461312e
Binary files /dev/null and b/site/static/examples/thumbnails/each-blocks.png differ
diff --git a/site/static/examples/thumbnails/else-blocks.png b/site/static/examples/thumbnails/else-blocks.png
new file mode 100644
index 000000000000..dfd2585b188f
Binary files /dev/null and b/site/static/examples/thumbnails/else-blocks.png differ
diff --git a/site/static/examples/thumbnails/else-if-blocks.png b/site/static/examples/thumbnails/else-if-blocks.png
new file mode 100644
index 000000000000..40abea383870
Binary files /dev/null and b/site/static/examples/thumbnails/else-if-blocks.png differ
diff --git a/site/static/examples/thumbnails/event-forwarding.png b/site/static/examples/thumbnails/event-forwarding.png
new file mode 100644
index 000000000000..960c7c7dbed0
Binary files /dev/null and b/site/static/examples/thumbnails/event-forwarding.png differ
diff --git a/site/static/examples/thumbnails/event-modifiers.png b/site/static/examples/thumbnails/event-modifiers.png
new file mode 100644
index 000000000000..f8a616690aa6
Binary files /dev/null and b/site/static/examples/thumbnails/event-modifiers.png differ
diff --git a/site/static/examples/thumbnails/group-inputs.png b/site/static/examples/thumbnails/group-inputs.png
new file mode 100644
index 000000000000..e1c7ff791bfd
Binary files /dev/null and b/site/static/examples/thumbnails/group-inputs.png differ
diff --git a/site/static/examples/thumbnails/hacker-news.png b/site/static/examples/thumbnails/hacker-news.png
new file mode 100644
index 000000000000..0f02ccf0a9b3
Binary files /dev/null and b/site/static/examples/thumbnails/hacker-news.png differ
diff --git a/site/static/examples/thumbnails/hello-world.png b/site/static/examples/thumbnails/hello-world.png
new file mode 100644
index 000000000000..b9acfca3b7be
Binary files /dev/null and b/site/static/examples/thumbnails/hello-world.png differ
diff --git a/site/static/examples/thumbnails/html-tags.png b/site/static/examples/thumbnails/html-tags.png
new file mode 100644
index 000000000000..6d744e4eb37e
Binary files /dev/null and b/site/static/examples/thumbnails/html-tags.png differ
diff --git a/site/static/examples/thumbnails/if-blocks.png b/site/static/examples/thumbnails/if-blocks.png
new file mode 100644
index 000000000000..dfd2585b188f
Binary files /dev/null and b/site/static/examples/thumbnails/if-blocks.png differ
diff --git a/site/static/examples/thumbnails/immutable-data.png b/site/static/examples/thumbnails/immutable-data.png
new file mode 100644
index 000000000000..768486e86f01
Binary files /dev/null and b/site/static/examples/thumbnails/immutable-data.png differ
diff --git a/site/static/examples/thumbnails/in-and-out.png b/site/static/examples/thumbnails/in-and-out.png
new file mode 100644
index 000000000000..dca49b3f9dec
Binary files /dev/null and b/site/static/examples/thumbnails/in-and-out.png differ
diff --git a/site/static/examples/thumbnails/inline-handlers.png b/site/static/examples/thumbnails/inline-handlers.png
new file mode 100644
index 000000000000..a219f75c48c5
Binary files /dev/null and b/site/static/examples/thumbnails/inline-handlers.png differ
diff --git a/site/static/examples/thumbnails/keyed-each-blocks.png b/site/static/examples/thumbnails/keyed-each-blocks.png
new file mode 100644
index 000000000000..137a3cac74dc
Binary files /dev/null and b/site/static/examples/thumbnails/keyed-each-blocks.png differ
diff --git a/site/static/examples/thumbnails/media-elements.png b/site/static/examples/thumbnails/media-elements.png
new file mode 100644
index 000000000000..c233bce670e6
Binary files /dev/null and b/site/static/examples/thumbnails/media-elements.png differ
diff --git a/site/static/examples/thumbnails/modal.png b/site/static/examples/thumbnails/modal.png
new file mode 100644
index 000000000000..0fda9555cfe0
Binary files /dev/null and b/site/static/examples/thumbnails/modal.png differ
diff --git a/site/static/examples/thumbnails/module-exports.png b/site/static/examples/thumbnails/module-exports.png
new file mode 100644
index 000000000000..4838fe704e81
Binary files /dev/null and b/site/static/examples/thumbnails/module-exports.png differ
diff --git a/site/static/examples/thumbnails/multiple-select-bindings.png b/site/static/examples/thumbnails/multiple-select-bindings.png
new file mode 100644
index 000000000000..7b90cb228053
Binary files /dev/null and b/site/static/examples/thumbnails/multiple-select-bindings.png differ
diff --git a/site/static/examples/thumbnails/named-slots.png b/site/static/examples/thumbnails/named-slots.png
new file mode 100644
index 000000000000..a5f586905f41
Binary files /dev/null and b/site/static/examples/thumbnails/named-slots.png differ
diff --git a/site/static/examples/thumbnails/nested-components.png b/site/static/examples/thumbnails/nested-components.png
new file mode 100644
index 000000000000..12700c9302db
Binary files /dev/null and b/site/static/examples/thumbnails/nested-components.png differ
diff --git a/site/static/examples/thumbnails/numeric-inputs.png b/site/static/examples/thumbnails/numeric-inputs.png
new file mode 100644
index 000000000000..0db2df145016
Binary files /dev/null and b/site/static/examples/thumbnails/numeric-inputs.png differ
diff --git a/site/static/examples/thumbnails/ondestroy.png b/site/static/examples/thumbnails/ondestroy.png
new file mode 100644
index 000000000000..00dfd95496f5
Binary files /dev/null and b/site/static/examples/thumbnails/ondestroy.png differ
diff --git a/site/static/examples/thumbnails/onmount.png b/site/static/examples/thumbnails/onmount.png
new file mode 100644
index 000000000000..c488473d665a
Binary files /dev/null and b/site/static/examples/thumbnails/onmount.png differ
diff --git a/site/static/examples/thumbnails/reactive-assignments.png b/site/static/examples/thumbnails/reactive-assignments.png
new file mode 100644
index 000000000000..4b8803caf1f4
Binary files /dev/null and b/site/static/examples/thumbnails/reactive-assignments.png differ
diff --git a/site/static/examples/thumbnails/reactive-declarations.png b/site/static/examples/thumbnails/reactive-declarations.png
new file mode 100644
index 000000000000..bb342db5b086
Binary files /dev/null and b/site/static/examples/thumbnails/reactive-declarations.png differ
diff --git a/site/static/examples/thumbnails/reactive-statements.png b/site/static/examples/thumbnails/reactive-statements.png
new file mode 100644
index 000000000000..4b8803caf1f4
Binary files /dev/null and b/site/static/examples/thumbnails/reactive-statements.png differ
diff --git a/site/static/examples/thumbnails/readable-stores.png b/site/static/examples/thumbnails/readable-stores.png
new file mode 100644
index 000000000000..16454533aec0
Binary files /dev/null and b/site/static/examples/thumbnails/readable-stores.png differ
diff --git a/site/static/examples/thumbnails/scatterplot.png b/site/static/examples/thumbnails/scatterplot.png
new file mode 100644
index 000000000000..b52b3a4d42a2
Binary files /dev/null and b/site/static/examples/thumbnails/scatterplot.png differ
diff --git a/site/static/examples/thumbnails/select-bindings.png b/site/static/examples/thumbnails/select-bindings.png
new file mode 100644
index 000000000000..3b1bd3ea7cd4
Binary files /dev/null and b/site/static/examples/thumbnails/select-bindings.png differ
diff --git a/site/static/examples/thumbnails/sharing-code.png b/site/static/examples/thumbnails/sharing-code.png
new file mode 100644
index 000000000000..6fde40dcaf98
Binary files /dev/null and b/site/static/examples/thumbnails/sharing-code.png differ
diff --git a/site/static/examples/thumbnails/slot-fallbacks.png b/site/static/examples/thumbnails/slot-fallbacks.png
new file mode 100644
index 000000000000..debf43c24cd1
Binary files /dev/null and b/site/static/examples/thumbnails/slot-fallbacks.png differ
diff --git a/site/static/examples/thumbnails/slot-props.png b/site/static/examples/thumbnails/slot-props.png
new file mode 100644
index 000000000000..6a1551ed4a31
Binary files /dev/null and b/site/static/examples/thumbnails/slot-props.png differ
diff --git a/site/static/examples/thumbnails/slots.png b/site/static/examples/thumbnails/slots.png
new file mode 100644
index 000000000000..3b755c39bdd2
Binary files /dev/null and b/site/static/examples/thumbnails/slots.png differ
diff --git a/site/static/examples/thumbnails/spread-props.png b/site/static/examples/thumbnails/spread-props.png
new file mode 100644
index 000000000000..449a36ca05dc
Binary files /dev/null and b/site/static/examples/thumbnails/spread-props.png differ
diff --git a/site/static/examples/thumbnails/spring.png b/site/static/examples/thumbnails/spring.png
new file mode 100644
index 000000000000..0701a058db8b
Binary files /dev/null and b/site/static/examples/thumbnails/spring.png differ
diff --git a/site/static/examples/thumbnails/styling.png b/site/static/examples/thumbnails/styling.png
new file mode 100644
index 000000000000..f8ad7e4a3937
Binary files /dev/null and b/site/static/examples/thumbnails/styling.png differ
diff --git a/site/static/examples/thumbnails/svelte-body.png b/site/static/examples/thumbnails/svelte-body.png
new file mode 100644
index 000000000000..aae132bdc290
Binary files /dev/null and b/site/static/examples/thumbnails/svelte-body.png differ
diff --git a/site/static/examples/thumbnails/svelte-component.png b/site/static/examples/thumbnails/svelte-component.png
new file mode 100644
index 000000000000..eabcfc8be9a4
Binary files /dev/null and b/site/static/examples/thumbnails/svelte-component.png differ
diff --git a/site/static/examples/thumbnails/svelte-head.png b/site/static/examples/thumbnails/svelte-head.png
new file mode 100644
index 000000000000..944c473aa6d6
Binary files /dev/null and b/site/static/examples/thumbnails/svelte-head.png differ
diff --git a/site/static/examples/thumbnails/svelte-options.png b/site/static/examples/thumbnails/svelte-options.png
new file mode 100644
index 000000000000..c07cc884cab8
Binary files /dev/null and b/site/static/examples/thumbnails/svelte-options.png differ
diff --git a/site/static/examples/thumbnails/svelte-self.png b/site/static/examples/thumbnails/svelte-self.png
new file mode 100644
index 000000000000..ad44d6a25ddb
Binary files /dev/null and b/site/static/examples/thumbnails/svelte-self.png differ
diff --git a/site/static/examples/thumbnails/svelte-window.png b/site/static/examples/thumbnails/svelte-window.png
new file mode 100644
index 000000000000..1184e46da24f
Binary files /dev/null and b/site/static/examples/thumbnails/svelte-window.png differ
diff --git a/site/static/examples/thumbnails/svg-transitions.png b/site/static/examples/thumbnails/svg-transitions.png
new file mode 100644
index 000000000000..87e46e9df5fd
Binary files /dev/null and b/site/static/examples/thumbnails/svg-transitions.png differ
diff --git a/site/static/examples/thumbnails/text-inputs.png b/site/static/examples/thumbnails/text-inputs.png
new file mode 100644
index 000000000000..f644c73f805d
Binary files /dev/null and b/site/static/examples/thumbnails/text-inputs.png differ
diff --git a/site/static/examples/thumbnails/textarea-inputs.png b/site/static/examples/thumbnails/textarea-inputs.png
new file mode 100644
index 000000000000..08d35db4da69
Binary files /dev/null and b/site/static/examples/thumbnails/textarea-inputs.png differ
diff --git a/site/static/examples/thumbnails/tick.png b/site/static/examples/thumbnails/tick.png
new file mode 100644
index 000000000000..f2de0ee11f17
Binary files /dev/null and b/site/static/examples/thumbnails/tick.png differ
diff --git a/site/static/examples/thumbnails/transition-events.png b/site/static/examples/thumbnails/transition-events.png
new file mode 100644
index 000000000000..52fee5f138a4
Binary files /dev/null and b/site/static/examples/thumbnails/transition-events.png differ
diff --git a/site/static/examples/thumbnails/transition.png b/site/static/examples/thumbnails/transition.png
new file mode 100644
index 000000000000..4d962a42c9a1
Binary files /dev/null and b/site/static/examples/thumbnails/transition.png differ
diff --git a/site/static/examples/thumbnails/tweened.png b/site/static/examples/thumbnails/tweened.png
new file mode 100644
index 000000000000..34af4dbca430
Binary files /dev/null and b/site/static/examples/thumbnails/tweened.png differ
diff --git a/site/static/examples/thumbnails/update.png b/site/static/examples/thumbnails/update.png
new file mode 100644
index 000000000000..1b84ccf5ba72
Binary files /dev/null and b/site/static/examples/thumbnails/update.png differ
diff --git a/site/static/examples/thumbnails/writable-stores.png b/site/static/examples/thumbnails/writable-stores.png
new file mode 100644
index 000000000000..2f2170697420
Binary files /dev/null and b/site/static/examples/thumbnails/writable-stores.png differ
diff --git a/site/static/workers/compiler.js b/site/static/workers/compiler.js
index d234c2a0bb68..e91909731035 100644
--- a/site/static/workers/compiler.js
+++ b/site/static/workers/compiler.js
@@ -36,16 +36,11 @@ function compile({ id, source, options, entry }) {
 			Object.assign({}, commonCompilerOptions, options)
 		);
 
-		const props = entry
-			? (vars || stats.vars).map(v => v.writable && v.export_name).filter(Boolean) // TODO remove stats post-launch
-			: null;
-
 		return {
 			id,
 			result: {
 				js: js.code,
-				css: css.code || `/* Add a <sty` + `le> tag to see compiled CSS */`,
-				props
+				css: css.code || `/* Add a <sty` + `le> tag to see compiled CSS */`
 			}
 		};
 	} catch (err) {
@@ -57,8 +52,7 @@ function compile({ id, source, options, entry }) {
 			id,
 			result: {
 				js: message,
-				css: message,
-				props: null
+				css: message
 			}
 		};
 	}