diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index aad7e3fc19..a6e17f8bc2 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -101,27 +101,7 @@ Text can also contain JavaScript expressions:
 ```
 
 
-### HTML expressions
-
-```sv
-{@html expression}
-```
-
----
-
-In a text expression, characters like `<` and `>` are escaped. With HTML expressions, they're not.
-
-> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
-
-```html
-<div class="blog-post">
-	<h1>{post.title}</h1>
-	{@html post.content}
-</div>
-```
-
-
-### If blocks
+### {#if ...}
 
 ```sv
 {#if expression}...{/if}
@@ -158,7 +138,7 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
 ```
 
 
-### Each blocks
+### {#each ...}
 
 ```sv
 {#each expression as name}...{/each}
@@ -229,7 +209,7 @@ An each block can also have an `{:else}` clause, which is rendered if the list i
 ```
 
 
-### Await blocks
+### {#await ...}
 
 ```sv
 {#await expression}...{:then name}...{:catch name}...{/await}
@@ -283,7 +263,80 @@ If you don't care about the pending state, you can also omit the initial block.
 ```
 
 
-### DOM events
+### {@html ...}
+
+```sv
+{@html expression}
+```
+
+---
+
+In a text expression, characters like `<` and `>` are escaped. With HTML expressions, they're not.
+
+> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
+
+```html
+<div class="blog-post">
+	<h1>{post.title}</h1>
+	{@html post.content}
+</div>
+```
+
+
+### {@debug ...}
+
+```sv
+{@debug}
+```
+```sv
+{@debug var1, var2, ..., varN}
+```
+
+---
+
+The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
+
+It accepts a comma-separated list of variable names (not arbitrary expressions).
+
+```html
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
+```
+
+---
+
+`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
+
+```html
+<!-- Compiles -->
+{@debug user}
+{@debug user1, user2, user3}
+
+<!-- WON'T compile -->
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
+
+
+
+### Element directives
+
+As well as attributes, elements can have *directives*, which control the element's behaviour in some way.
+
+
+#### [on:*eventname*](on_component_event)
 
 ```sv
 on:eventname={handler}
@@ -324,6 +377,13 @@ Handlers can be declared inline with no performance penalty. As with attributes,
 
 Add *modifiers* to DOM events with the `|` character.
 
+```html
+<form on:submit|preventDefault={handleSubmit}>
+	<!-- the `submit` event's default is prevented,
+	     so the page won't reload -->
+</form>
+```
+
 The following modifiers are available:
 
 * `preventDefault` — calls `event.preventDefault()` before running the handler
@@ -334,13 +394,6 @@ The following modifiers are available:
 
 Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
 
-```html
-<form on:submit|preventDefault={handleSubmit}>
-	<!-- the `submit` event's default is prevented,
-	     so the page won't reload -->
-</form>
-```
-
 ---
 
 If the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
@@ -370,39 +423,11 @@ It's possible to have multiple event listeners for the same event:
 <button on:click={increment} on:click={track}>Click me!</button>
 ```
 
-### Component events
-
-```sv
-on:eventname={handler}
-```
-
----
-
-Components can emit events using [createEventDispatcher](docs#createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
-
-```html
-<SomeComponent on:whatever={handler}/>
-```
-
----
-
-As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
-
-```html
-<SomeComponent on:whatever/>
-```
-
-### Element bindings
+#### [bind:*property*](bind_element_property)
 
 ```sv
 bind:property={variable}
 ```
-```sv
-bind:group={variable}
-```
-```sv
-bind:this={dom_node}
-```
 
 ---
 
@@ -436,31 +461,8 @@ Numeric input values are coerced; even though `input.value` is a string as far a
 <input type="range" bind:value={num}>
 ```
 
-#### Binding related elements
 
----
-
-Inputs that work together can use `bind:group`.
-
-```html
-<script>
-	let tortilla = 'Plain';
-	let fillings = [];
-</script>
-
-<!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain">
-<input type="radio" bind:group={tortilla} value="Whole wheat">
-<input type="radio" bind:group={tortilla} value="Spinach">
-
-<!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice">
-<input type="checkbox" bind:group={fillings} value="Beans">
-<input type="checkbox" bind:group={fillings} value="Cheese">
-<input type="checkbox" bind:group={fillings} value="Guac (extra)">
-```
-
-#### Binding `<select>` value
+##### Binding `<select>` value
 
 ---
 
@@ -500,7 +502,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
-#### Media element bindings
+##### Media element bindings
 
 ---
 
@@ -530,7 +532,7 @@ Media elements (`<audio>` and `<video>`) have their own set of bindings — four
 ></video>
 ```
 
-#### Block-level element bindings
+##### Block-level element bindings
 
 ---
 
@@ -550,61 +552,61 @@ Block-level elements have 4 readonly bindings, measured using a technique simila
 </div>
 ```
 
-#### Binding a DOM node
+#### bind:group
+
+```sv
+bind:group={variable}
+```
 
 ---
 
-To get a reference to a DOM node, use `bind:this`.
+Inputs that work together can use `bind:group`.
 
 ```html
 <script>
-	import { onMount } from 'svelte';
-
-	let canvasElement;
-
-	onMount(() => {
-		const ctx = canvasElement.getContext('2d');
-		drawStuff(ctx);
-	});
+	let tortilla = 'Plain';
+	let fillings = [];
 </script>
 
-<canvas bind:this={canvasElement}></canvas>
-```
+<!-- grouped radio inputs are mutually exclusive -->
+<input type="radio" bind:group={tortilla} value="Plain">
+<input type="radio" bind:group={tortilla} value="Whole wheat">
+<input type="radio" bind:group={tortilla} value="Spinach">
 
+<!-- grouped checkbox inputs populate an array -->
+<input type="checkbox" bind:group={fillings} value="Rice">
+<input type="checkbox" bind:group={fillings} value="Beans">
+<input type="checkbox" bind:group={fillings} value="Cheese">
+<input type="checkbox" bind:group={fillings} value="Guac (extra)">
+```
 
-### Component bindings
+#### [bind:this](bind_element)
 
 ```sv
-bind:property={variable}
-```
-```sv
-bind:this={component_instance}
+bind:this={dom_node}
 ```
 
 ---
 
-You can bind to component props using the same mechanism.
+To get a reference to a DOM node, use `bind:this`.
 
 ```html
-<Keypad bind:value={pin}/>
-```
-
----
-
-Components also support `bind:this`, allowing you to interact with component instances programmatically.
+<script>
+	import { onMount } from 'svelte';
 
-> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
+	let canvasElement;
 
-```html
-<ShoppingCart bind:this={cart}/>
+	onMount(() => {
+		const ctx = canvasElement.getContext('2d');
+		drawStuff(ctx);
+	});
+</script>
 
-<button on:click={() => cart.empty()}>
-	Empty shopping cart
-</button>
+<canvas bind:this={canvasElement}></canvas>
 ```
 
 
-### Classes
+#### class:*name*
 
 ```sv
 class:name={value}
@@ -630,7 +632,7 @@ A `class:` directive provides a shorter way of toggling a class on an element.
 ```
 
 
-### Actions
+#### use:*action*
 
 ```sv
 use:action
@@ -695,43 +697,19 @@ An action can have parameters. If the returned value has an `update` method, it
 ```
 
 
-### Transitions
+#### transition:*fn*
 
 ```sv
-transition:name
+transition:fn
 ```
 ```sv
-transition:name={params}
+transition:fn={params}
 ```
 ```sv
-transition:name|local
+transition:fn|local
 ```
 ```sv
-transition:name|local={params}
-```
-```sv
-in:name
-```
-```sv
-in:name={params}
-```
-```sv
-in:name|local
-```
-```sv
-in:name|local={params}
-```
-```sv
-out:name
-```
-```sv
-out:name={params}
-```
-```sv
-out:name|local
-```
-```sv
-out:name|local={params}
+transition:fn|local={params}
 ```
 
 
@@ -747,7 +725,7 @@ transition = (node: HTMLElement, params: any) => {
 
 ---
 
-A transition is triggered by an element entering or leaving the DOM as a result of a state change. Transitions do not run when a component is first mounted, but only on subsequent updates.
+A transition is triggered by an element entering or leaving the DOM as a result of a state change.
 
 Elements inside an *outroing* block are kept in the DOM until all current transitions have completed.
 
@@ -761,21 +739,9 @@ The `transition:` directive indicates a *bidirectional* transition, which means
 {/if}
 ```
 
----
-
-The `in:` and `out:` directives are not bidirectional. An in transition will continue to 'play' alongside the out transition, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
-
-```html
-{#if visible}
-	<div in:fly out:fade>
-		flies in, fades out
-	</div>
-{/if}
-```
-
 > By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](docs#Client-side_component_API).
 
-#### Transition parameters
+##### Transition parameters
 
 ---
 
@@ -791,7 +757,7 @@ Like actions, transitions can have parameters.
 {/if}
 ```
 
-#### Custom transition functions
+##### Custom transition functions
 
 ---
 
@@ -867,7 +833,7 @@ A custom transition function can also return a `tick` function, which is called
 If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](tutorial/deferred-transitions) possible.
 
 
-#### Transition events
+##### Transition events
 
 ---
 
@@ -911,7 +877,51 @@ Local transitions only play when the block they belong to is created or destroye
 ```
 
 
-### Animations
+#### in:*fn*/out:*fn*
+
+```sv
+in:fn
+```
+```sv
+in:fn={params}
+```
+```sv
+in:fn|local
+```
+```sv
+in:fn|local={params}
+```
+
+```sv
+out:fn
+```
+```sv
+out:fn={params}
+```
+```sv
+out:fn|local
+```
+```sv
+out:fn|local={params}
+```
+
+---
+
+Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM.
+
+Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+
+```html
+{#if visible}
+	<div in:fly out:fade>
+		flies in, fades out
+	</div>
+{/if}
+```
+
+
+
+#### animate:
 
 ```sv
 animate:name
@@ -957,7 +967,7 @@ Animations can be used with Svelte's [built-in animation functions](docs#svelte_
 {/each}
 ```
 
-#### Animation Parameters
+##### Animation Parameters
 
 ---
 
@@ -971,7 +981,7 @@ As with actions and transitions, animations can have parameters.
 {/each}
 ```
 
-#### Custom animation functions
+##### Custom animation functions
 
 ---
 
@@ -1045,9 +1055,68 @@ A custom animation function can also return a `tick` function, which is called *
 {/each}
 ```
 
+### Component directives
 
+#### [on:*eventname*](on_component_event)
 
-### Slots
+```sv
+on:eventname={handler}
+```
+
+---
+
+Components can emit events using [createEventDispatcher](docs#createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+
+```html
+<SomeComponent on:whatever={handler}/>
+```
+
+---
+
+As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
+
+```html
+<SomeComponent on:whatever/>
+```
+
+
+#### [bind:*property*](bind_component_property)
+
+```sv
+bind:property={variable}
+```
+
+---
+
+You can bind to component props using the same mechanism.
+
+```html
+<Keypad bind:value={pin}/>
+```
+
+#### [bind:this](bind_component)
+
+```sv
+bind:this={component_instance}
+```
+
+---
+
+Components also support `bind:this`, allowing you to interact with component instances programmatically.
+
+> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
+
+```html
+<ShoppingCart bind:this={cart}/>
+
+<button on:click={() => cart.empty()}>
+	Empty shopping cart
+</button>
+```
+
+
+
+### `<slot>`
 
 ```sv
 <slot><!-- optional fallback --></slot>
@@ -1079,6 +1148,8 @@ The content is exposed in the child component using the `<slot>` element, which
 </div>
 ```
 
+#### [`<slot name="`*name*`">`](slot_name)
+
 ---
 
 Named slots allow consumers to target specific areas. They can also have fallback content.
@@ -1098,6 +1169,8 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 </div>
 ```
 
+#### [`<slot let:`*name*`={`*value*`}>`](slot_let)
+
 ---
 
 Slots can be rendered zero or more times, and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
@@ -1144,7 +1217,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit
 ```
 
 
-### &lt;svelte:self&gt;
+### `<svelte:self>`
 
 ---
 
@@ -1165,7 +1238,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
 {/if}
 ```
 
-### &lt;svelte:component&gt;
+### `<svelte:component>`
 
 ```sv
 <svelte:component this={expression}>
@@ -1182,7 +1255,7 @@ If `this` is falsy, no component is rendered.
 ```
 
 
-### &lt;svelte:window&gt;
+### `<svelte:window>`
 
 ```sv
 <svelte:window on:event={handler}/>
@@ -1224,7 +1297,7 @@ All except `scrollX` and `scrollY` are readonly.
 ```
 
 
-### &lt;svelte:body&gt;
+### `<svelte:body>`
 
 ```sv
 <svelte:body on:event={handler}/>
@@ -1242,7 +1315,7 @@ As with `<svelte:window>`, this element allows you to add listeners to events on
 ```
 
 
-### &lt;svelte:head&gt;
+### `<svelte:head>`
 
 ```sv
 <svelte:head>
@@ -1259,7 +1332,7 @@ This element makes it possible to insert elements into `document.head`. During s
 ```
 
 
-### &lt;svelte:options&gt;
+### `<svelte:options>`
 
 ```sv
 <svelte:options option={value}>
@@ -1278,51 +1351,4 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ```html
 <svelte:options tag="my-custom-element"/>
-```
-
-
-### @debug
-
-```sv
-{@debug}
-```
-```sv
-{@debug var1, var2, ..., varN}
-```
-
----
-
-The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
-
-It accepts a comma-separated list of variable names (not arbitrary expressions).
-
-```html
-<script>
-	let user = {
-		firstname: 'Ada',
-		lastname: 'Lovelace'
-	};
-</script>
-
-{@debug user}
-
-<h1>Hello {user.firstname}!</h1>
-```
-
----
-
-`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
-
-```html
-<!-- Compiles -->
-{@debug user}
-{@debug user1, user2, user3}
-
-<!-- WON'T compile -->
-{@debug user.firstname}
-{@debug myArray[0]}
-{@debug !isReady}
-{@debug typeof user === 'object'}
-```
-
-The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
+```
\ No newline at end of file
diff --git a/site/package-lock.json b/site/package-lock.json
index 0d85755c33..6d6f96eb21 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1352,9 +1352,9 @@
       }
     },
     "@sveltejs/site-kit": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.0.4.tgz",
-      "integrity": "sha512-BaQhIL1iPhCF+iDXfy9psDvRdFzfyMPkWnoZHfVz+INpHsU2aJmRZOPl9rykXmPyiPo+AwTTNK5vjIvmtwHLPQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.1.0.tgz",
+      "integrity": "sha512-Pe0vsIW5c3LDAY4K7mPa+S1gNAVkpVRfvfylHOPOufhdXOwU3E+YhobrF2MMLcM6FEonJv1Au/RHHSBZu8+aKg==",
       "dev": true,
       "requires": {
         "@sindresorhus/slugify": "^0.9.1",
diff --git a/site/package.json b/site/package.json
index cd34daf987..28c5004189 100644
--- a/site/package.json
+++ b/site/package.json
@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/runtime": "^7.4.4",
     "@sindresorhus/slugify": "^0.9.1",
-    "@sveltejs/site-kit": "^1.0.4",
+    "@sveltejs/site-kit": "^1.1.0",
     "@sveltejs/svelte-repl": "^0.1.8",
     "degit": "^2.1.3",
     "dotenv": "^8.0.0",
diff --git a/site/src/routes/docs/_sections.js b/site/src/routes/docs/_sections.js
index 8f0dc804b9..b6da2315f0 100644
--- a/site/src/routes/docs/_sections.js
+++ b/site/src/routes/docs/_sections.js
@@ -38,7 +38,7 @@ const blockTypes = [
 ];
 
 export default function() {
-	const makeSlug = make_session_slug_processor({
+	const make_slug = make_session_slug_processor({
 		preserve_unicode: SLUG_PRESERVE_UNICODE,
 		separator: SLUG_SEPARATOR
 	});
@@ -51,7 +51,7 @@ export default function() {
 
 			const { content, metadata } = extract_frontmatter(markdown);
 
-			const sectionSlug = makeSlug(metadata.title);
+			const section_slug = make_slug(metadata.title);
 
 			const subsections = [];
 
@@ -108,18 +108,24 @@ export default function() {
 			};
 
 			renderer.heading = (text, level, rawtext) => {
-				const slug = makeSlug(rawtext);
+				let slug;
+
+				const match = /<a href="([^"]+)">(.+)<\/a>/.exec(text);
+				if (match) {
+					slug = match[1];
+					text = match[2];
+				} else {
+					slug = make_slug(rawtext);
+				}
 
 				if (level === 3 || level === 4) {
-					const title = unescape(
-						text
-							.replace(/<\/?code>/g, '')
-							.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
-								if ($3) return `.${$1}(...)`;
-								if ($2) return `.${$1}()`;
-								return `.${$1}`;
-							})
-					);
+					const title = text
+						.replace(/<\/?code>/g, '')
+						.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
+							if ($3) return `.${$1}(...)`;
+							if ($2) return `.${$1}()`;
+							return `.${$1}`;
+						});
 
 					subsections.push({ slug, title, level });
 				}
@@ -147,7 +153,7 @@ export default function() {
 				html: html.replace(/@@(\d+)/g, (m, id) => hashes[id] || m),
 				metadata,
 				subsections,
-				slug: sectionSlug,
+				slug: section_slug,
 				file,
 			};
 		});