From 637364104538cdac26e3807fd71e4be6dd2958f8 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 15 Nov 2024 14:32:47 +0100
Subject: [PATCH] docs: add example to "state instead of stores" (#14310)

closes #13879
---
 documentation/docs/06-runtime/01-stores.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/documentation/docs/06-runtime/01-stores.md b/documentation/docs/06-runtime/01-stores.md
index 8ea01e5314..9cff5a754f 100644
--- a/documentation/docs/06-runtime/01-stores.md
+++ b/documentation/docs/06-runtime/01-stores.md
@@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r
 - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)
 - when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
 
+```ts
+/// file: state.svelte.js
+export const userState = $state({
+	name: 'name',
+	/* ... */
+});
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { userState } from './state.svelte';
+</script>
+
+<p>User name: {userState.name}</p>
+<button onclick={() => {
+	userState.name = 'new name';
+}}>
+	change name
+</button>
+```
+
 Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.
 
 ## svelte/store