From fa99fa0985ff7d8c315b5c3b9bb2323c6d31d363 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 18:54:05 +0000
Subject: [PATCH] different direction

---
 ...023-02-21-streaming-snapshots-sveltekit.md |  2 +-
 .../98-reference/.generated/compile-errors.md |  6 ++
 .../05-bindings/00-text-inputs/App.svelte     |  2 +-
 .../05-bindings/01-numeric-inputs/App.svelte  |  8 +--
 .../05-bindings/02-checkbox-inputs/App.svelte |  2 +-
 .../05-bindings/03-group-inputs/App.svelte    |  8 +--
 .../05-bindings/04-textarea-inputs/App.svelte |  2 +-
 .../05-bindings/06-select-bindings/App.svelte |  4 +-
 .../07-multiple-select-bindings/App.svelte    |  8 +--
 .../08-each-block-bindings/App.svelte         |  4 +-
 .../05-bindings/09-media-elements/App.svelte  |  3 +-
 .../05-bindings/10-dimensions/App.svelte      |  6 +-
 .../05-bindings/11-bind-this/App.svelte       |  2 +-
 .../12-component-bindings/App.svelte          |  2 +-
 .../06-lifecycle/02-update/App.svelte         |  2 +-
 .../examples/08-motion/01-spring/App.svelte   |  4 +-
 .../09-transitions/00-transition/App.svelte   |  2 +-
 .../App.svelte                                |  2 +-
 .../09-transitions/02-in-and-out/App.svelte   |  2 +-
 .../03-custom-css-transitions/App.svelte      |  2 +-
 .../04-custom-js-transitions/App.svelte       |  2 +-
 .../05-transition-events/App.svelte           |  2 +-
 .../10-animations/00-animate/App.svelte       |  4 +-
 .../examples/11-easing/00-easing/App.svelte   |  2 +-
 .../11-easing/00-easing/Controls.svelte       |  6 +-
 .../examples/12-svg/02-bar-chart/App.svelte   |  2 +-
 .../examples/12-svg/03-area-chart/App.svelte  |  2 +-
 .../12-svg/04-scatterplot/Scatterplot.svelte  |  2 +-
 .../12-svg/05-svg-transitions/App.svelte      |  2 +-
 .../App.svelte                                |  2 +-
 .../14-classes/01-class-shorthand/App.svelte  |  2 +-
 .../15-composition/05-modal/Modal.svelte      |  6 +-
 .../16-context/00-context-api/Map.svelte      |  2 +-
 .../01-svelte-component/App.svelte            |  2 +-
 .../02-svelte-element/App.svelte              |  2 +-
 .../04-svelte-window-bindings/App.svelte      |  2 +-
 .../01-module-exports/AudioPlayer.svelte      |  2 +-
 .../examples/19-debugging/00-debug/App.svelte |  4 +-
 .../20-7guis/01-7guis-counter/App.svelte      |  2 +-
 .../03-7guis-flight-booker/App.svelte         |  6 +-
 .../20-7guis/04-7guis-timer/App.svelte        |  2 +-
 .../20-7guis/05-7guis-crud/App.svelte         |  8 +--
 .../02-immutable-data/ImmutableTodo.svelte    |  2 +-
 .../02-immutable-data/MutableTodo.svelte      |  2 +-
 .../20190420-blog-write-less-code/App.svelte  |  4 +-
 .../01-text-inputs/app-b/App.svelte           |  2 +-
 .../06-bindings/01-text-inputs/text.md        |  2 +-
 .../02-numeric-inputs/app-b/App.svelte        |  8 +--
 .../06-bindings/02-numeric-inputs/text.md     |  4 +-
 .../03-checkbox-inputs/app-b/App.svelte       |  2 +-
 .../06-bindings/03-checkbox-inputs/text.md    |  2 +-
 .../04-group-inputs/app-b/App.svelte          |  8 +--
 .../06-bindings/04-group-inputs/text.md       |  4 +-
 .../06-select-bindings/app-a/App.svelte       |  2 +-
 .../06-select-bindings/app-b/App.svelte       |  4 +-
 .../app-a/App.svelte                          |  8 +--
 .../app-b/App.svelte                          |  8 +--
 .../07-multiple-select-bindings/text.md       |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../08-contenteditable-bindings/text.md       |  2 +-
 .../09-each-block-bindings/app-b/App.svelte   |  4 +-
 .../09-each-block-bindings/text.md            |  4 +-
 .../10-media-elements/app-b/App.svelte        |  3 +-
 .../06-bindings/10-media-elements/text.md     |  3 +-
 .../11-dimensions/app-a/App.svelte            |  4 +-
 .../11-dimensions/app-b/App.svelte            |  6 +-
 .../06-bindings/11-dimensions/text.md         |  2 +-
 .../06-bindings/12-bind-this/app-b/App.svelte |  2 +-
 .../tutorial/06-bindings/12-bind-this/text.md |  2 +-
 .../13-component-bindings/app-b/App.svelte    |  2 +-
 .../06-bindings/13-component-bindings/text.md |  2 +-
 .../14-component-this/app-a/InputField.svelte |  2 +-
 .../14-component-this/app-b/App.svelte        |  2 +-
 .../14-component-this/app-b/InputField.svelte |  2 +-
 .../06-bindings/14-component-this/text.md     |  2 +-
 .../07-lifecycle/03-update/app-a/App.svelte   |  2 +-
 .../07-lifecycle/03-update/app-b/App.svelte   |  2 +-
 .../06-store-bindings/app-b/App.svelte        |  2 +-
 .../08-stores/06-store-bindings/text.md       |  2 +-
 .../09-motion/02-spring/app-a/App.svelte      |  4 +-
 .../09-motion/02-spring/app-b/App.svelte      |  4 +-
 .../01-transition/app-a/App.svelte            |  2 +-
 .../01-transition/app-b/App.svelte            |  2 +-
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../03-in-and-out/app-a/App.svelte            |  2 +-
 .../03-in-and-out/app-b/App.svelte            |  2 +-
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../05-custom-js-transitions/app-a/App.svelte |  2 +-
 .../05-custom-js-transitions/app-b/App.svelte |  2 +-
 .../06-transition-events/app-a/App.svelte     |  2 +-
 .../06-transition-events/app-b/App.svelte     |  2 +-
 .../07-global-transitions/app-a/App.svelte    |  4 +-
 .../07-global-transitions/app-b/App.svelte    |  4 +-
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../02-class-shorthand/app-a/App.svelte       |  2 +-
 .../02-class-shorthand/app-b/App.svelte       |  2 +-
 .../03-inline-styles/app-a/App.svelte         |  2 +-
 .../03-inline-styles/app-b/App.svelte         |  2 +-
 .../04-style-directive/app-a/App.svelte       |  2 +-
 .../04-style-directive/app-b/App.svelte       |  2 +-
 .../01-context-api/app-a/Map.svelte           |  2 +-
 .../01-context-api/app-b/Map.svelte           |  2 +-
 .../02-svelte-component/app-a/App.svelte      |  2 +-
 .../02-svelte-component/app-b/App.svelte      |  2 +-
 .../03-svelte-element/app-a/App.svelte        |  2 +-
 .../03-svelte-element/app-b/App.svelte        |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../05-svelte-window-bindings/text.md         |  2 +-
 .../09-svelte-options/app-a/Todo.svelte       |  2 +-
 .../09-svelte-options/app-b/Todo.svelte       |  2 +-
 .../01-sharing-code/app-a/AudioPlayer.svelte  |  2 +-
 .../01-sharing-code/app-b/AudioPlayer.svelte  |  2 +-
 .../app-a/AudioPlayer.svelte                  |  2 +-
 .../app-b/AudioPlayer.svelte                  |  2 +-
 .../18-special-tags/01-debug/app-a/App.svelte |  4 +-
 .../18-special-tags/01-debug/app-b/App.svelte |  4 +-
 .../messages/compile-errors/template.md       |  4 ++
 packages/svelte/src/compiler/errors.js        |  9 +++
 .../compiler/phases/1-parse/state/element.js  | 48 ++++++++++++++--
 .../2-analyze/visitors/BindDirective.js       | 11 ++--
 .../client/visitors/BindDirective.js          | 55 ++++++++++++-------
 .../client/visitors/RegularElement.js         |  7 +--
 .../client/visitors/shared/component.js       |  4 +-
 .../client/visitors/shared/utils.js           |  8 +--
 .../server/visitors/shared/component.js       |  4 +-
 .../server/visitors/shared/element.js         | 25 ++++-----
 .../src/compiler/types/legacy-nodes.d.ts      |  2 +-
 .../svelte/src/compiler/types/template.d.ts   |  2 +-
 packages/svelte/types/index.d.ts              |  4 +-
 .../src/lib/Input/ComponentSelector.svelte    |  3 +-
 .../src/lib/Input/ModuleEditor.svelte         |  3 +-
 .../src/lib/Output/AstNode.svelte             |  3 +-
 .../src/lib/Output/CompilerOptions.svelte     | 12 ++--
 .../src/lib/Output/Output.svelte              |  9 +--
 .../src/lib/Output/Viewer.svelte              |  3 +-
 sites/svelte-5-preview/src/lib/Repl.svelte    |  4 +-
 .../svelte-5-preview/src/routes/+page.svelte  |  3 +-
 .../routes/docs/content/01-api/02-runes.md    | 14 ++---
 .../routes/docs/content/01-api/05-imports.md  | 10 ++--
 .../02-examples/02-fine-grained-reactivity.md |  4 +-
 .../03-appendix/02-breaking-changes.md        |  2 +-
 144 files changed, 335 insertions(+), 267 deletions(-)

diff --git a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
index a030e8fc41..c70f946e48 100644
--- a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
+++ b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
@@ -147,7 +147,7 @@ For example, here is how you would capture and restore the value of a textarea:
 
 <form method="POST">
 	<label for="comment">Comment</label>
-	<textarea id="comment" bind:value={comment} />
+	<textarea id="comment" bind:value comment} />
 	<button>Post comment</button>
 </form>
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index b32bc6b89c..1e8c7ed3a8 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -424,6 +424,12 @@ Imports of `svelte/internal/*` are forbidden. It contains private runtime code w
 The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
+### invalid_bind_directive
+
+```
+Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+```
+
 ### js_parse_error
 
 ```
diff --git a/documentation/examples/05-bindings/00-text-inputs/App.svelte b/documentation/examples/05-bindings/00-text-inputs/App.svelte
index 9ec139df21..414c5af827 100644
--- a/documentation/examples/05-bindings/00-text-inputs/App.svelte
+++ b/documentation/examples/05-bindings/00-text-inputs/App.svelte
@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value={name} placeholder="enter your name" />
+<input bind:value name} placeholder="enter your name" />
 <p>Hello {name || 'stranger'}!</p>
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
index 15ef23c466..0f8a0b6a26 100644
--- a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
+++ b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value={a} min="0" max="10" />
-	<input type="range" bind:value={a} min="0" max="10" />
+	<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" />
+	<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>
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
index b337359317..c4b3467d33 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={yes} />
+	<input type="checkbox" bind:checked yes} />
 	Yes! Send me regular email spam
 </label>
 
diff --git a/documentation/examples/05-bindings/03-group-inputs/App.svelte b/documentation/examples/05-bindings/03-group-inputs/App.svelte
index 0ab215d519..30121e661a 100644
--- a/documentation/examples/05-bindings/03-group-inputs/App.svelte
+++ b/documentation/examples/05-bindings/03-group-inputs/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
index ecb809095d..160be172ff 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -3,7 +3,7 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<textarea bind:value={text} />
+<textarea bind:value text} />
 
 {@html marked(text)}
 
diff --git a/documentation/examples/05-bindings/06-select-bindings/App.svelte b/documentation/examples/05-bindings/06-select-bindings/App.svelte
index 7785258fe2..517ff9b0a5 100644
--- a/documentation/examples/05-bindings/06-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/06-select-bindings/App.svelte
@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change={() => (answer = '')}>
+	<select bind:value selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer} />
+	<input bind:value answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
index 2fd19c28ad..4583f9cd01 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
+<select multiple bind:value flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
index a8118093d3..1193ac80e7 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
+++ b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div>
-		<input type="checkbox" bind:checked={todo.done} />
+		<input type="checkbox" bind:checked todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
+		<input placeholder="What needs to be done?" bind:value todo.text} disabled={todo.done} />
 	</div>
 {/each}
 
diff --git a/documentation/examples/05-bindings/09-media-elements/App.svelte b/documentation/examples/05-bindings/09-media-elements/App.svelte
index 836804f8bc..60a71891b6 100644
--- a/documentation/examples/05-bindings/09-media-elements/App.svelte
+++ b/documentation/examples/05-bindings/09-media-elements/App.svelte
@@ -60,7 +60,8 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime={time}
+		bind:currentTime
+		time}
 		bind:duration
 		bind:paused
 	>
diff --git a/documentation/examples/05-bindings/10-dimensions/App.svelte b/documentation/examples/05-bindings/10-dimensions/App.svelte
index 4d4a8b2cf2..39b3d75c61 100644
--- a/documentation/examples/05-bindings/10-dimensions/App.svelte
+++ b/documentation/examples/05-bindings/10-dimensions/App.svelte
@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value={size} />
-<input bind:value={text} />
+<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}>
+<div bind:clientWidth w} bind:clientHeight h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 
diff --git a/documentation/examples/05-bindings/11-bind-this/App.svelte b/documentation/examples/05-bindings/11-bind-this/App.svelte
index fe0fbe1b01..20ff5967bb 100644
--- a/documentation/examples/05-bindings/11-bind-this/App.svelte
+++ b/documentation/examples/05-bindings/11-bind-this/App.svelte
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<canvas bind:this={canvas} width={32} height={32} />
+<canvas bind:this canvas} width={32} height={32} />
 
 <style>
 	canvas {
diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
index 254ced9464..f815841f62 100644
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/App.svelte
@@ -11,7 +11,7 @@
 
 <h1 class:pin>{view}</h1>
 
-<Keypad bind:value={pin} on:submit={handleSubmit} />
+<Keypad bind:value pin} on:submit={handleSubmit} />
 
 <style>
 	h1 {
diff --git a/documentation/examples/06-lifecycle/02-update/App.svelte b/documentation/examples/06-lifecycle/02-update/App.svelte
index afc1b29ea8..b951a6aacc 100644
--- a/documentation/examples/06-lifecycle/02-update/App.svelte
+++ b/documentation/examples/06-lifecycle/02-update/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this={div}>
+	<div class="scrollable" bind:this div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
index e5b59901aa..9a20d4719d 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -15,12 +15,12 @@
 <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" />
+		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/examples/09-transitions/00-transition/App.svelte b/documentation/examples/09-transitions/00-transition/App.svelte
index 29e9254d14..998ed5665d 100644
--- a/documentation/examples/09-transitions/00-transition/App.svelte
+++ b/documentation/examples/09-transitions/00-transition/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
index 318739f1d0..e426b53cf6 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/02-in-and-out/App.svelte b/documentation/examples/09-transitions/02-in-and-out/App.svelte
index bb44e5ca9f..8fe8cab57f 100644
--- a/documentation/examples/09-transitions/02-in-and-out/App.svelte
+++ b/documentation/examples/09-transitions/02-in-and-out/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
index c85fe7ef89..1704eb23d0 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
index 9ccd18a0f7..19c50850d2 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/05-transition-events/App.svelte b/documentation/examples/09-transitions/05-transition-events/App.svelte
index 31ef18c930..5850ea003e 100644
--- a/documentation/examples/09-transitions/05-transition-events/App.svelte
+++ b/documentation/examples/09-transitions/05-transition-events/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/10-animations/00-animate/App.svelte b/documentation/examples/10-animations/00-animate/App.svelte
index 7209a25f15..95c8d833e8 100644
--- a/documentation/examples/10-animations/00-animate/App.svelte
+++ b/documentation/examples/10-animations/00-animate/App.svelte
@@ -57,7 +57,7 @@
 		<h2>todo</h2>
 		{#each todos.filter((t) => !t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked={todo.done} />
+				<input type="checkbox" bind:checked todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
@@ -68,7 +68,7 @@
 		<h2>done</h2>
 		{#each todos.filter((t) => t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked={todo.done} />
+				<input type="checkbox" bind:checked todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
diff --git a/documentation/examples/11-easing/00-easing/App.svelte b/documentation/examples/11-easing/00-easing/App.svelte
index c3814bb8bd..9f0a5d76ca 100644
--- a/documentation/examples/11-easing/00-easing/App.svelte
+++ b/documentation/examples/11-easing/00-easing/App.svelte
@@ -37,7 +37,7 @@
 	$: current && runAnimations();
 </script>
 
-<div bind:offsetWidth={width} class="easing-vis">
+<div bind:offsetWidth width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
 			<Grid x={$time} y={$value} />
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index a938ee235b..559bd21685 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -18,7 +18,7 @@
 	<div class="easing-types">
 		<h3>Ease</h3>
 		{#if mobile}
-			<select bind:value={current_ease}>
+			<select bind:value current_ease}>
 				{#each [...eases] as [name]}
 					<option value={name} class:selected={name === current_ease}>
 						{name}
@@ -36,7 +36,7 @@
 		{/if}
 		<h3>Type</h3>
 		{#if mobile}
-			<select bind:value={current_type}>
+			<select bind:value current_type}>
 				{#each types as [name, type]}
 					<option value={type}>
 						{name}
@@ -56,7 +56,7 @@
 	<h4>Duration</h4>
 	<div class="duration">
 		<span>
-			<input type="number" bind:value={duration} min="0" step="100" />
+			<input type="number" bind:value duration} min="0" step="100" />
 			<button class="number" on:click={() => (duration -= 100)}>-</button>
 			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>
diff --git a/documentation/examples/12-svg/02-bar-chart/App.svelte b/documentation/examples/12-svg/02-bar-chart/App.svelte
index 283b109ac0..040a4ac550 100644
--- a/documentation/examples/12-svg/02-bar-chart/App.svelte
+++ b/documentation/examples/12-svg/02-bar-chart/App.svelte
@@ -35,7 +35,7 @@
 
 <h2>US birthrate by year</h2>
 
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+<div class="chart" bind:clientWidth width} bind:clientHeight height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis">
diff --git a/documentation/examples/12-svg/03-area-chart/App.svelte b/documentation/examples/12-svg/03-area-chart/App.svelte
index fb79b04878..6c5d964be1 100644
--- a/documentation/examples/12-svg/03-area-chart/App.svelte
+++ b/documentation/examples/12-svg/03-area-chart/App.svelte
@@ -29,7 +29,7 @@
 
 <h2>Arctic sea ice minimum</h2>
 
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+<div class="chart" bind:clientWidth width} bind:clientHeight height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis" transform="translate(0, {padding.top})">
diff --git a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
index 9c0a96efc5..b5fa4c2d02 100644
--- a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -31,7 +31,7 @@
 
 <svelte:window on:resize={resize} />
 
-<svg bind:this={svg}>
+<svg bind:this svg}>
 	<!-- y axis -->
 	<g class="axis y-axis">
 		{#each yTicks as tick}
diff --git a/documentation/examples/12-svg/05-svg-transitions/App.svelte b/documentation/examples/12-svg/05-svg-transitions/App.svelte
index 3a4b1710c8..26a9ae5a54 100644
--- a/documentation/examples/12-svg/05-svg-transitions/App.svelte
+++ b/documentation/examples/12-svg/05-svg-transitions/App.svelte
@@ -27,7 +27,7 @@
 {/if}
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	toggle me
 </label>
 
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
index 23cc9f2f9e..2f70cf0606 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
+	<input type="range" bind:value duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/examples/14-classes/01-class-shorthand/App.svelte b/documentation/examples/14-classes/01-class-shorthand/App.svelte
index ad39916ce5..2ecd346acd 100644
--- a/documentation/examples/14-classes/01-class-shorthand/App.svelte
+++ b/documentation/examples/14-classes/01-class-shorthand/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={big} />
+	<input type="checkbox" bind:checked big} />
 	big
 </label>
 
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index 3b832030fe..2a24c7959a 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -7,11 +7,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-	bind:this={dialog}
-	on:close={() => (showModal = false)}
-	on:click|self={() => dialog.close()}
->
+<dialog bind:this dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()}>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
diff --git a/documentation/examples/16-context/00-context-api/Map.svelte b/documentation/examples/16-context/00-context-api/Map.svelte
index a69d18c7fd..b701b2fa86 100644
--- a/documentation/examples/16-context/00-context-api/Map.svelte
+++ b/documentation/examples/16-context/00-context-api/Map.svelte
@@ -31,7 +31,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this={container}>
+<div bind:this container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/examples/17-special-elements/01-svelte-component/App.svelte b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
index 69e51253fc..e361a70206 100644
--- a/documentation/examples/17-special-elements/01-svelte-component/App.svelte
+++ b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/examples/17-special-elements/02-svelte-element/App.svelte b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
index 068f7b3c4f..d7a65469b4 100644
--- a/documentation/examples/17-special-elements/02-svelte-element/App.svelte
+++ b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
index 7e85600abe..ee173a1379 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
diff --git a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index b76601e025..bbfa0b82b7 100644
--- a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/examples/19-debugging/00-debug/App.svelte b/documentation/examples/19-debugging/00-debug/App.svelte
index 30bffc896c..d3f7b26a2e 100644
--- a/documentation/examples/19-debugging/00-debug/App.svelte
+++ b/documentation/examples/19-debugging/00-debug/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
+<input bind:value user.firstname} />
+<input bind:value user.lastname} />
 
 {@debug user}
 
diff --git a/documentation/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
index 26c8c51477..57f24356d8 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/App.svelte
+++ b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
@@ -3,5 +3,5 @@
 	let count = 0;
 </script>
 
-<input type="number" bind:value={count} />
+<input type="number" bind:value count} />
 <button on:click={() => (count += 1)}>count</button>
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
index 42caebe506..9a2b2617d7 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -37,13 +37,13 @@
 	}
 </script>
 
-<select bind:value={isReturn}>
+<select bind:value isReturn}>
 	<option value={false}>one-way flight</option>
 	<option value={true}>return flight</option>
 </select>
 
-<input type="date" bind:value={start} />
-<input type="date" bind:value={end} disabled={!isReturn} />
+<input type="date" bind:value start} />
+<input type="date" bind:value end} disabled={!isReturn} />
 
 <button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
 
diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
index 14103e424b..51bc0d388d 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
@@ -31,7 +31,7 @@
 
 <label>
 	duration:
-	<input type="range" bind:value={duration} min="1" max="20000" />
+	<input type="range" bind:value duration} min="1" max="20000" />
 </label>
 
 <button on:click={() => (elapsed = 0)}>reset</button>
diff --git a/documentation/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
index fbae236b9f..6f3b0c153e 100644
--- a/documentation/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
@@ -50,16 +50,16 @@
 	}
 </script>
 
-<input placeholder="filter prefix" bind:value={prefix} />
+<input placeholder="filter prefix" bind:value prefix} />
 
-<select bind:value={i} size={5}>
+<select bind:value i} size={5}>
 	{#each filteredPeople as person, i}
 		<option value={i}>{person.last}, {person.first}</option>
 	{/each}
 </select>
 
-<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last" /></label>
+<label><input bind:value first} placeholder="first" /></label>
+<label><input bind:value last} placeholder="last" /></label>
 
 <div class="buttons">
 	<button on:click={create} disabled={!first || !last}>create</button>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 72d3d83e6b..a1ec3056b6 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this={btn} on:click>
+<button bind:this btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index d2ad294728..58027f51fd 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this={btn} on:click>
+<button bind:this btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
index 89b10d2a17..530f44ec02 100644
--- a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
+++ b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
@@ -3,7 +3,7 @@
 	let b = 2;
 </script>
 
-<input type="number" bind:value={a} />
-<input type="number" bind:value={b} />
+<input type="number" bind:value a} />
+<input type="number" bind:value b} />
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
index 94061c0df2..5b560e78ce 100644
--- a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -2,6 +2,6 @@
 	let name = 'world';
 </script>
 
-<input bind:value={name} />
+<input bind:value name} />
 
 <h1>Hello {name}!</h1>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/text.md b/documentation/tutorial/06-bindings/01-text-inputs/text.md
index 68e0c2ff9c..24069fce75 100644
--- a/documentation/tutorial/06-bindings/01-text-inputs/text.md
+++ b/documentation/tutorial/06-bindings/01-text-inputs/text.md
@@ -9,7 +9,7 @@ Sometimes it's useful to break that rule. Take the case of the `<input>` element
 Instead, we can use the `bind:value` directive:
 
 ```svelte
-<input bind:value={name} />
+<input bind:value name} />
 ```
 
 This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
index 0598d99ee0..8275c018eb 100644
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value={a} min="0" max="10" />
-	<input type="range" bind:value={a} min="0" max="10" />
+	<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" />
+	<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>
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
index a9b539e603..7a0ee71b97 100644
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
+++ b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
@@ -7,6 +7,6 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
 With `bind:value`, Svelte takes care of it for you:
 
 ```svelte
-<input type="number" bind:value={a} min="0" max="10" />
-<input type="range" bind:value={a} min="0" max="10" />
+<input type="number" bind:value a} min="0" max="10" />
+<input type="range" bind:value a} min="0" max="10" />
 ```
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
index b337359317..c4b3467d33 100644
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={yes} />
+	<input type="checkbox" bind:checked yes} />
 	Yes! Send me regular email spam
 </label>
 
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
index f2dd2e3c01..b7c8f2a411 100644
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
+++ b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
@@ -5,5 +5,5 @@ title: Checkbox inputs
 Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
 
 ```svelte
-<input type="checkbox" bind:checked={yes} />
+<input type="checkbox" bind:checked yes} />
 ```
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
index ce0565ab8e..f36b5a58cb 100644
--- a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} name="scoops" value={1} />
+	<input type="radio" bind:group scoops} name="scoops" value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} name="scoops" value={2} />
+	<input type="radio" bind:group scoops} name="scoops" value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} name="scoops" value={3} />
+	<input type="radio" bind:group scoops} name="scoops" value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/text.md b/documentation/tutorial/06-bindings/04-group-inputs/text.md
index 790e95ea83..12c8271e2e 100644
--- a/documentation/tutorial/06-bindings/04-group-inputs/text.md
+++ b/documentation/tutorial/06-bindings/04-group-inputs/text.md
@@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
 Add `bind:group` to each input:
 
 ```svelte
-<input type="radio" bind:group={scoops} name="scoops" value={1} />
+<input type="radio" bind:group scoops} name="scoops" value={1} />
 ```
 
 In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
index eaaa0aeabe..60670ac595 100644
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer} />
+	<input bind:value answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
index 7785258fe2..517ff9b0a5 100644
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change={() => (answer = '')}>
+	<select bind:value selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer} />
+	<input bind:value answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
index 0ab215d519..30121e661a 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
index 2fd19c28ad..4583f9cd01 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
+<select multiple bind:value flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
index 1107d74b54..0003dc1fdd 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
@@ -9,7 +9,7 @@ Returning to our [earlier ice cream example](/tutorial/group-inputs), we can rep
 ```svelte
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
+<select multiple bind:value flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
index b7c0ad8c31..ca40d101d2 100644
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
@@ -2,7 +2,7 @@
 	let html = '<p>Write some text!</p>';
 </script>
 
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML html} />
 
 <pre>{html}</pre>
 
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
index 7ba124e38a..c03129e67f 100644
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
+++ b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
@@ -11,5 +11,5 @@ Elements with the `contenteditable` attribute support the following bindings:
 There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 ```svelte
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML html} />
 ```
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
index 3ddb1a4fb4..7f63e85c87 100644
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked={todo.done} />
+		<input type="checkbox" bind:checked todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} />
+		<input placeholder="What needs to be done?" bind:value todo.text} />
 	</div>
 {/each}
 
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
index cbba3d97f3..67750dcd59 100644
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
+++ b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
@@ -7,9 +7,9 @@ You can even bind to properties inside an `each` block.
 ```svelte
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked={todo.done} />
+		<input type="checkbox" bind:checked todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} />
+		<input placeholder="What needs to be done?" bind:value todo.text} />
 	</div>
 {/each}
 ```
diff --git a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
index 836804f8bc..60a71891b6 100644
--- a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
@@ -60,7 +60,8 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime={time}
+		bind:currentTime
+		time}
 		bind:duration
 		bind:paused
 	>
diff --git a/documentation/tutorial/06-bindings/10-media-elements/text.md b/documentation/tutorial/06-bindings/10-media-elements/text.md
index 5ee2d4ac53..cd4e066f94 100644
--- a/documentation/tutorial/06-bindings/10-media-elements/text.md
+++ b/documentation/tutorial/06-bindings/10-media-elements/text.md
@@ -14,7 +14,8 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
 	on:touchmove|preventDefault={handleMove}
 	on:mousedown={handleMousedown}
 	on:mouseup={handleMouseup}
-	bind:currentTime={time}
+	bind:currentTime
+	time}
 	bind:duration
 	bind:paused
 >
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
index 96fb6d2477..97e1bb6a51 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
@@ -5,8 +5,8 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value={size} />
-<input bind:value={text} />
+<input type="range" bind:value size} />
+<input bind:value text} />
 
 <p>size: {w}px x {h}px</p>
 
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
index 699664748a..872559da59 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value={size} />
-<input bind:value={text} />
+<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}>
+<div bind:clientWidth w} bind:clientHeight h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 
diff --git a/documentation/tutorial/06-bindings/11-dimensions/text.md b/documentation/tutorial/06-bindings/11-dimensions/text.md
index 7b12a0827e..ba39d8f55f 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/text.md
+++ b/documentation/tutorial/06-bindings/11-dimensions/text.md
@@ -5,7 +5,7 @@ title: Dimensions
 Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
 
 ```svelte
-<div bind:clientWidth={w} bind:clientHeight={h}>
+<div bind:clientWidth w} bind:clientHeight h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 ```
diff --git a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index b73e800947..c410bef884 100644
--- a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -36,7 +36,7 @@
 	});
 </script>
 
-<canvas bind:this={canvas} width={32} height={32} />
+<canvas bind:this canvas} width={32} height={32} />
 
 <style>
 	canvas {
diff --git a/documentation/tutorial/06-bindings/12-bind-this/text.md b/documentation/tutorial/06-bindings/12-bind-this/text.md
index 16d3982934..e43d02ca04 100644
--- a/documentation/tutorial/06-bindings/12-bind-this/text.md
+++ b/documentation/tutorial/06-bindings/12-bind-this/text.md
@@ -5,7 +5,7 @@ title: This
 The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
 
 ```svelte
-<canvas bind:this={canvas} width={32} height={32} />
+<canvas bind:this canvas} width={32} height={32} />
 ```
 
 Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
index b3666f891d..6133e68cf0 100644
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
@@ -11,4 +11,4 @@
 
 <h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
 
-<Keypad bind:value={pin} on:submit={handleSubmit} />
+<Keypad bind:value pin} on:submit={handleSubmit} />
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/text.md b/documentation/tutorial/06-bindings/13-component-bindings/text.md
index a5426fa868..2cb5d90730 100644
--- a/documentation/tutorial/06-bindings/13-component-bindings/text.md
+++ b/documentation/tutorial/06-bindings/13-component-bindings/text.md
@@ -5,7 +5,7 @@ title: Component bindings
 Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
 
 ```svelte
-<Keypad bind:value={pin} on:submit={handleSubmit} />
+<Keypad bind:value pin} on:submit={handleSubmit} />
 ```
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
index caf9c2c9e3..70ec258edf 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this={input} />
+<input bind:this input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
index b5bd3d2e7d..359097340c 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
@@ -4,6 +4,6 @@
 	let field;
 </script>
 
-<InputField bind:this={field} />
+<InputField bind:this field} />
 
 <button on:click={() => field.focus()}>Focus field</button>
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
index caf9c2c9e3..70ec258edf 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this={input} />
+<input bind:this input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/text.md b/documentation/tutorial/06-bindings/14-component-this/text.md
index e87f338234..212fb0d7ba 100644
--- a/documentation/tutorial/06-bindings/14-component-this/text.md
+++ b/documentation/tutorial/06-bindings/14-component-this/text.md
@@ -9,7 +9,7 @@ Just as you can bind to DOM elements, you can bind to component instances themse
 	let field;
 </script>
 
-<InputField bind:this={field} />
+<InputField bind:this field} />
 ```
 
 Now we can programmatically interact with this component using `field`.
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
index 235b53889f..beb2db6ced 100644
--- a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
+++ b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this={div}>
+	<div class="scrollable" bind:this div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
index 7afb5eb427..04cedbcc13 100644
--- a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
+++ b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this={div}>
+	<div class="scrollable" bind:this div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
index 84331e1e7b..bab7ff1524 100644
--- a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
+++ b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <h1>{$greeting}</h1>
-<input bind:value={$name} />
+<input bind:value $name} />
 
 <button on:click={() => ($name += '!')}> Add exclamation mark! </button>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/text.md b/documentation/tutorial/08-stores/06-store-bindings/text.md
index 054140e8d7..64a8a42d5b 100644
--- a/documentation/tutorial/08-stores/06-store-bindings/text.md
+++ b/documentation/tutorial/08-stores/06-store-bindings/text.md
@@ -7,7 +7,7 @@ If a store is writable — i.e. it has a `set` method — you can bind to its va
 In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
 
 ```svelte
-<input bind:value={$name} />
+<input bind:value $name} />
 ```
 
 Changing the input value will now update `name` and all its dependents.
diff --git a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
index 39afc6c1a7..f3e4c41e21 100644
--- a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
+++ b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
@@ -8,12 +8,12 @@
 <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" />
+		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
index 59346dcb3b..7bf85c1c96 100644
--- a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
+++ b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -15,12 +15,12 @@
 <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" />
+		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
index 5ba3e7fb7b..70774e8c47 100644
--- a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
index 29e9254d14..998ed5665d 100644
--- a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
index 29e9254d14..998ed5665d 100644
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
index 318739f1d0..e426b53cf6 100644
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
index 318739f1d0..e426b53cf6 100644
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
index bb44e5ca9f..8fe8cab57f 100644
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
index 621a581342..a677d1d91f 100644
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
index df055bd8f9..fa2e4c009e 100644
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
index d5d029f223..fe7defe383 100644
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 21536e8683..900c303aa2 100644
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
index 59458e9c2f..1481a3fdd2 100644
--- a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
index 31ef18c930..5850ea003e 100644
--- a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
index 9700f945b4..d5a8ea04bb 100644
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={showItems} />
+	<input type="checkbox" bind:checked showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value={i} max="10" />
+	<input type="range" bind:value i} max="10" />
 </label>
 
 {#if showItems}
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
index 93de6a0cdc..4751a9dc5e 100644
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={showItems} />
+	<input type="checkbox" bind:checked showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value={i} max="10" />
+	<input type="range" bind:value i} max="10" />
 </label>
 
 {#if showItems}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
index 4428fa1f4f..858d3c6b3d 100644
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
+++ b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
+	<input type="range" bind:value duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
index 23cc9f2f9e..2f70cf0606 100644
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
+++ b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
+	<input type="range" bind:value duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
index ad39916ce5..2ecd346acd 100644
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={big} />
+	<input type="checkbox" bind:checked big} />
 	big
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
index ad39916ce5..2ecd346acd 100644
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={big} />
+	<input type="checkbox" bind:checked big} />
 	big
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
index 7a806717ef..97ee506690 100644
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p>This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
index 758db1c567..cae8df3b65 100644
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
index 758db1c567..cae8df3b65 100644
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
index d75db22ad4..9730261613 100644
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
 
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
index 495aae6a0d..e9ce39db12 100644
--- a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -30,7 +30,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this={container}>
+<div bind:this container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
index ddc3ebe7cc..a7355ab18f 100644
--- a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
@@ -32,7 +32,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this={container}>
+<div bind:this container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
index 79aad72bdf..098c7a9d68 100644
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
+++ b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
index 69e51253fc..e361a70206 100644
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
index 0718efd949..870bc25f93 100644
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
+++ b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
index 068f7b3c4f..d7a65469b4 100644
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
index 7e85600abe..ee173a1379 100644
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
index 6885c2974e..a002a088e6 100644
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
+++ b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
@@ -5,7 +5,7 @@ title: <svelte:window> bindings
 We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
 
 ```svelte
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY y} />
 ```
 
 The list of properties you can bind to is as follows:
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
index 14083c0ba4..9eb30da7f1 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
+<button bind:this button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
index 6104f16493..ca510157be 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
+<button bind:this button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
index 0533ec0876..6abbb1e6a7 100644
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
@@ -16,7 +16,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
index 6e2e605026..9373dcd418 100644
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
@@ -21,7 +21,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
index 2b229e50dd..386a36dfaf 100644
--- a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
@@ -29,7 +29,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
index b76601e025..bbfa0b82b7 100644
--- a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
index 78a0b81741..9bee2c224d 100644
--- a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
+++ b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
+<input bind:value user.firstname} />
+<input bind:value user.lastname} />
 
 {(console.log(user), '')}
 
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
index 30bffc896c..d3f7b26a2e 100644
--- a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
+++ b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
+<input bind:value user.firstname} />
+<input bind:value user.lastname} />
 
 {@debug user}
 
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index cddca87d9c..d18cbfba86 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -172,6 +172,10 @@
 
 > Expected whitespace
 
+## invalid_bind_directive
+
+> Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+
 ## js_parse_error
 
 > %message%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 00e2246ccf..c08ff1860b 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -984,6 +984,15 @@ export function expected_whitespace(node) {
 	e(node, "expected_whitespace", "Expected whitespace");
 }
 
+/**
+ * Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function invalid_bind_directive(node) {
+	e(node, "invalid_bind_directive", "Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces");
+}
+
 /**
  * %message%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 9082b76c49..4b7dd49b0c 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -13,6 +13,7 @@ import { create_attribute, create_expression_metadata } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
 import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 import { list } from '../../../utils/string.js';
+import { parse_expression_at } from '../acorn.js';
 
 const regex_invalid_unquoted_attribute_value = /^(\/>|[\s"'=<>`])/;
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
@@ -506,11 +507,53 @@ function read_attribute(parser) {
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
 
+	/** @type {Expression | [Expression, Expression] | null} */
+	let expression = null;
+
 	/** @type {true | AST.ExpressionTag | Array<AST.Text | AST.ExpressionTag>} */
 	let value = true;
 	if (parser.eat('=')) {
 		parser.allow_whitespace();
+		let value_start = 0;
+
+		// Validate the bind: value doesn't start with a paren
+		if (name.startsWith('bind:')) {
+			const start = parser.index;
+			parser.eat('{');
+			parser.allow_whitespace();
+			value_start = parser.index;
+			parser.index = start;
+		}
+
 		value = read_attribute_value(parser);
+
+		// bind can use a getter/setter pair {a, b}, so the attribute parsing above will capture
+		// a SequenceExpression. To ensure this is handled correctly, we use wrap the expression
+		// again in square brackets and parse it again. This should ensure it's an ArrayExpression
+		// with two elements and if not we can throw an appropiate error
+		if (
+			name.startsWith('bind:') &&
+			!Array.isArray(value) &&
+			value.expression.type === 'SequenceExpression'
+		) {
+			try {
+				const bind_getter_setter = parse_expression_at(
+					`[${parser.template.slice(value_start, value.expression.end)}]`,
+					parser.ts,
+					0
+				);
+
+				if (
+					bind_getter_setter.type !== 'ArrayExpression' ||
+					bind_getter_setter.elements.length !== 2
+				) {
+					e.invalid_bind_directive(value_start);
+				}
+				expression = /** @type {[Expression, Expression]} */ (bind_getter_setter.elements);
+			} catch {
+				e.invalid_bind_directive(value_start);
+			}
+		}
 		end = parser.index;
 	} else if (parser.match_regex(regex_starts_with_quote_characters)) {
 		e.expected_token(parser.index, '=');
@@ -540,15 +583,12 @@ function read_attribute(parser) {
 
 		const first_value = value === true ? undefined : Array.isArray(value) ? value[0] : value;
 
-		/** @type {Expression | null} */
-		let expression = null;
-
 		if (first_value) {
 			const attribute_contains_text =
 				/** @type {any[]} */ (value).length > 1 || first_value.type === 'Text';
 			if (attribute_contains_text) {
 				e.directive_invalid_value(/** @type {number} */ (first_value.start));
-			} else {
+			} else if (expression === null) {
 				// TODO throw a parser error in a future version here if this `[ExpressionTag]` instead of `ExpressionTag`,
 				// which means stringified value, which isn't allowed for some directives?
 				expression = first_value.expression;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index e9796737f0..94c1146ac1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -17,17 +17,14 @@ import { is_content_editable_binding, is_svg } from '../../../../utils.js';
  * @param {Context} context
  */
 export function BindDirective(node, context) {
+	if (Array.isArray(node.expression)) {
+		return;
+	}
+
 	validate_no_const_assignment(node, node.expression, context.state.scope, true);
 
 	const assignee = node.expression;
 
-	if (assignee.type === 'SequenceExpression') {
-		if (assignee.expressions.length !== 2) {
-			e.bind_invalid_expression(node);
-		}
-		return;
-	}
-
 	const left = object(assignee);
 
 	if (left === null) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 43e0c0029a..63e8eb99b7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -18,31 +18,34 @@ export function BindDirective(node, context) {
 
 	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
 
-	if (
-		dev &&
-		context.state.analysis.runes &&
-		expression.type === 'MemberExpression' &&
-		(node.name !== 'this' ||
-			context.path.some(
-				({ type }) =>
-					type === 'IfBlock' || type === 'EachBlock' || type === 'AwaitBlock' || type === 'KeyBlock'
-			)) &&
-		!is_ignored(node, 'binding_property_non_reactive')
-	) {
-		validate_binding(
-			context.state,
-			node,
-			/**@type {MemberExpression} */ (context.visit(expression))
-		);
-	}
-
 	let get, set;
 
-	if (expression.type === 'SequenceExpression') {
-		const [get_expression, set_expression] = expression.expressions;
+	if (Array.isArray(expression)) {
+		const [get_expression, set_expression] = expression;
 		get = /** @type {Expression} */ (context.visit(get_expression));
 		set = /** @type {Expression} */ (context.visit(set_expression));
 	} else {
+		if (
+			dev &&
+			context.state.analysis.runes &&
+			expression.type === 'MemberExpression' &&
+			(node.name !== 'this' ||
+				context.path.some(
+					({ type }) =>
+						type === 'IfBlock' ||
+						type === 'EachBlock' ||
+						type === 'AwaitBlock' ||
+						type === 'KeyBlock'
+				)) &&
+			!is_ignored(node, 'binding_property_non_reactive')
+		) {
+			validate_binding(
+				context.state,
+				node,
+				/**@type {MemberExpression} */ (context.visit(expression))
+			);
+		}
+
 		get = b.thunk(/** @type {Expression} */ (context.visit(expression)));
 
 		/** @type {Expression | undefined} */
@@ -220,10 +223,20 @@ export function BindDirective(node, context) {
 					);
 
 					if (value !== undefined) {
+						let group_expression;
+						if (Array.isArray(expression)) {
+							const get_id = b.id(context.state.scope.generate('bind_get'));
+
+							context.state.init.push(b.var(get_id, get));
+							group_expression = b.call(get_id);
+						} else {
+							group_expression = /** @type {Expression} */ (context.visit(expression));
+						}
+
 						group_getter = b.thunk(
 							b.block([
 								b.stmt(build_attribute_value(value, context).value),
-								b.return(/** @type {Expression} */ (context.visit(expression)))
+								b.return(group_expression)
 							])
 						);
 					}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 5e88ca1b98..8e7891dade 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -451,7 +451,7 @@ function setup_select_synchronization(value_binding, context) {
 
 	let bound = value_binding.expression;
 
-	if (bound.type === 'SequenceExpression') {
+	if (Array.isArray(bound)) {
 		return;
 	}
 
@@ -489,10 +489,7 @@ function setup_select_synchronization(value_binding, context) {
 			b.call(
 				'$.template_effect',
 				b.thunk(
-					b.block([
-						b.stmt(/** @type {Expression} */ (context.visit(value_binding.expression))),
-						b.stmt(invalidator)
-					])
+					b.block([b.stmt(/** @type {Expression} */ (context.visit(bound))), b.stmt(invalidator)])
 				)
 			)
 		)
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 34875a6ba4..9babedc46d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -161,8 +161,8 @@ export function build_component(node, component_name, context, anchor = context.
 				push_prop(b.init(attribute.name, value));
 			}
 		} else if (attribute.type === 'BindDirective') {
-			if (attribute.expression.type === 'SequenceExpression') {
-				const [get_expression, set_expression] = attribute.expression.expressions;
+			if (Array.isArray(attribute.expression)) {
+				const [get_expression, set_expression] = attribute.expression;
 				const get = /** @type {Expression} */ (context.visit(get_expression));
 				const set = /** @type {Expression} */ (context.visit(set_expression));
 				const get_id = b.id(context.state.scope.generate('bind_get'));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index d66475e9aa..53ba2a45f6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -157,13 +157,13 @@ export function build_update_assignment(state, id, init, value, update) {
 
 /**
  * Serializes `bind:this` for components and elements.
- * @param {Identifier | MemberExpression | SequenceExpression} expression
+ * @param {Identifier | MemberExpression | [Expression, Expression]} expression
  * @param {Expression} value
  * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
  */
 export function build_bind_this(expression, value, { state, visit }) {
-	if (expression.type === 'SequenceExpression') {
-		const [get_expression, set_expression] = expression.expressions;
+	if (Array.isArray(expression)) {
+		const [get_expression, set_expression] = expression;
 		const get = /** @type {Expression} */ (visit(get_expression));
 		const set = /** @type {Expression} */ (visit(set_expression));
 
@@ -246,7 +246,7 @@ export function build_bind_this(expression, value, { state, visit }) {
  * @param {MemberExpression} expression
  */
 export function validate_binding(state, binding, expression) {
-	if (binding.expression.type === 'SequenceExpression') {
+	if (Array.isArray(binding.expression)) {
 		return;
 	}
 	// If we are referencing a $store.foo then we don't need to add validation
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 6f73c53284..260e2f4e5f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -81,8 +81,8 @@ export function build_inline_component(node, expression, context) {
 			const value = build_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
-			if (attribute.expression.type === 'SequenceExpression') {
-				const [get_expression, set_expression] = attribute.expression.expressions;
+			if (Array.isArray(attribute.expression)) {
+				const [get_expression, set_expression] = attribute.expression;
 				const get = /** @type {Expression} */ (context.visit(get_expression));
 				const set = /** @type {Expression} */ (context.visit(set_expression));
 				const get_id = b.id(context.state.scope.generate('bind_get'));
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 5999f0b0b6..8cfea95cc6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -110,15 +110,14 @@ export function build_element_attributes(node, context) {
 			if (binding?.omit_in_ssr) continue;
 
 			if (is_content_editable_binding(attribute.name)) {
-				content =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
-						: /** @type {Expression} */ (context.visit(attribute.expression));
+				content = Array.isArray(attribute.expression)
+					? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
+					: /** @type {Expression} */ (context.visit(attribute.expression));
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
 				content = b.call(
 					'$.escape',
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
+					Array.isArray(attribute.expression)
+						? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
 						: /** @type {Expression} */ (context.visit(attribute.expression))
 				);
 			} else if (attribute.name === 'group') {
@@ -134,10 +133,9 @@ export function build_element_attributes(node, context) {
 						is_text_attribute(attr) &&
 						attr.value[0].data === 'checkbox'
 				);
-				const attribute_expression =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(attribute.expression.expressions[0])
-						: attribute.expression;
+				const attribute_expression = Array.isArray(attribute.expression)
+					? b.call(attribute.expression[0])
+					: attribute.expression;
 
 				attributes.push(
 					create_attribute('checked', -1, -1, [
@@ -163,10 +161,9 @@ export function build_element_attributes(node, context) {
 					])
 				);
 			} else {
-				const attribute_expression =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(attribute.expression.expressions[0])
-						: attribute.expression;
+				const attribute_expression = Array.isArray(attribute.expression)
+					? b.call(attribute.expression[0])
+					: attribute.expression;
 
 				attributes.push(
 					create_attribute(attribute.name, -1, -1, [
diff --git a/packages/svelte/src/compiler/types/legacy-nodes.d.ts b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
index 0013f5c17a..47c4dfdce6 100644
--- a/packages/svelte/src/compiler/types/legacy-nodes.d.ts
+++ b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
@@ -50,7 +50,7 @@ export interface LegacyBinding extends BaseNode {
 	/** The 'x' in `bind:x` */
 	name: string;
 	/** The y in `bind:x={y}` */
-	expression: Identifier | MemberExpression | SequenceExpression;
+	expression: Identifier | MemberExpression | [Expression, Expression];
 }
 
 export interface LegacyBody extends BaseElement {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index cc153b263a..073ac4d84c 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -186,7 +186,7 @@ export namespace AST {
 		/** The 'x' in `bind:x` */
 		name: string;
 		/** The y in `bind:x={y}` */
-		expression: Identifier | MemberExpression | SequenceExpression;
+		expression: Identifier | MemberExpression | [Expression, Expression];
 		/** @internal */
 		metadata: {
 			binding_group_name: Identifier;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 3079071fef..70b4ac57c2 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -606,7 +606,7 @@ declare module 'svelte/animate' {
 }
 
 declare module 'svelte/compiler' {
-	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
+	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
 	import type { Location } from 'locate-character';
 	/**
@@ -1047,7 +1047,7 @@ declare module 'svelte/compiler' {
 			/** The 'x' in `bind:x` */
 			name: string;
 			/** The y in `bind:x={y}` */
-			expression: Identifier | MemberExpression | SequenceExpression;
+			expression: Identifier | MemberExpression | [Expression, Expression];
 		}
 
 		/** A `class:` directive */
diff --git a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
index 7b95008712..d9077c520a 100644
--- a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
@@ -248,7 +248,8 @@
 						<input
 							autofocus
 							spellcheck={false}
-							bind:value={input_value}
+							bind:value
+							input_value}
 							on:focus={select_input}
 							on:blur={close_edit}
 							on:keydown={(e) => {
diff --git a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
index d047d10637..bbd6ad6f53 100644
--- a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
@@ -21,7 +21,8 @@
 <div class="editor-wrapper">
 	<div class="editor notranslate" translate="no">
 		<CodeMirror
-			bind:this={$module_editor}
+			bind:this
+			$module_editor}
 			diagnostics={() => {
 				if (error) {
 					return [
diff --git a/sites/svelte-5-preview/src/lib/Output/AstNode.svelte b/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
index f99f21494c..9fb559a754 100644
--- a/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
@@ -77,7 +77,8 @@
 </script>
 
 <li
-	bind:this={list_item_el}
+	bind:this
+	list_item_el}
 	class:marked={!is_root && is_leaf}
 	on:mouseover={handle_mark_text}
 	on:focus={handle_mark_text}
diff --git a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
index 426e5044a7..74b72e84c2 100644
--- a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
@@ -11,32 +11,32 @@
 	<div class="option">
 		<span class="key">generate:</span>
 
-		<input id="client" type="radio" bind:group={$compile_options.generate} value="client" />
+		<input id="client" type="radio" bind:group $compile_options.generate} value="client" />
 		<label for="client"><span class="string">"client"</span></label>
 
-		<input id="server" type="radio" bind:group={$compile_options.generate} value="server" />
+		<input id="server" type="radio" bind:group $compile_options.generate} value="server" />
 		<label for="server"><span class="string">"server"</span>,</label>
 	</div>
 
 	<div class="option">
 		<span class="key">css:</span>
 
-		<input id="injected" type="radio" bind:group={$compile_options.css} value="injected" />
+		<input id="injected" type="radio" bind:group $compile_options.css} value="injected" />
 		<label for="injected"><span class="string">"injected"</span></label>
 
-		<input id="external" type="radio" bind:group={$compile_options.css} value="external" />
+		<input id="external" type="radio" bind:group $compile_options.css} value="external" />
 		<label for="external"><span class="string">"external"</span>,</label>
 	</div>
 
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox bind:checked={$compile_options.dev} />
+		<Checkbox bind:checked $compile_options.dev} />
 		<span class="boolean">{$compile_options.dev}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">hmr:</span>
-		<Checkbox bind:checked={$compile_options.hmr} />
+		<Checkbox bind:checked $compile_options.hmr} />
 		<span class="boolean">{$compile_options.hmr}</span>,
 	</label>
 	});
diff --git a/sites/svelte-5-preview/src/lib/Output/Output.svelte b/sites/svelte-5-preview/src/lib/Output/Output.svelte
index ac6da48d3d..f86e5c3af1 100644
--- a/sites/svelte-5-preview/src/lib/Output/Output.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/Output.svelte
@@ -77,7 +77,8 @@
 <!-- component viewer -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'result'}>
 	<Viewer
-		bind:error={runtimeError}
+		bind:error
+		runtimeError}
 		{status}
 		{relaxed}
 		{injectedJS}
@@ -89,11 +90,11 @@
 <!-- js output -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'js'}>
 	{#if embedded}
-		<CodeMirror bind:this={js_editor} readonly />
+		<CodeMirror bind:this js_editor} readonly />
 	{:else}
 		<PaneWithPanel pos="50%" panel="Compiler options">
 			<div slot="main">
-				<CodeMirror bind:this={js_editor} readonly />
+				<CodeMirror bind:this js_editor} readonly />
 			</div>
 
 			<div slot="panel-body">
@@ -105,7 +106,7 @@
 
 <!-- css output -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'css'}>
-	<CodeMirror bind:this={css_editor} readonly />
+	<CodeMirror bind:this css_editor} readonly />
 </div>
 
 <!-- ast output -->
diff --git a/sites/svelte-5-preview/src/lib/Output/Viewer.svelte b/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
index db506ada3b..887d09a29d 100644
--- a/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
@@ -254,7 +254,8 @@
 			<iframe
 				title="Result"
 				class:inited
-				bind:this={iframe}
+				bind:this
+				iframe}
 				sandbox={[
 					'allow-popups-to-escape-sandbox',
 					'allow-scripts',
diff --git a/sites/svelte-5-preview/src/lib/Repl.svelte b/sites/svelte-5-preview/src/lib/Repl.svelte
index f43f5f899b..8ab25db193 100644
--- a/sites/svelte-5-preview/src/lib/Repl.svelte
+++ b/sites/svelte-5-preview/src/lib/Repl.svelte
@@ -338,7 +338,7 @@
 
 <svelte:window on:beforeunload={before_unload} />
 
-<div class="container" class:toggleable={$toggleable} bind:clientWidth={width}>
+<div class="container" class:toggleable={$toggleable} bind:clientWidth width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
 			--color="var(--sk-text-4)"
@@ -374,7 +374,7 @@
 	</div>
 
 	{#if $toggleable}
-		<InputOutputToggle bind:checked={show_output} />
+		<InputOutputToggle bind:checked show_output} />
 	{/if}
 </div>
 
diff --git a/sites/svelte-5-preview/src/routes/+page.svelte b/sites/svelte-5-preview/src/routes/+page.svelte
index b54c36ee5b..26758a52c1 100644
--- a/sites/svelte-5-preview/src/routes/+page.svelte
+++ b/sites/svelte-5-preview/src/routes/+page.svelte
@@ -88,7 +88,8 @@
 />
 
 <Repl
-	bind:this={repl}
+	bind:this
+	repl}
 	autocomplete={true}
 	on:add={change_from_editor}
 	on:change={change_from_editor}
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 84062a1cfa..074683431f 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -193,7 +193,7 @@ To run _side-effects_ when the component is mounted to the DOM, and when values
 	});
 </script>
 
-<canvas bind:this={canvas} width="100" height="100" />
+<canvas bind:this canvas} width="100" height="100" />
 ```
 
 The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
@@ -346,12 +346,12 @@ You might be tempted to do something convoluted with effects to link one value t
 </script>
 
 <label>
-	<input type="range" bind:value={spent} max={total} />
+	<input type="range" bind:value spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value={left} max={total} />
+	<input type="range" bind:value left} max={total} />
 	{left}/{total} left
 </label>
 ```
@@ -414,12 +414,12 @@ If you need to use bindings, for whatever reason (for example when you want some
 </script>
 
 <label>
-	<input type="range" bind:value={spent} max={total} />
+	<input type="range" bind:value spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value={left.value} max={total} />
+	<input type="range" bind:value left.value} max={total} />
 	{left.value}/{total} left
 </label>
 ```
@@ -467,7 +467,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 	});
 </script>
 
-<div bind:this={div}>
+<div bind:this div}>
 	{#each messages as message}
 		<p>{message}</p>
 	{/each}
@@ -627,7 +627,7 @@ or array using [fine-grained reactivity](/docs/fine-grained-reactivity) will cau
 </script>
 
 <button onclick={() => count++}>Increment</button>
-<input bind:value={message} />
+<input bind:value message} />
 ```
 
 `$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`, all following arguments are the values passed to `$inspect`. [Demo:](/#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
index 7cbec56e17..dfc47de58a 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
@@ -25,7 +25,7 @@ Forces any pending effects (including DOM updates) to be applied immediately, ra
 	}
 </script>
 
-<span bind:this={element}>{count}</span>
+<span bind:this element}>{count}</span>
 <button {onclick}>update</button>
 ```
 
@@ -140,14 +140,14 @@ Svelte provides reactive `SvelteMap`, `SvelteSet`, `SvelteDate` and `SvelteURL`
 </script>
 
 <!-- changes to these... -->
-<input bind:value={url.protocol} />
-<input bind:value={url.hostname} />
-<input bind:value={url.pathname} />
+<input bind:value url.protocol} />
+<input bind:value url.hostname} />
+<input bind:value url.pathname} />
 
 <hr />
 
 <!-- will update `href` and vice versa -->
-<input bind:value={url.href} />
+<input bind:value url.href} />
 ```
 
 ## `svelte/events`
diff --git a/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md b/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
index 6c804b03ac..7a2530386c 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
@@ -32,8 +32,8 @@ In Svelte 4, reactivity centres on the _component_ and the top-level state decla
 
 {#each todos as todo}
 	<div>
-		<input bind:value={todo.text} />
-		<input type="checkbox" bind:checked={todo.done} />
+		<input bind:value todo.text} />
+		<input type="checkbox" bind:checked todo.done} />
 	</div>
 {/each}
 
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index f45b2e0416..4b28870b54 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -228,7 +228,7 @@ This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8A
 	let Thing = $state();
 </script>
 
-<select bind:value={Thing}>
+<select bind:value Thing}>
 	<option value={A}>A</option>
 	<option value={B}>B</option>
 </select>