Cookies

Reactive, signal-based cookie primitives for isomorphic use on client and server

npm i @solid-primitives/cookies@next

Reactive, signal-based cookie primitives for isomorphic use — readable and writable on both the server and the client.

This package provides higher-order cookie functionality: typed reactive signals that stay in sync with document.cookie, with built-in SSR support via getRequestEvent. It is intentionally narrow in scope.

Looking for raw cookie read/write? @solid-primitives/storage exposes cookieStorage — a localStorage-compatible API (getItem, setItem, removeItem, key) that works on both client and server, including full support for cookie attributes such as domain, path, secure, sameSite, and maxAge. Use that package when you need direct, imperative access to the cookie store.

• createServerCookie - Reactive signal backed by a named cookie; isomorphic on client and server.
• createUserTheme - Type-safe "light" | "dark" theme signal stored as a cookie.
• getCookiesString - Returns the raw cookie string from document.cookie on the client or the request Cookie header on the server.

How to use it

createServerCookie

Creates a reactive signal whose value is persisted to a named cookie. Reading the signal works on both the server (via the request Cookie header) and the client (via document.cookie). Writing the signal on the client automatically syncs the new value back to document.cookie.

import { createServerCookie } from "@solid-primitives/cookies";

const [cookie, setCookie] = createServerCookie("cookieName");

cookie(); // => string | undefined
setCookie("newValue");

Custom serialization

Pass deserialize and serialize functions to store non-string values.

import { createServerCookie } from "@solid-primitives/cookies";

const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
  deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
  serialize: val => (val ? val.join(" ") : ""), // Serializes the value back into a string
});

serverCookie(); // => string[]

createUserTheme

Composes createServerCookie to provide a type-safe "light" | "dark" theme signal. Any unrecognized cookie value is treated as undefined (or the provided defaultValue).

import { createUserTheme } from "@solid-primitives/cookies";

const [theme, setTheme] = createUserTheme("cookieName");

theme(); // => "light" | "dark" | undefined

// with default value
const [theme, setTheme] = createUserTheme("cookieName", {
  defaultValue: "light",
});

theme(); // => "light" | "dark"

getCookiesString

Returns the raw cookie string for the current environment — document.cookie in the browser, or the Cookie request header on the server. Use it together with parseCookie when you need to read a cookie value outside of a reactive context.

import { getCookiesString, parseCookie } from "@solid-primitives/cookies";

const string = getCookiesString();
const cookie = parseCookie(string, "cookie_name");

Changelog

See CHANGELOG.md