SvelteKit: Share State Between Layout And Page Components

Aug 17, 2025 by Mireille Lambert 58 views

Noob: Sharing State Between +layout.svelte and +page.svelte

Hey guys! Ever felt like you're juggling flaming torches trying to manage state between your +layout.svelte and +page.svelte components in SvelteKit? You're not alone! It's a common head-scratcher for newbies (and sometimes even experienced devs!). But fear not, because we're about to break it down in a way that's so simple, even your grandma could understand it. (Okay, maybe not your grandma, but you get the idea!)

Understanding the Challenge

Let's first understand why this feels tricky. In SvelteKit, +layout.svelte components are designed to wrap entire sections of your application. They're like the scaffolding that holds everything together – the navigation, the overall page structure, things that persist across multiple pages within a route. On the other hand, +page.svelte components are the actual content of a specific page. They live inside the layout.

So, you might have a layout that displays a user's profile information and a navigation menu. Then, different pages within that layout might show the user's posts, settings, or friends. The challenge arises when you need to share data – like the user's profile – between the layout and the page. Maybe you want to display the user's name in the navigation (layout) and their detailed profile on the page itself.

The core issue is that +layout.svelte and +page.svelte are separate components, each with its own scope and lifecycle. They don't automatically share data. So, how do we bridge this gap? Let's dive into the solutions!

The Magical World of Context API

The Context API in Svelte is like a secret tunnel between components. It allows you to share data down the component tree without having to pass props through every level. This is perfect for our layout-page scenario. Think of it as a centralized place to store and access shared state. It’s especially useful when you have a deeply nested component structure and prop drilling becomes a nightmare.

Here's the basic idea:

In your +layout.svelte, you create a context using setContext. You provide a key (a string, usually) and the data you want to share.
In your +page.svelte (or any child component), you use getContext with the same key to access the data.

Let's see it in action. Imagine we want to share user data between our layout and page.

+layout.svelte

<script>
    import { setContext } from 'svelte';

    const user = {
        name: 'John Doe',
        email: '[email protected]'
    };

    setContext('user', user);
</script>

<header>
    <h1>Welcome, {user.name}!</h1>
    <nav>
        <!-- Navigation links -->
    </nav>
</header>

<slot />

<style>
    header {
        background-color: #f0f0f0;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>

In this +layout.svelte, we import setContext from Svelte. We define a user object with some sample data. Then, we use setContext('user', user) to make this data available to any child component that asks for it. The key here is 'user' – it's the identifier we'll use to retrieve the data later. Notice the <slot />? That's where the content of our +page.svelte will be rendered.

+page.svelte

<script>
    import { getContext } from 'svelte';

    const user = getContext('user');
</script>

<main>
    <h2>User Profile</h2>
    <p>Name: {user.name}</p>
    <p>Email: {user.email}</p>
</main>

<style>
    main {
        padding: 1rem;
    }
</style>

In our +page.svelte, we import getContext from Svelte. We then use const user = getContext('user') to retrieve the user data we set in the layout. The 'user' key is crucial – it must match the key we used in setContext. Now, we can access user.name and user.email within our page component. Boom! Shared state achieved.

The Context API shines when you need to share data across multiple components without the hassle of prop drilling. It keeps your code cleaner and more maintainable. However, remember that it's best suited for data that is relatively global to a section of your application. Overusing context can make your data flow harder to track, so use it judiciously.

Leveraging Svelte Stores

Svelte stores provide a robust and reactive way to manage state in your applications. Think of them as containers that hold data and automatically notify components when that data changes. This makes them incredibly powerful for sharing state between +layout.svelte and +page.svelte, especially when dealing with data that might be updated during the user's session. They’re reactive, meaning components that subscribe to a store automatically update when the store’s value changes. This is perfect for situations where data needs to be synchronized across different parts of your application.

There are three types of stores in Svelte:

Readable: Can only be read.
Writable: Can be read and written to.
Derived: Computed from other stores.

For our scenario, we'll likely use a writable store. Let's see how it works.

First, we'll create a store file, let's call it userStore.js (or userStore.ts if you're using TypeScript), and place it in your src/lib directory (or any other suitable location).

src/lib/userStore.js

import { writable } from 'svelte/store';

const initialUser = {
    name: 'Guest',
    email: ''
};

export const user = writable(initialUser);

In this file, we import writable from svelte/store. We define an initialUser object with some default values. Then, we create a writable store called user using writable(initialUser). This store will hold our user data.

Now, let's use this store in our +layout.svelte and +page.svelte components.

+layout.svelte

<script>
    import { user } from '$lib/userStore';
    import { subscribe } from 'svelte/store';

    let currentUser;
    user.subscribe((value) => {
        currentUser = value;
    });

    const updateUser = (newUserData) => {
        user.set(newUserData);
    };

</script>

<header>
    <h1>Welcome, {$user.name}!</h1>
    <nav>
        <!-- Navigation links -->
    </nav>
    <button on:click={() => updateUser({ name: 'Jane Doe', email: '[email protected]' })}>Update User</button>
</header>

<slot />

<style>
    header {
        background-color: #f0f0f0;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>

In our +layout.svelte, we import the user store from $lib/userStore. We also import subscribe from svelte/store. We then subscribe to the user store using user.subscribe. This means that whenever the store's value changes, the callback function will be executed, updating the currentUser variable. We use the $user syntax (auto-subscription) in the template to display the user's name. We've added a button that, when clicked, updates the user store with new data. This demonstrates how you can modify the store from the layout.

+page.svelte

<script>
    import { user } from '$lib/userStore';
</script>

<main>
    <h2>User Profile</h2>
    <p>Name: {$user.name}</p>
    <p>Email: {$user.email}</p>
</main>

<style>
    main {
        padding: 1rem;
    }
</style>

In +page.svelte, we import the user store. We can then access the store's value using the $ prefix ($user). Svelte automatically subscribes to the store and updates the component whenever the store's value changes. Now, the page will display the user's name and email, and it will reactively update if the store is modified (for example, by clicking the button in the layout).

Svelte stores are fantastic for managing application-wide state. They provide a clear and reactive way to share data between components, making your application more predictable and easier to maintain. They are especially useful for handling data that changes over time, such as user authentication status, shopping cart contents, or application settings.

The Power of Props (and Layout Data)

Sometimes, the simplest solutions are the best! While Context API and Svelte stores are powerful, don't underestimate the humble prop. Props are arguments you pass to a component, and they're a fundamental way to share data in Svelte. In the context of SvelteKit, we can also leverage layout data, which is a special kind of prop passed from +layout.js (or +layout.ts) files.

This approach is most suitable when the data you want to share is relatively static or only needs to be passed down the component tree once. It's also a good choice when the data is specific to a particular route or layout.

Let's start with the basics: passing a prop directly from +layout.svelte to +page.svelte.

+layout.svelte

<script>
    const message = 'Hello from layout!';
</script>

<main>
    <slot message={message} />
</main>

<style>
    main {
        padding: 1rem;
    }
</style>

In this +layout.svelte, we define a message variable. We then pass this variable as a prop to the <slot> element. This makes the message prop available to the +page.svelte component that fills the slot. Notice how we're passing the prop using the syntax message={message}. This is how you pass dynamic values as props in Svelte.

+page.svelte

<script>
    export let message;
</script>

<main>
    <h2>{message}</h2>
</main>

<style>
    main {
        padding: 1rem;
    }
</style>

In +page.svelte, we declare a prop using export let message. This tells Svelte that this component expects a prop named message. The value of this prop will be automatically populated with the value passed from the layout. We can then use this prop within our component's template.

Now, let's take it up a notch and use layout data. Layout data is data loaded in a +layout.js (or +layout.ts) file and automatically passed as props to the corresponding +layout.svelte component and its child +page.svelte components. This is super handy for fetching data that's needed by the entire layout, like user information or site settings.

First, create a +layout.js (or +layout.ts) file in the same directory as your +layout.svelte.

+layout.js

export const load = async () => {
    // Simulate fetching user data from an API
    const user = {
        name: 'Alice Smith',
        email: '[email protected]'
    };

    return {
        user
    };
};

In this +layout.js file, we define a load function. This function is automatically called by SvelteKit during the routing process. Inside the function, we simulate fetching user data (in a real application, you'd likely make an API call here). We then return an object with a user property. This user object will be available as a prop in our +layout.svelte and +page.svelte components.

+layout.svelte

<script>
    export let data;
    const user = data.user;
</script>

<header>
    <h1>Welcome, {user.name}!</h1>
    <nav>
        <!-- Navigation links -->
    </nav>
</header>

<slot />

<style>
    header {
        background-color: #f0f0f0;
        padding: 1rem;
        margin-bottom: 1rem;
    }
</style>

In our +layout.svelte, we declare a prop named data. This prop will contain the data returned from the load function in +layout.js. We then extract the user object from data and use it in our template. Notice that we're destructuring the data object to get the user property.

+page.svelte

<script>
    export let data;
    const user = data.user;
</script>

<main>
    <h2>User Profile</h2>
    <p>Name: {user.name}</p>
    <p>Email: {user.email}</p>
</main>

<style>
    main {
        padding: 1rem;
    }
</style>

Similarly, in our +page.svelte, we declare the data prop and extract the user object. We can then use the user data to render the page content. We access the user data in the same way as in the layout component.

Props and layout data are a straightforward way to share data between components in SvelteKit. They're especially useful for passing down data that's loaded during the routing process or data that's relatively static. However, for more dynamic or application-wide state, Context API or Svelte stores might be a better choice.

Choosing the Right Tool for the Job

So, we've explored three powerful techniques for sharing state: Context API, Svelte stores, and props (including layout data). But which one should you use? The answer, as always, is