Keksmeister

Keksmeister is a lightweight cookie consent library built as a Web Component with Shadow DOM encapsulation. It drops into any web application — Angular, React, Vue, Svelte, or plain HTML — without style conflicts or framework dependencies.

Built for footage.one with GDPR/DSGVO compliance as a first-class concern. Live Demo

Why another cookie consent library?

We evaluated every major open-source consent library and found that none combines all three properties we needed:

Library	Web Component	Full GDPR Features	Modern ESM + TS
orestbida/cookieconsent	❌	✅	✅
Porsche cookie-consent-banner	✅	⚠️ partial	✅
Klaro	❌	✅	❌
tarteaucitron	❌	✅	❌
c15t	❌	✅	✅ (but Next.js focused)
Keksmeister	✅	✅	✅

Inspiration

• orestbida/cookieconsent — Best-in-class feature set (granular consent, script blocking, revision system, Google Consent Mode). We modeled our consent engine after this library's approach.
• Porsche cookie-consent-banner — Proved that a StencilJS-based Web Component approach works for consent banners. We chose native Custom Elements over Stencil to eliminate the runtime dependency.
• Klaro — Config-driven approach with per-service consent and data-attribute script blocking. Our data-keksmeister attribute pattern is inspired by Klaro's design.
• Orejime — Accessibility-focused Klaro fork. Reminded us that a11y is non-negotiable for consent UIs.
• c15t — Modern developer experience and full-stack consent logging. We agree on the DX goal but keep the server-side optional (a simple callback, not a whole database).

Features

• Web Component — <keksmeister-banner> 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/ (Bun + Docker, no database)

Quick Start

npm

npm install keksmeister

import 'keksmeister';

<keksmeister-banner
  privacy-url="/datenschutz"
  lang="de"
></keksmeister-banner>

CDN / Script Tag

No build step needed. Pick your preferred CDN:

<!-- jsDelivr (recommended) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/keksmeister/dist/keksmeister.min.js"></script>

<!-- or unpkg -->
<script type="module" src="https://unpkg.com/keksmeister/dist/keksmeister.min.js"></script>

<keksmeister-banner
  privacy-url="/datenschutz"
  lang="de"
></keksmeister-banner>
<keksmeister-trigger position="bottom-left"></keksmeister-trigger>

Pin a specific version for production:

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/keksmeister.min.js"></script>

Browse all available files: keksmeister on jsDelivr

JavaScript Configuration

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),
    });
  },
};

Consent Mode (mode)

banner.config = {
  // ...categories, privacyUrl...
  mode: 'opt-in', // default — no cookies until the visitor consents
};

• opt-in (default) — all non-essential categories start inactive until the visitor explicitly consents. Required by DSGVO/ePrivacy.
• opt-out — all non-essential categories start active, and the visitor can opt out afterwards. Matches CCPA/CPRA-style "right to opt out of sale" regimes.

⚠️ mode: 'opt-out' is for CCPA-style jurisdictions only — it is unlawful for visitors in the EU/EEA. DSGVO Art. 6(1)(a) + ErwGr 32 and ePrivacy Directive Art. 5(3) require prior, opt-in consent before any non-essential cookie is set; the UK's PECR mirrors this. Only use mode: 'opt-out' for a US-only deployment, or one gated behind a geo-IP check that keeps EU/EEA (and UK) visitors on the opt-in default. See docs/compliance.md for the full legal background.

This is the beginning of the README. Read the rest at the original. Read the full README ↗