diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/02-template-syntax/05-element-directives.md
index 0f602bf6ea..e0ac44fe35 100644
--- a/documentation/docs/02-template-syntax/05-element-directives.md
+++ b/documentation/docs/02-template-syntax/05-element-directives.md
@@ -455,6 +455,8 @@ An action can have a parameter. If the returned value has an `update` method, it
 <div use:foo={bar} />
 ```
 
+Read more in the [`svelte/action`](/docs/svelte-action) page.
+
 ## transition:_fn_
 
 ```svelte
@@ -526,6 +528,10 @@ The function is called repeatedly _before_ the transition begins, with different
 	/** @type {boolean} */
 	export let visible;
 
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params
+	 */
 	function whoosh(node, params) {
 		const existingTransform = getComputedStyle(node).transform.replace('none', '');
 
@@ -548,9 +554,14 @@ A custom transition function can also return a `tick` function, which is called
 > If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	export let visible = false;
 
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ speed?: number }} params
+	 */
 	function typewriter(node, { speed = 1 }) {
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
@@ -740,9 +751,7 @@ The function is called repeatedly _before_ the animation begins, with different
 
 	/**
 	 * @param {HTMLElement} node
-	 * @param {Object} states
-	 * @param {DOMRect} states.from
-	 * @param {DOMRect} states.to
+	 * @param {{ from: DOMRect; to: DOMRect }} states
 	 * @param {any} params
 	 */
 	function whizz(node, { from, to }, params) {
@@ -770,14 +779,13 @@ A custom animation function can also return a `tick` function, which is called _
 > If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
 	/**
 	 * @param {HTMLElement} node
-	 * @param {Object} states
-	 * @param {DOMRect} states.from
-	 * @param {DOMRect} states.to
+	 * @param {{ from: DOMRect; to: DOMRect }} states
 	 * @param {any} params
 	 */
 	function whizz(node, { from, to }, params) {
diff --git a/documentation/docs/03-runtime/07-svelte-action.md b/documentation/docs/03-runtime/07-svelte-action.md
index cfd0700bc3..77d2d83e0e 100644
--- a/documentation/docs/03-runtime/07-svelte-action.md
+++ b/documentation/docs/03-runtime/07-svelte-action.md
@@ -2,7 +2,79 @@
 title: svelte/action
 ---
 
-TODO
+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) {
+		// the node has been mounted in the DOM
+
+		return {
+			destroy() {
+				// the node has been removed from the DOM
+			}
+		};
+	}
+</script>
+
+<div use:foo />
+```
+
+An action can have a parameter. If the returned value has an `update` method, it will be called immediately after Svelte has applied updates to the markup whenever that parameter changes.
+
+> 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>
+	export let bar;
+
+	/** @type {import('svelte/action').Action}  */
+	function foo(node, bar) {
+		// the node has been mounted in the DOM
+
+		return {
+			update(bar) {
+				// the value of `bar` has changed
+			},
+
+			destroy() {
+				// the node has been removed from the DOM
+			}
+		};
+	}
+</script>
+
+<div use:foo={bar} />
+```
+
+## Attributes
+
+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 }>}  */
+	function foo(node, { prop }) {
+		// the node has been mounted in the DOM
+
+		//...LOGIC
+		node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));
+
+		return {
+			destroy() {
+				// the node has been removed from the DOM
+			}
+		};
+	}
+</script>
+
+<div use:foo={{ prop: 'someValue' }} on:emit={handleEmit} />
+```
 
 ## Types
 
diff --git a/documentation/docs/05-misc/02-typescript.md b/documentation/docs/05-misc/02-typescript.md
index da8b3b8f5a..70905f6800 100644
--- a/documentation/docs/05-misc/02-typescript.md
+++ b/documentation/docs/05-misc/02-typescript.md
@@ -2,6 +2,193 @@
 title: TypeScript
 ---
 
+You can use TypeScript within Svelte components. IDE extensions like the [Svelte VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
+
+## Setup
+
+To use TypeScript within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
+
+### Using SvelteKit or Vite
+
+The easiest way to get started is scaffolding a new SvelteKit project by typing `npm create svelte@latest`, following the prompts and chosing the TypeScript option.
+
+```ts
+/// file: svelte.config.js
+// @noErrors
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+const config = {
+	preprocess: vitePreprocess()
+};
+
+export default config;
+```
+
+If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+
+```ts
+/// file: svelte.config.js
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+	preprocess: vitePreprocess()
+};
+
+export default config;
+```
+
+In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
+
+### Other build tools
+
+If you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.
+
+> If you're starting a new project, we recommend using SvelteKit or Vite instead
+
+## `<script lang="ts">`
+
+To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
+
+```svelte
+<script lang="ts">
+	let name: string = 'world';
+
+	function greet(name: string) {
+		alert(`Hello, ${name}!`);
+	}
+</script>
+```
+
+### Props
+
+Props can be typed directly on the `export let` statement:
+
+```svelte
+<script lang="ts">
+	export let name: string;
+</script>
+```
+
+### Slots
+
+Slot and slot prop types are inferred from the types of the slot props passed to them:
+
+```svelte
+<script lang="ts">
+	export let name: string;
+</script>
+
+<slot {name} />
+
+<!-- Later -->
+<Comp let:name>
+	<!--    ^ Inferred as string -->
+	{name}
+</Comp>
+```
+
+### Events
+
+Events can be typed with `createEventDispatcher`:
+
+```svelte
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{
+		event: never; // does not accept a payload
+		type: string; // has a required string payload
+		click: string | null; // has an optional string payload
+	}>();
+
+	function handleClick() {
+		dispatch('even');
+		dispatch('click', 'hello');
+	}
+
+	function handleType() {
+		dispatch('even');
+		dispatch('type', Math.random() > 0.5 ? 'world' : null);
+	}
+</script>
+
+<button on:click={handleClick} on:keydown={handleType}>Click</button>
+```
+
+## Enhancing built-in DOM types
+
+Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our [HTML typings](https://github.com/sveltejs/svelte/blob/master/elements/index.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
+
+In case this is a custom or experimental attribute/event, you can enhance the typings like this:
+
+```ts
+/// file: additional-svelte-typings.d.ts
+declare namespace svelteHTML {
+	// enhance elements
+	interface IntrinsicElements {
+		'my-custom-element': { someattribute: string; 'on:event': (e: CustomEvent<any>) => void };
+	}
+	// enhance attributes
+	interface HTMLAttributes<T> {
+		// If you want to use on:beforeinstallprompt
+		'on:beforeinstallprompt'?: (event: any) => any;
+		// If you want to use myCustomAttribute={..} (note: all lowercase)
+		mycustomattribute?: any; // You can replace any with something more specific if you like
+	}
+}
+```
+
+Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
+
+## Experimental advanced typings
+
+A few features are missing from taking full advantage of TypeScript in more advanced use cases like typing that a component implements a certain interface, explicitly typing slots, or using generics. These things are possible using experimental advanced type capabilities. See [this RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) for more information on how to make use of them.
+
+> The API is experimental and may change at any point
+
+## Limitations
+
+### No TS in markup
+
+You cannot use TypeScript in your template's markup. For example, the following does not work:
+
+```svelte
+<script lang="ts">
+	let count = 10;
+</script>
+
+<h1>Count as string: {count as string}!</h1> <!-- ❌ Does not work -->
+{#if count > 4}
+	{@const countString: string = count} <!-- ❌ Does not work -->
+	{countString}
+{/if}
+```
+
+### Reactive Declarations
+
+You cannot type your reactive declarations with TypeScript in the way you type a variable. For example, the following does not work:
+
+```svelte
+<script lang="ts">
+	let count = 0;
+
+	$: doubled: number = count * 2; // ❌ Does not work
+</script>
+```
+
+You cannot add a `: TYPE` because it's invalid syntax in this position. Instead, you can use the `as` or move the definition to a `let` statement just above:
+
+```svelte
+<script lang="ts">
+	let count = 0;
+
+	$: option1 = (count * 2) as number;
+
+	let option2: number;
+	$: option2 = count * 2;
+</script>
+```
+
 ## Types
 
 > TYPES: svelte
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f01054d35..026d44e970 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,12 +159,18 @@ importers:
       '@sveltejs/site-kit':
         specifier: ^5.2.1
         version: 5.2.1(@sveltejs/kit@1.18.0)(svelte@)
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^2.3.0
+        version: 2.3.0(svelte@)(vite@4.3.8)
       '@types/marked':
         specifier: ^5.0.0
         version: 5.0.0
       '@types/node':
         specifier: ^20.2.1
         version: 20.2.3
+      '@types/prettier':
+        specifier: ^2.7.2
+        version: 2.7.2
       degit:
         specifier: ^2.8.4
         version: 2.8.4
@@ -219,6 +225,9 @@ importers:
       svelte-check:
         specifier: ^3.3.2
         version: 3.3.2(postcss@8.4.23)(sass@1.62.1)(svelte@)
+      svelte-preprocess:
+        specifier: ^5.0.3
+        version: 5.0.3(postcss@8.4.23)(sass@1.62.1)(svelte@)(typescript@5.0.4)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -1510,7 +1519,7 @@ packages:
       svelte: ^3.54.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.2.0(svelte@)(vite@4.3.8)
+      '@sveltejs/vite-plugin-svelte': 2.3.0(svelte@)(vite@4.3.8)
       '@types/cookie': 0.5.1
       cookie: 0.5.0
       devalue: 4.3.2
@@ -1590,13 +1599,29 @@ packages:
       svelte-local-storage-store: 0.4.0(svelte@)
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.2.0(svelte@)(vite@4.3.8):
-    resolution: {integrity: sha512-KDtdva+FZrZlyug15KlbXuubntAPKcBau0K7QhAIqC5SAy0uDbjZwoexDRx0L0J2T4niEfC6FnA9GuQQJKg+Aw==}
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.1(@sveltejs/vite-plugin-svelte@2.3.0)(svelte@)(vite@4.3.8):
+    resolution: {integrity: sha512-8ZXgDbAL1b2o7WHxnPsbkxTzZiZhMwOsCI/GFti3zFlh8unqJtUsgwRQV/XSULFcqkbZXz5v6MqMLSUpl3VKaA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^2.2.0
       svelte: ^3.54.0
       vite: ^4.0.0
     dependencies:
+      '@sveltejs/vite-plugin-svelte': 2.3.0(svelte@)(vite@4.3.8)
+      debug: 4.3.4
+      svelte: 'link:'
+      vite: 4.3.8(@types/node@20.2.3)(sass@1.62.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  /@sveltejs/vite-plugin-svelte@2.3.0(svelte@)(vite@4.3.8):
+    resolution: {integrity: sha512-NbgDn5/auWfGYFip7DheDj49/JLE6VugdtdLJjnQASYxXqrQjl81xaZzQsoSAxWk+j2mOkmPFy56gV2i63FUnA==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      svelte: ^3.54.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.1(@sveltejs/vite-plugin-svelte@2.3.0)(svelte@)(vite@4.3.8)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
@@ -1681,6 +1706,10 @@ packages:
     resolution: {integrity: sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA==}
     dev: false
 
+  /@types/prettier@2.7.2:
+    resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==}
+    dev: true
+
   /@types/pug@2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 2ef04b579c..21ecb24546 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -30,8 +30,10 @@
 		"@sveltejs/adapter-vercel": "^3.0.0",
 		"@sveltejs/kit": "^1.18.0",
 		"@sveltejs/site-kit": "^5.2.1",
+		"@sveltejs/vite-plugin-svelte": "^2.3.0",
 		"@types/marked": "^5.0.0",
 		"@types/node": "^20.2.1",
+		"@types/prettier": "^2.7.2",
 		"degit": "^2.8.4",
 		"dotenv": "^16.0.3",
 		"jimp": "^0.22.8",
@@ -50,6 +52,7 @@
 		"shiki-twoslash": "^3.1.2",
 		"svelte": "workspace:*",
 		"svelte-check": "^3.3.2",
+		"svelte-preprocess": "^5.0.3",
 		"tiny-glob": "^0.2.9",
 		"ts-morph": "^18.0.0",
 		"typescript": "^5.0.4",
diff --git a/sites/svelte.dev/scripts/type-gen/dts-sources/internal.d.ts b/sites/svelte.dev/scripts/type-gen/dts-sources/internal.d.ts
new file mode 100644
index 0000000000..10f0475eea
--- /dev/null
+++ b/sites/svelte.dev/scripts/type-gen/dts-sources/internal.d.ts
@@ -0,0 +1 @@
+export type * from 'svelte/internal';
diff --git a/sites/svelte.dev/scripts/type-gen/index.js b/sites/svelte.dev/scripts/type-gen/index.js
index 81e62ad21b..300b637ffb 100644
--- a/sites/svelte.dev/scripts/type-gen/index.js
+++ b/sites/svelte.dev/scripts/type-gen/index.js
@@ -4,7 +4,14 @@ import prettier from 'prettier';
 import ts from 'typescript';
 import { get_bundled_types } from './compile-types.js';
 
-/** @typedef {{ name: string; comment: string; markdown: string; snippet: string; children: Extracted[] }} Extracted */
+/** @typedef {{
+ * name: string;
+ * comment: string;
+ * markdown?: string;
+ * snippet: string;
+ * deprecated: string | null;
+ * children: Extracted[] }
+ * } Extracted */
 
 /** @type {Array<{ name: string; comment: string; exports: Extracted[]; types: Extracted[]; exempt?: boolean; }>} */
 const modules = [];
@@ -44,29 +51,41 @@ function get_types(code, statements) {
 
 				let start = statement.pos;
 				let comment = '';
+				/** @type {string | null} */
+				let deprecated_notice = null;
 
 				// @ts-ignore i think typescript is bad at typescript
 				if (statement.jsDoc) {
 					// @ts-ignore
-					comment = statement.jsDoc[0].comment;
+					const jsDoc = statement.jsDoc[0];
+
+					comment = jsDoc.comment;
+
+					if (jsDoc?.tags?.[0]?.tagName?.escapedText === 'deprecated') {
+						deprecated_notice = jsDoc.tags[0].comment;
+					}
+
 					// @ts-ignore
-					start = statement.jsDoc[0].end;
+					start = jsDoc.end;
 				}
 
 				const i = code.indexOf('export', start);
 				start = i + 6;
 
-				/** @type {string[]} */
-				const children = [];
+				/** @type {Extracted[]} */
+				let children = [];
 
 				let snippet_unformatted = code.slice(start, statement.end).trim();
 
-				if (ts.isInterfaceDeclaration(statement)) {
+				if (ts.isInterfaceDeclaration(statement) || ts.isClassDeclaration(statement)) {
 					if (statement.members.length > 0) {
 						for (const member of statement.members) {
+							// @ts-ignore
 							children.push(munge_type_element(member));
 						}
 
+						children = children.filter(Boolean);
+
 						// collapse `interface Foo {/* lots of stuff*/}` into `interface Foo {…}`
 						const first = statement.members.at(0);
 						const last = statement.members.at(-1);
@@ -100,7 +119,13 @@ function get_types(code, statements) {
 						? exports
 						: types;
 
-				collection.push({ name, comment, snippet, children });
+				collection.push({
+					name,
+					comment,
+					snippet,
+					children,
+					deprecated: deprecated_notice
+				});
 			}
 		}
 
@@ -118,6 +143,8 @@ function munge_type_element(member, depth = 1) {
 	// @ts-ignore
 	const doc = member.jsDoc?.[0];
 
+	if (/do not use!/i.test(doc?.comment)) return;
+
 	/** @type {string[]} */
 	const children = [];
 
@@ -150,6 +177,14 @@ function munge_type_element(member, depth = 1) {
 		const type = tag.tagName.escapedText;
 
 		switch (tag.tagName.escapedText) {
+			case 'private':
+				bullets.push(`- <span class="tag">private</span> ${tag.comment}`);
+				break;
+
+			case 'readonly':
+				bullets.push(`- <span class="tag">readonly</span> ${tag.comment}`);
+				break;
+
 			case 'param':
 				bullets.push(`- \`${tag.name.getText()}\` ${tag.comment}`);
 				break;
@@ -162,6 +197,10 @@ function munge_type_element(member, depth = 1) {
 				bullets.push(`- <span class="tag">returns</span> ${tag.comment}`);
 				break;
 
+			case 'deprecated':
+				bullets.push(`- <span class="tag deprecated">deprecated</span> ${tag.comment}`);
+				break;
+
 			default:
 				console.log(`unhandled JSDoc tag: ${type}`); // TODO indicate deprecated stuff
 		}
@@ -289,58 +328,32 @@ $: {
 
 	if (!module_with_SvelteComponent) break $;
 
-	const svelte_comp_part = module_with_SvelteComponent?.types.filter(
+	const svelte_comp_part = module_with_SvelteComponent?.types.find(
 		(t) => t.name === 'SvelteComponent'
 	);
 
-	if (svelte_comp_part?.[1]) {
-		// Take the comment from [0], and insert into [1]. Then delete [0]
-		svelte_comp_part[1].comment = svelte_comp_part?.[0].comment;
-		delete svelte_comp_part[0];
-		svelte_comp_part.reverse();
-		svelte_comp_part.length = 1;
+	if (!svelte_comp_part) break $;
 
-		module_with_SvelteComponent.types = module_with_SvelteComponent?.types.filter(
-			(t) => t.name !== 'SvelteComponent'
-		);
+	const internal_module = bundled_types.get('svelte/internal');
+	if (!internal_module) break $;
 
-		module_with_SvelteComponent.types.push(svelte_comp_part[0]);
-		module_with_SvelteComponent.types.sort((a, b) => (a.name < b.name ? -1 : 1));
-	}
-}
+	const internal_types = get_types(internal_module.code, internal_module.ts_source_file.statements);
 
-// Fix the duplicate/messed up types
-// !NOTE: This relies on mutation of `modules`
-$: {
-	const module_with_SvelteComponentTyped = modules.find((m) =>
-		m.types.filter((t) => t.name === 'SvelteComponentTyped')
+	const svelte_comp_dev_internal = internal_types.types.find(
+		(t) => t.name === 'SvelteComponentDev'
 	);
 
-	if (!module_with_SvelteComponentTyped) break $;
+	if (!svelte_comp_dev_internal) break $;
 
-	const svelte_comp_typed_part = module_with_SvelteComponentTyped?.types.filter(
-		(t) => t.name === 'SvelteComponentTyped'
-	);
-
-	if (svelte_comp_typed_part?.[1]) {
-		// Take the comment from [1], and insert into [0]. Then delete [1]
-		svelte_comp_typed_part[0].comment = svelte_comp_typed_part?.[1].comment;
-		delete svelte_comp_typed_part[1];
-		svelte_comp_typed_part.length = 1;
-
-		module_with_SvelteComponentTyped.types = module_with_SvelteComponentTyped?.types.filter(
-			(t) => t.name !== 'SvelteComponentTyped'
-		);
-
-		module_with_SvelteComponentTyped.types.push(svelte_comp_typed_part[0]);
-		module_with_SvelteComponentTyped.types.sort((a, b) => (a.name < b.name ? -1 : 1));
-	}
+	svelte_comp_part.children = svelte_comp_dev_internal.children;
+	svelte_comp_part.comment = svelte_comp_dev_internal.comment;
+	svelte_comp_part.snippet = svelte_comp_dev_internal.snippet;
 }
 
 // Remove $$_attributes from ActionReturn
 $: {
 	const module_with_ActionReturn = modules.find((m) =>
-		m.types.find((t) => t.name === 'ActionReturn')
+		m.types.find((t) => t?.name === 'ActionReturn')
 	);
 
 	const new_children =
diff --git a/sites/svelte.dev/src/lib/generated/types.d.ts b/sites/svelte.dev/src/lib/generated/types.d.ts
index 9d63eff7d5..64775aafd4 100644
--- a/sites/svelte.dev/src/lib/generated/types.d.ts
+++ b/sites/svelte.dev/src/lib/generated/types.d.ts
@@ -10,6 +10,7 @@ type Child = {
 	name: string;
 	snippet: string;
 	comment: string;
+	deprecated?: string;
 	bullets?: string[];
 	children?: Child[];
 };
diff --git a/sites/svelte.dev/src/lib/server/markdown/renderer.js b/sites/svelte.dev/src/lib/server/markdown/renderer.js
index bb13430d32..330f5dde78 100644
--- a/sites/svelte.dev/src/lib/server/markdown/renderer.js
+++ b/sites/svelte.dev/src/lib/server/markdown/renderer.js
@@ -2,6 +2,7 @@ import MagicString from 'magic-string';
 import { createHash } from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
+import { format } from 'prettier';
 import { createShikiHighlighter, renderCodeToHTML, runTwoSlash } from 'shiki-twoslash';
 import ts from 'typescript';
 import {
@@ -142,12 +143,16 @@ export async function render_markdown(
 			return html;
 		},
 		codespan: (text) => {
-			return '<code>' + type_regex
-				? text.replace(type_regex, (_, prefix, name) => {
-						const link = `<a href="${type_links.get(name)}">${name}</a>`;
-						return `${prefix || ''}${link}`;
-				  })
-				: text + '</code>';
+			return (
+				'<code>' +
+				(type_regex
+					? text.replace(type_regex, (_, prefix, name) => {
+							const link = `<a href="${type_links.get(name)}">${name}</a>`;
+							return `${prefix || ''}${link}`;
+					  })
+					: text) +
+				'</code>'
+			);
 		}
 	});
 }
@@ -286,6 +291,7 @@ function convert_to_ts(js_code, indent = '', offset = '') {
 			for (const comment of node.jsDoc) {
 				let modified = false;
 
+				let count = 0;
 				for (const tag of comment.tags ?? []) {
 					if (ts.isJSDocTypeTag(tag)) {
 						const [name, generics] = get_type_info(tag);
@@ -299,16 +305,19 @@ function convert_to_ts(js_code, indent = '', offset = '') {
 							const is_async = node.modifiers?.some(
 								(modifier) => modifier.kind === ts.SyntaxKind.AsyncKeyword
 							);
+
+							const type = generics !== undefined ? `${name}<${generics}>` : name;
+
 							code.overwrite(
 								node.getStart(),
 								node.name.getEnd(),
-								`${is_export ? 'export ' : ''}const ${node.name.getText()} = (${
+								`${is_export ? 'export ' : ''}const ${node.name.getText()}: ${type} = (${
 									is_async ? 'async ' : ''
 								}`
 							);
+
 							code.appendLeft(node.body.getStart(), '=> ');
-							const type = generics !== undefined ? `${name}${generics}` : name;
-							code.appendLeft(node.body.getEnd(), `) satisfies ${type};`);
+							code.appendLeft(node.body.getEnd(), ')');
 
 							modified = true;
 						} else if (
@@ -333,11 +342,30 @@ function convert_to_ts(js_code, indent = '', offset = '') {
 						// 		'Unhandled @type JsDoc->TS conversion; needs more params logic: ' + node.getText()
 						// 	);
 						// }
-						const [name] = get_type_info(tag);
-						code.appendLeft(node.parameters[0].getEnd(), `: ${name}`);
+
+						const sanitised_param = tag
+							.getFullText()
+							.replace(/\s+/g, '')
+							.replace(/(^\*|\*$)/g, '');
+
+						const [, param_type] = /@param{(.+)}(.+)/.exec(sanitised_param);
+
+						let param_count = 0;
+						for (const param of node.parameters) {
+							if (count !== param_count) {
+								param_count++;
+								continue;
+							}
+
+							code.appendLeft(param.getEnd(), `:${param_type}`);
+
+							param_count++;
+						}
 
 						modified = true;
 					}
+
+					count++;
 				}
 
 				if (modified) {
@@ -372,7 +400,19 @@ function convert_to_ts(js_code, indent = '', offset = '') {
 		code.appendLeft(insertion_point, offset + import_statements + '\n');
 	}
 
-	const transformed = code.toString();
+	let transformed = format(code.toString(), {
+		printWidth: 100,
+		parser: 'typescript',
+		useTabs: true,
+		singleQuote: true
+	});
+
+	// Indent transformed's each line by 2
+	transformed = transformed
+		.split('\n')
+		.map((line) => indent.repeat(1) + line)
+		.join('\n');
+
 	return transformed === js_code ? undefined : transformed.replace(/\n\s*\n\s*\n/g, '\n\n');
 
 	/** @param {ts.JSDocTypeTag | ts.JSDocParameterTag} tag */
@@ -380,7 +420,15 @@ function convert_to_ts(js_code, indent = '', offset = '') {
 		const type_text = tag.typeExpression.getText();
 		let name = type_text.slice(1, -1); // remove { }
 
-		const import_match = /import\('(.+?)'\)\.(\w+)(<{?[\n\* \w:;,]+}?>)?/.exec(type_text);
+		const single_line_name = format(name, {
+			printWidth: 1000,
+			parser: 'typescript',
+			semi: false,
+			singleQuote: true
+		}).replace('\n', '');
+
+		const import_match = /import\('(.+?)'\)\.(\w+)(?:<(.+)>)?$/s.exec(single_line_name);
+
 		if (import_match) {
 			const [, from, _name, generics] = import_match;
 			name = _name;
@@ -476,8 +524,12 @@ export function replace_export_type_placeholders(content, modules) {
 				.map((t) => {
 					let children = t.children.map((val) => stringify(val, 'dts')).join('\n\n');
 
+					const deprecated = t.deprecated
+						? ` <blockquote class="tag deprecated">${transform(t.deprecated)}</blockquote>`
+						: '';
+
 					const markdown = `<div class="ts-block">${fence(t.snippet, 'dts')}` + children + `</div>`;
-					return `### [TYPE]: ${t.name}\n\n${t.comment}\n\n${markdown}\n\n`;
+					return `### [TYPE]: ${t.name}\n\n${deprecated}\n\n${t.comment ?? ''}\n\n${markdown}\n\n`;
 				})
 				.join('')}`;
 		})
diff --git a/sites/svelte.dev/src/routes/content.json/content.server.js b/sites/svelte.dev/src/routes/content.json/content.server.js
index 4b5e8909a7..1fae873ba1 100644
--- a/sites/svelte.dev/src/routes/content.json/content.server.js
+++ b/sites/svelte.dev/src/routes/content.json/content.server.js
@@ -56,7 +56,7 @@ export function content() {
 			const rank = +metadata.rank || undefined;
 
 			blocks.push({
-				breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title ?? '')],
+				breadcrumbs: [...breadcrumbs, removeMarkdown(remove_TYPE(metadata.title) ?? '')],
 				href: category.href([slug]),
 				content: plaintext(intro),
 				rank
@@ -72,7 +72,11 @@ export function content() {
 				const intro = subsections.shift().trim();
 
 				blocks.push({
-					breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title), removeMarkdown(h2)],
+					breadcrumbs: [
+						...breadcrumbs,
+						removeMarkdown(remove_TYPE(metadata.title)),
+						remove_TYPE(removeMarkdown(h2))
+					],
 					href: category.href([slug, normalizeSlugify(h2)]),
 					content: plaintext(intro),
 					rank
@@ -85,9 +89,9 @@ export function content() {
 					blocks.push({
 						breadcrumbs: [
 							...breadcrumbs,
-							removeMarkdown(metadata.title),
-							removeMarkdown(h2),
-							removeMarkdown(h3)
+							removeMarkdown(remove_TYPE(metadata.title)),
+							removeMarkdown(remove_TYPE(h2)),
+							removeMarkdown(remove_TYPE(h3))
 						],
 						href: category.href([slug, normalizeSlugify(h2), normalizeSlugify(h3)]),
 						content: plaintext(lines.join('\n').trim()),
@@ -101,6 +105,11 @@ export function content() {
 	return blocks;
 }
 
+/** @param {string} str */
+function remove_TYPE(str) {
+	return str?.replace(/^\[TYPE\]:\s+(.+)/, '$1') ?? '';
+}
+
 /** @param {string} markdown */
 function plaintext(markdown) {
 	/** @param {unknown} text */
diff --git a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
index 3a3066c2a4..5a2962dee5 100644
--- a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
@@ -17,7 +17,7 @@
 <svelte:head>
 	<title>{data.page.title} • Docs • Svelte</title>
 
-	<meta name="twitter:title" content="Svelte docs" />
+	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
 	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
 	<meta name="Description" content="{data.page.title} • Svelte documentation" />
 </svelte:head>