The best way to handle state in Svelte 5 is with a class-based approach using Svelte's `setContext` and `getContext`. This allows us to access shared app state anywhere in the application without prop drilling. ## Creating the file Create a `svelte.ts` or `svelte.js` file. For this example, we will create the file `src/lib/hooks/app.svelte.ts` to manage our app state as shown below. ```typescript path="src/lib/hooks/app.svelte.ts" import { MediaQuery } from "svelte/reactivity"; import { setContext, getContext } from "svelte"; /** App state class-based management */ class UseApp { isDarkMode = $state(false); isMobile = $derived(new MediaQuery("max-width: 700px").current); // Set default data constructor(props: { [key: string]: any }) { // Merge props into this instance Object.assign(this, props); // Add or remove dark class on body whenever `isDarkMode` changes $effect(() => { document.body.classList.toggle("dark", this.isDarkMode); }); } /** Toggle isDarkMode */ darkModeToggle = () => (this.isDarkMode = !this.isDarkMode); } /** Hook props (isDarkMode can be set when initializing the hook) */ export type UseAppProps = Pick, "isDarkMode">; /** Set app state */ export const setApp = (props: UseAppProps) => setContext("appState", new UseApp(props)); /** Use app state */ export const useApp = () => getContext>("appState"); ``` ## Initializing the app state After creating the Svelte app hook, you need to initialize it inside your app layout, such as `src/routes/+layout.svelte` or `src/App.svelte` for Vite.js projects. ```svelte path="src/routes/+layout.svelte" {@render children()} ``` ## Using the app state Now we can use our app state inside any component without passing it as a prop. Simply import `useApp` and start using it. ```svelte path="src/lib/component/toggle-btn.svelte" ```

Blog Posts