Keksmeister

Der Meister der Kekse — A modern, framework-agnostic cookie consent Web Component.

` with Shadow DOM encapsulation - **Zero dependencies** — Vanilla TypeScript, no framework runtime - **Tiny bundle** — Target < 8 kB gzipped - **GDPR/DSGVO compliant** — Accept All + Reject All on first layer (equal prominence), granular categories, consent versioning - **Script blocking** — `data-keksmeister` attribute blocks scripts until consent - **Service adapters** — Programmatic opt-in/opt-out for PostHog, Matomo, GA4, Meta Pixel, Mixpanel, HubSpot, Plausible, TikTok Pixel - **Auto-clear cookies** — Revoked categories' cookies are automatically removed - **Google Consent Mode v2** — Built-in `gtag('consent', 'update', ...)` integration - **CSS Custom Properties** — Fully themeable from outside Shadow DOM - **i18n** — German and English built-in, extensible with custom translations - **Accessible** — Keyboard navigation, focus management, ARIA attributes - **Consent proof** — `onConsent` callback for server-side logging (you own the endpoint), plus an optional minimal file-based logging server in [`server/`](server/README.md) (Bun + Docker, no database) ## Quick Start ### npm ```bash npm install keksmeister ``` ```js import 'keksmeister'; ``` ```html ``` ### CDN / Script Tag No build step needed. Pick your preferred CDN: ```html ``` Pin a specific version for production: ```html ``` Browse all available files: [keksmeister on jsDelivr](https://www.jsdelivr.com/package/npm/keksmeister) ### JavaScript Configuration ```js import { KeksmeisterBanner } from 'keksmeister'; const banner = document.querySelector('keksmeister-banner'); banner.config = { categories: [ { id: 'essential', label: 'Essential', required: true }, { id: 'analytics', label: 'Analytics' }, { id: 'marketing', label: 'Marketing' }, ], privacyUrl: '/datenschutz', lang: 'de', revision: '2', googleConsentMode: true, onConsent: (record) => { // Send consent proof to your backend fetch('/api/consent', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(record), }); }, }; ``` ### Server-side consent logging (proof / Nachweispflicht) DSGVO / TDDDG require you to **prove** consent. Every `ConsentRecord` carries the fields you need for that: a `timestamp`, the banner `revision`, the `choices`, the `method`, an `action` (`grant` / `update` / `revoke`) and a pseudonymous, cookie-persisted `subjectId` that ties a visitor's decisions together without storing any personal data. You can ship records to your backend in two ways: 1. **`onConsent` callback** — full control, you own the transport (fires on grant/update). 2. **Built-in logger** (`logging`) — set an endpoint and Keksmeister sends every decision **including revocations** via `navigator.sendBeacon` (so it survives the navigation after "Accept all"), with a `localStorage` retry queue for offline/failed sends: ```js banner.config = { // ...categories, privacyUrl, revision... logging: { endpoint: 'https://consent.example.com/consent', includeUserAgent: false, // opt-in; raw IP is never sent by the library }, }; ``` A ready-to-run, database-free endpoint for this is included in [`server/`](server/README.md) (Bun + Docker; stores each record as a plain JSON file, ZIP the folder for a regulator export). See the [Consent Proof & Server-Side Logging guide](docs/consent-logging.md) for the full `logging` options, audit fields, CORS configuration, and export details. For how Keksmeister maps to **§ 25 TDDDG**, the **DSK Orientierungshilfe**, and the **EinwV / § 26 TDDDG** boundaries (Keksmeister is a self-hosted library, not an anerkannter Einwilligungsverwaltungsdienst), see [docs/compliance.md](docs/compliance.md). ### Resource Blocking (`data-keksmeister`) The blocker now covers every parse-time tracker the EDPB Guidelines 02/2023 v2.0 puts in scope, not just ` ``` The blocker also handles ``, `