--- title: "Ship a Remix 3 app with consent before your first user" description: "Remix 3 is in beta and most consent tooling was built for the React era. PolicyStack is headless primitives, so it works with Remix's server-first, non-React runtime out of the box. One TypeScript config drives the cookie banner, the privacy policy, and the cookie policy." date: "2026-05-12" type: blog authors: Jamie Davenport search: tags: [engineering] boost: -1 ai: exclude: true --- _By Jamie Davenport. Historical article; examples reflect the publication date._ > For current setup and support, use the [V1 documentation](https://policystack.dev/docs) and [support matrix](https://policystack.dev/docs/reference/support). PolicyStack supplies headless consent primitives; you build the banner. Broader platform capabilities remain [planned V2 direction](https://policystack.dev/docs/roadmap). Remix 3 is the first version of Remix that isn't React. The runtime is its own component model — server-first, web-APIs-everywhere, with a single small hydration primitive (`clientEntry`) for the bits that need to run in the browser. The framework is in beta. Most of the privacy and consent tooling out there was built for the React era and is going to need adapters before it works here. The right time to wire consent into a new app is before there are users to ask. Remix 3's beta window is exactly that window: you're starting clean, the auditor isn't on the calendar yet, and the choice between "consent as code" and "consent as a third-party iframe" is still open. PolicyStack happens to fit the new runtime well — its building blocks, Consent and Policy, ship no UI of their own. They're primitives. Remix 3 is a primitives-shaped framework. This post walks through wiring them in. ## What Remix 3 changes If you're coming from Remix 2 (or any of the React meta-frameworks), three things matter for a consent integration: - **Components are not React.** `remix/ui` exports a `RemixNode`, a `Handle`, and the JSX it accepts is its own runtime. There is no React reconciler, no `useState`, no `useEffect`. A pre-built React banner from your old consent vendor doesn't compile here. - **Server-rendering is the default; hydration is opt-in.** A route handler returns a `Response`. The HTML is streamed. There is no client JS unless you explicitly mount a `clientEntry` component, and each one is hydrated independently — closer to an island than a SPA. - **Browser assets are allow-listed.** `createAssetServer({ allow: [...] })` declares which files are reachable from the client. Anything outside the allow-list 404s, which means accidental client imports of server-only modules fail at the boundary instead of leaking secrets. The shape that falls out: most of your app is HTML produced on the server with no client JS. The few interactive things — a cookie banner, a settings dropdown — are isolated `clientEntry` modules. That's a great shape for consent, because the policy pages have nothing to hydrate and the banner is a small, contained island. ## Install Two runtime packages plus the policy SDK: ```bash file="terminal" tag="bash" pnpm add @policystack/core @policystack/sdk ``` `@policystack/sdk` is the typed config builder. `@policystack/core` compiles the config into a framework-agnostic Document AST that you walk with whatever component model you've got, and its `./consent` subpath is the consent state machine — categories, decisions, jurisdiction resolution, GPC, persistence. No framework adapter required, because Remix 3 isn't on the adapter list and doesn't need to be: the state machine subscribes to changes, you call `handle.update()`, the rest is your code. ## One config, three surfaces The point of doing this once on day one is that the privacy policy, the cookie policy, and the banner's categories all come from the same source. Put it under `app/data/`: ```ts file="app/data/policystack.ts" import { ContractPrerequisite, LegalBases, Voluntary, defineConfig } from "@policystack/sdk"; export const policy = defineConfig({ company: { name: "Acme", legalName: "Acme Ltd", address: "1 Demo Lane, London, UK", contact: { email: "privacy@acme.com" }, }, effectiveDate: "2026-05-12", jurisdictions: ["eea", "uk"], data: { collected: { "Account Information": ["Name", "Email address"], "Usage Data": ["Pages visited", "IP address"], }, context: { "Account Information": { purpose: "To authenticate users and send service notifications.", lawfulBasis: LegalBases.Contract, retention: "Until account deletion", provision: ContractPrerequisite("We cannot operate your account."), }, "Usage Data": { purpose: "To understand product usage and improve the service.", lawfulBasis: LegalBases.LegitimateInterests, retention: "90 days", provision: Voluntary("None — your service is unaffected."), }, }, }, thirdParties: [], cookies: { used: { essential: true, analytics: true, marketing: false }, context: { essential: { lawfulBasis: LegalBases.LegalObligation }, analytics: { lawfulBasis: LegalBases.Consent }, marketing: { lawfulBasis: LegalBases.Consent }, }, }, }); ``` This is the only file you edit when something changes. Add an SDK that drops a third-party cookie? It goes in `thirdParties`. Change retention on usage data? You change one line. The banner's category list and both policy documents update from the same config. ## Server-render the policy pages `@policystack/core` exposes two compiler functions — `compilePrivacyPolicy` and `compileCookiePolicy` — that produce a Document AST. Compile once at module load, then hand the result to a server component that walks the tree: ```tsx file="app/controllers/privacy.tsx" import { compilePrivacyPolicy } from "@policystack/core"; import type { BuildAction } from "remix/fetch-router"; import { policy } from "../data/policystack.ts"; import type { routes } from "../routes.ts"; import { Layout } from "../ui/layout.tsx"; import { PolicyDocument } from "../ui/policy-document.tsx"; import { render } from "../utils/render.tsx"; const privacyDoc = compilePrivacyPolicy(policy); if (!privacyDoc) throw new Error("No privacy policy configured"); export const privacy: BuildAction<"GET", typeof routes.privacy> = { handler({ request }) { return render( , request, ); }, }; ``` The cookie policy is the same controller with `compileCookiePolicy` instead. Both run server-only — no `clientEntry`, no hydration, no client JS for the document content. `PolicyDocument` is the framework-specific bit. Because the AST is plain data (`Document → DocumentSection → ContentNode → InlineNode`), the walker is short and reads like a stand-alone HTML transformer: ```tsx file="app/ui/policy-document.tsx" import type { ContentNode, Document, InlineNode, ListNode, TableNode } from "@policystack/core"; import { css, type Handle, type RemixNode } from "remix/ui"; export function PolicyDocument(handle: Handle<{ doc: Document }>) { return () => (
{handle.props.doc.sections.map((section) => (
{section.content.map(renderContent)}
))}
); } function renderContent(node: ContentNode): RemixNode { switch (node.type) { case "heading": { const Tag = `h${node.level ?? 2}` as "h1" | "h2" | "h3"; return {node.value}; } case "paragraph": return

{node.children.map(renderInline)}

; case "list": return renderList(node); case "table": return renderTable(node); } } function renderInline(node: InlineNode): RemixNode { switch (node.type) { case "text": return node.value; case "bold": return {node.value}; case "italic": return {node.value}; case "link": return {node.value}; } } ``` (The full version handles lists and tables; same pattern.) What you get is a privacy policy and a cookie policy that render with zero client JS, that are typed end to end, and that change in PR review when the underlying config changes. Add a new third party to `thirdParties`, the disclosure shows up on the next deploy. Delete a data category, the section disappears. No vendor dashboard. No "the marketing page says one thing and the legal page says another." ## Hydrate the cookie banner with `clientEntry` The banner is the one piece that has to run on the client — visitor clicks "Accept all," the store updates, the banner re-renders, and on the next page load the analytics SDKs are allowed to load. In Remix 3 that's a single `clientEntry` module that wraps a `@policystack/core/consent` store: ```tsx file="app/ui/cookie-banner.tsx" import { createConsentStore, timezoneResolver, type ConsentStore } from "@policystack/core/consent"; import { localStorageAdapter } from "@policystack/core/consent/storage/local-storage"; import { clientEntry, css, on, type Handle } from "remix/ui"; import { policy } from "../data/policystack.ts"; export const CookieBanner = clientEntry(import.meta.url, function CookieBanner(handle: Handle) { let store: ConsentStore | null = null; if (typeof window !== "undefined") { store = createConsentStore({ ...policy, consent: { adapter: localStorageAdapter(), jurisdictionResolver: timezoneResolver(), }, }); let unsubscribe = store.subscribe(() => handle.update()); handle.signal.addEventListener("abort", unsubscribe); } return () => { let route = store?.getState().route; if (route !== "cookie") return