SvelteKit Cookie Consent: The Complete Guide

# SvelteKit Cookie Consent: The Complete Guide **Date:** March 20, 2026 **Author:** GetCookies Team **Category:** Technical **Reading Time:** 9 min --- SvelteKit is rapidly becoming the framework of choice for performance-obsessed developers. But its unique architecture—blending server-side rendering (SSR) and client-side hydration—presents specific challenges for cookie consent. You cannot just drop a script tag in `app.html` and hope for the best. You need to handle hydration mismatches, manage SSR cookies, and ensure Google Consent Mode signals fire before the first pixel renders. This guide covers the **GetCookies** implementation for SvelteKit 2.0+. ## 1. Installation The most efficient way to load GetCookies in SvelteKit is via the `app.html` file, ensuring it loads before your app hydrates. ```html ``` ## 2. Managing State in Svelte Stores While GetCookies handles the UI and blocking automatically, you might want to access consent state within your Svelte components (e.g., to conditionally render a YouTube embed). Create a store to track consent: ```typescript // src/lib/stores/consent.ts import { writable } from 'svelte/store'; export const consentState = writable({ analytics: false, marketing: false, functional: true }); if (typeof window !== 'undefined') { window.addEventListener('getcookies:consent_updated', (e: any) => { consentState.set(e.detail); }); } ``` ## 3. Server-Side Cookies (SSR) If you are doing A/B testing or personalization on the server (in `+page.server.ts`), you need to know the user's consent status *before* you render HTML. GetCookies sets a first-party cookie named `gc_consent` that you can read in your hooks. ```typescript // src/hooks.server.ts import type { Handle } from '@sveltejs/kit'; export const handle: Handle = async ({ event, resolve }) => { const consentCookie = event.cookies.get('gc_consent'); if (consentCookie) { const consent = JSON.parse(consentCookie); event.locals.consent = consent; } return await resolve(event); }; ``` ## 4. Conditional Third-Party Scripts Svelte's `` is perfect for injecting scripts only when consent is granted. ```svelte {#if $consentState.marketing} {/if} ``` ## Conclusion SvelteKit's "use the platform" philosophy works perfectly with GetCookies. By leveraging `app.html` for defaults and Svelte stores for reactive state, you get a compliant, high-performance setup that doesn't break hydration.