svelte-ssr-cookies

A small library for typed, schema-driven cookie management in SvelteKit with SSR support.

• Extract only the cookies defined in your schema on the server
• Pass them to the client without prop drilling
• Reactive, schema-validated cookies on the client
• Supports automatic persistence and optional cookie attributes

Installation

npm install svelte-ssr-cookies

# or with Bun

bun add svelte-ssr-cookies

Features

• Server: pickCookies — filters cookies by schema
• Client: useCookies — reactive proxy for schema-defined cookies
• Validation against a standard schema (StandardSchemaV1)
• Automatic JSON parsing/stringifying
• Optional cookie attributes (expires, path, domain, secure, sameSite)

Server Usage

In your +layout.server.ts or any load function:

import { pickCookies } from '@svelte-ssr-cookies/server';
import { schema } from '$lib/schemas/cookies';

import type { LayoutServerLoad } from './$types';

export const load = (async ({ cookies }) => {
    // Pick only the cookies defined in the schema
    const serverCookies = pickCookies(cookies, schema);

    return {
        cookies: serverCookies
    };
}) satisfies LayoutServerLoad;

This ensures that only cookies defined in your schema are sent to the client.

Client Usage

In a layout page:

<script lang="ts">
    import type { LayoutProps } from './$types';

    import { setContext } from 'svelte';
    import { useCookies } from '@svelte-ssr-cookies/client';
    import { schema } from '$lib/schemas/cookies';

    // cookies returned from server load function
    let { data, children }: LayoutProps = $props();

    // Create reactive cookies proxy
    const cookies = useCookies(schema, data.cookies);

    // Provide in this context
    setContext('cookies', cookies);

    // Read/write automatically reactive
    $inspect(cookies.state);
    cookies.state = false; // persisted automatically
</script>

{@render children?.()}

Anywhere in this layout subtree, you can inject the cookies from context:

import { getContext } from 'svelte';
const cookies = getContext('cookies');
$inspect(cookies.state); // reactive

Cookie Attributes (Optional)

You can set cookies with specific options using update:

cookies.update('state', true, {
    expires: 7, // 7 days
    path: '/',
    secure: true,
    sameSite: 'lax'
});

Schema Example

import z from 'zod';

export const schema = z.object({
    state: z.boolean().default(true)
});

⚠️ Each schema entry requires a default value; entries without defaults will be skipped by the library.

Advanced: Reactivity in Layout

You can bind reactive cookies directly to UI components. For example:

<script lang="ts">
    import { getContext } from 'svelte';
    const cookies = getContext('cookies');
</script>

<label>
    <input type="checkbox" bind:checked={cookies.state} />
    State cookie
</label>

<p>
    Current state: {cookies.state ? 'Active' : 'Inactive'}
</p>

Changes to cookies.state automatically:

• Update the cookie in the browser
• Trigger reactivity in Svelte components
• No prop drilling required

This makes cookies behave like reactive Svelte stores throughout the layout subtree.