diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/02-template-syntax/01-svelte-components.md
index adce71f6843b..7316e213b8b0 100644
--- a/documentation/docs/02-template-syntax/01-svelte-components.md
+++ b/documentation/docs/02-template-syntax/01-svelte-components.md
@@ -177,6 +177,7 @@ Total: {total}
 It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let x = 0;
 	let y = 0;
diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/02-template-syntax/05-element-directives.md
index 9a30fb106175..60c0ce01dce0 100644
--- a/documentation/docs/02-template-syntax/05-element-directives.md
+++ b/documentation/docs/02-template-syntax/05-element-directives.md
@@ -74,6 +74,7 @@ If the `on:` directive is used without a value, the component will _forward_ the
 It's possible to have multiple event listeners for the same event:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let counter = 0;
 	function increment() {
@@ -284,6 +285,7 @@ bind:group={variable}
 Inputs that work together can use `bind:group`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let tortilla = 'Plain';
 
@@ -315,6 +317,7 @@ bind:this={dom_node}
 To get a reference to a DOM node, use `bind:this`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { onMount } from 'svelte';
 
@@ -420,6 +423,7 @@ action = (node: HTMLElement, parameters: any) => {
 Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
@@ -441,6 +445,7 @@ An action can have a parameter. If the returned value has an `update` method, it
 > Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	export let bar;
 
@@ -558,6 +563,7 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
 The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { elasticOut } from 'svelte/easing';
 
diff --git a/documentation/docs/02-template-syntax/07-special-elements.md b/documentation/docs/02-template-syntax/07-special-elements.md
index 74a42d486e7d..d8395d4981de 100644
--- a/documentation/docs/02-template-syntax/07-special-elements.md
+++ b/documentation/docs/02-template-syntax/07-special-elements.md
@@ -153,6 +153,7 @@ The `<svelte:self>` element allows a component to include itself, recursively.
 It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {number} */
 	export let count;
@@ -219,6 +220,7 @@ The `<svelte:window>` element allows you to add event listeners to the `window`
 Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @param {KeyboardEvent} event */
 	function handleKeydown(event) {
diff --git a/documentation/docs/03-runtime/07-svelte-action.md b/documentation/docs/03-runtime/07-svelte-action.md
index b5670a6ee237..1511a045ae95 100644
--- a/documentation/docs/03-runtime/07-svelte-action.md
+++ b/documentation/docs/03-runtime/07-svelte-action.md
@@ -5,6 +5,7 @@ title: svelte/action
 Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
@@ -26,6 +27,7 @@ An action can have a parameter. If the returned value has an `update` method, it
 > Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {string} */
 	export let bar;
@@ -54,6 +56,7 @@ An action can have a parameter. If the returned value has an `update` method, it
 Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/**
 	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index a8b5ebb8176e..a210ad1e9bb5 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -14,7 +14,7 @@ Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord
 
 You can play around with Svelte in the [tutorial](https://learn.svelte.dev/), [examples](https://svelte.dev/examples), and [REPL](https://svelte.dev/repl).
 
-When you're ready to build a full-fledge application, we recommend using [SvelteKit](https://kit.svelte.dev):
+When you're ready to build a full-fledged application, we recommend using [SvelteKit](https://kit.svelte.dev):
 
 ```bash
 npm create svelte@latest my-app