diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
index 0f1c8e0799..1d165d46ac 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
@@ -40,6 +40,23 @@ class Todo {
}
```
+
+Legacy mode
+
+In Svelte 4, state was implicitly reactive if the variable was declared at the top level
+
+```svelte
+
+
+
+```
+
+
+
## `$derived`
Derived state is declared with the `$derived` rune:
@@ -61,6 +78,27 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
As with `$state`, you can mark class fields as `$derived`.
+
+Legacy mode
+In Svelte 4, you could use reactive statements for this.
+
+```svelte
+
+
+
+
+
{count} doubled is {doubled}
+```
+
+This only worked at the top level of a component.
+
+
+
## `$effect`
To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
@@ -86,3 +124,31 @@ To run _side-effects_ when the component is mounted to the DOM, and when values
```
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.
+
+
+Legacy mode
+In Svelte 4, you could use reactive statements for this.
+
+```svelte
+
+
+
+```
+
+This only worked at the top level of a component.
+
+
diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index 14594cf757..192efa0c39 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -20,16 +20,13 @@
@@ -48,5 +45,13 @@