diff --git a/.editorconfig b/.editorconfig
index 39fd6e0..f7cf72f 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -13,7 +13,10 @@ indent_size = 2
 [*.{yml,yaml}]
 indent_size = 2
 
-[*.js]
+[*.{js,ts}]
+indent_size = 2
+
+[*.json]
 indent_size = 2
 
 [Makefile]
diff --git a/.github/actions/build-js/action.yml b/.github/actions/build-js/action.yml
new file mode 100644
index 0000000..9761bb8
--- /dev/null
+++ b/.github/actions/build-js/action.yml
@@ -0,0 +1,46 @@
+---
+
+name: 'Build JS'
+description: 'Compile the TS source code'
+
+inputs:
+  npm-package:
+    description: Build NPM package
+    required: false
+    default: 'false'
+
+  django-staticfiles:
+    description: Bundle Django staticfiles
+    required: false
+    default: 'false'
+
+runs:
+  using: 'composite'
+
+  steps:
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: 'js/.nvmrc'
+        cache: npm
+        cache-dependency-path: js/package-lock.json
+        # Blocked by https://github.com/jazzband/django-cookie-consent/issues/120
+        # registry-url: 'https://registry.npmjs.org'
+        # scope: '@jazzband'
+
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+      working-directory: js
+
+    - name: Build NPM package
+      if: ${{ inputs.npm-package == 'true' }}
+      run: npm run build
+      shell: bash
+      working-directory: js
+
+    - name: Build Django assets package
+      if: ${{ inputs.django-staticfiles == 'true' }}
+      run: npm run build:django-static
+      shell: bash
+      working-directory: js
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2878be2..7b4ad9f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,6 +11,17 @@ on:
   workflow_dispatch:
 
 jobs:
+  build-js:
+    runs-on: ubuntu-latest
+    name: Compile the frontend code
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/build-js
+        with:
+          npm-package: 'true'
+          django-staticfiles: 'false'
+
   tests:
     runs-on: ubuntu-latest
     strategy:
@@ -54,6 +65,11 @@ jobs:
         with:
           python-version: '3.10'
 
+      - uses: ./.github/actions/build-js
+        with:
+          npm-package: 'false'
+          django-staticfiles: 'true'
+
       - name: Install dependencies
         run: |
           pip install tox tox-gh-actions pytest-playwright
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index cb25d2c..1fa8cfe 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -7,10 +7,14 @@ on:
 
 jobs:
   build:
-    name: Publish package to Jazzband private PyPI
+    name: Publish packages
     runs-on: ubuntu-latest
     if: github.repository == 'jazzband/django-cookie-consent'
 
+    permissions:
+      contents: read
+      packages: write
+
     steps:
       - uses: actions/checkout@v3
         with:
@@ -26,16 +30,29 @@ jobs:
           python -m pip install -U pip
           python -m pip install -U setuptools twine wheel
 
+      - uses: ./.github/actions/build-js
+        with:
+          npm-package: 'true'
+          django-staticfiles: 'true'
+
       - name: Build package
         run: |
           python setup.py --version
           python setup.py sdist --format=gztar bdist_wheel
           twine check dist/*
 
-      - name: Upload packages to Jazzband
+      - name: Upload packages to Jazzband private PyPI
         if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags')
         uses: pypa/gh-action-pypi-publish@release/v1
         with:
           user: jazzband
           password: ${{ secrets.JAZZBAND_RELEASE_KEY }}
           repository_url: https://jazzband.co/projects/django-cookie-consent/upload
+
+      # Blocked on https://github.com/jazzband/django-cookie-consent/issues/120
+      # - name: Publish NPM package to Github
+      #   if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags')
+      #   run: npm publish
+      #   working-directory: js
+      #   env:
+      #     NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 9751be2..a46d039 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,8 @@ dist/
 htmlcov/
 reports/
 testapp/*.db
+
+# frontend tooling / builds
+js/node_modules/
+js/lib/
+cookie_consent/static/cookie_consent/cookiebar.module.*
diff --git a/CONTRIBUTING.rst b/CONTRIBUTING.rst
index 3a63f46..63846fb 100644
--- a/CONTRIBUTING.rst
+++ b/CONTRIBUTING.rst
@@ -46,6 +46,18 @@ You can then install the project with all the dev-tools:
 
    pip install -e .[tests,pep8,coverage,docs,release]
 
+Some frontend tooling is needed to:
+
+* NodeJS (for the version, see ``.nvmrc``, you can use ``nvm``)
+
+.. code-block:: bash
+
+    cd js
+    nvm use
+    npm install
+    npm run build:django-static
+    npm run build  # optional, but a nice check
+
 **Running the testapp as dev environment**
 
 In Django project's, you are typically expecting a ``manage.py`` file. This is less
@@ -127,6 +139,11 @@ After updating changelogs etc.
 .. code-block:: bash
 
     tbump {new-version} --only-patch
+    cd js
+    npm version major|minor|patch --no-git-tag-version
+    cd ..
+
     git commit -am ":bookmark: Bump to version <X.Y.Z>"
+
     git tag -s X.Y.Z
     git push origin master --tags
diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js b/cookie_consent/static/cookie_consent/cookiebar.module.js
deleted file mode 100644
index af27203..0000000
--- a/cookie_consent/static/cookie_consent/cookiebar.module.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Cookiebar functionality, as a Javascript module.
- *
- * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
- *
- * The code is organized here in a way to make the templates work with Django's page
- * cache. This means that anything user-specific (so different django session and even
- * cookie consent cookies) cannot be baked into the templates, as that breaks caches.
- *
- * The cookie bar operates on the following principles:
- *
- * - The developer using the library includes the desired template in their django
- *   templates, using the HTML <template> element. This contains the content for the
- *   cookie bar.
- * - The developer is responsible for loading some Javascript that loads this script.
- * - The main export of this script needs to be called (showCookieBar), with the
- *   appropriate options.
- * - The options include the backend URLs where the retrieve data, which selectors/DOM
- *   nodes to use for various functionality and the hooks to tap into the accept/decline
- *   life-cycle.
- * - When a user accepts or declines (all) cookies, the call to the backend is made via
- *   a fetch request, bypassing any page caches and preventing full-page reloads.
- */
-const DEFAULTS = {
-  statusUrl: undefined,
-  // TODO: also accept element rather than selector?
-  templateSelector: '#cookie-consent__cookie-bar',
-  cookieGroupsSelector: '#cookie-consent__cookie-groups',
-  acceptSelector: '.cookie-consent__accept',
-  declineSelector: '.cookie-consent__decline',
-  /**
-   * Either a string (selector), DOMNode or null.
-   *
-   * If null, the bar is appended to the body. If provided, the node is used or looked
-   * up.
-   */
-  insertBefore: null,
-  onShow: null, // callback when the cookie bar is being shown -> add class to body...
-  onAccept: null, // callback when cookies are accepted
-  onDecline: null, // callback when cookies are declined
-  csrfHeaderName: 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME
-};
-
-const DEFAULT_HEADERS = {'X-Cookie-Consent-Fetch': '1'};
-
-let CONFIGURATION = DEFAULTS;
-/**
- * Cookie accept status, including the accept/decline URLs, csrftoken... See
- * backend view CookieStatusView.
- */
-let COOKIE_STATUS = null;
-
-export const loadCookieGroups = (selector) => {
-  const node = document.querySelector(selector);
-  if (!node) {
-    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);
-  }
-  return JSON.parse(node.innerText);
-};
-
-const doInsertBefore = (beforeNode, newNode) => {
-  const parent = beforeNode.parentNode;
-  parent.insertBefore(newNode, beforeNode);
-}
-
-/**
- * Register the accept/decline event handlers.
- *
- * Note that we can't just set the decline or accept cookie purely client-side, as the
- * cookie possibly has the httpOnly flag set.
- *
- * @param  {HTMLEelement} cookieBarNode The DOM node containing the cookiebar markup.
- * @param  {Array}        cookieGroups  The array of all configured cookie groups.
- * @return {Void}
- */
-const registerEvents = (cookieBarNode, cookieGroups) => {
-  const {acceptSelector, onAccept, declineSelector, onDecline} = CONFIGURATION;
-  const {
-    acceptedCookieGroups: accepted,
-    declinedCookieGroups: declined,
-    notAcceptedOrDeclinedCookieGroups: undecided,
-} = COOKIE_STATUS;
-
-  cookieBarNode
-    .querySelector(acceptSelector)
-    .addEventListener('click', event => {
-      event.preventDefault();
-      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));
-      onAccept?.(acceptedGroups, event);
-      acceptCookiesBackend();
-      cookieBarNode.parentNode.removeChild(cookieBarNode);
-    });
-
-  cookieBarNode
-    .querySelector(declineSelector)
-    .addEventListener('click', event => {
-      event.preventDefault();
-      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));
-      onDecline?.(declinedGroups, event);
-      declineCookiesBackend();
-      cookieBarNode.parentNode.removeChild(cookieBarNode);
-    });
-};
-
-const loadCookieStatus = async () => {
-  const {statusUrl} = CONFIGURATION;
-  if (!statusUrl) console.error('Missing status URL option, did you forget to pass the statusUrl option?');
-  const response = await window.fetch(
-    CONFIGURATION.statusUrl,
-    {
-      method: 'GET',
-      credentials: 'same-origin',
-      headers: DEFAULT_HEADERS
-    }
-  );
-  // assign to module level variable, once the page is loaded these details should
-  // not change.
-  COOKIE_STATUS = await response.json();
-};
-
-const saveCookiesStatusBackend = async (urlProperty) => {
-  const status = COOKIE_STATUS || {};
-  const url = status[urlProperty];
-  if (!url) {
-    console.error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
-    return;
-  }
-  await window.fetch(url, {
-    method: 'POST',
-    credentials: 'same-origin',
-    headers: {
-      ...DEFAULT_HEADERS,
-      [CONFIGURATION.csrfHeaderName]: status.csrftoken
-    }
-  });
-}
-
-/**
- * Make the call to the backend to accept the cookies.
- */
-const acceptCookiesBackend = async () => await saveCookiesStatusBackend('acceptUrl');
-/**
- * Make the call to the backend to decline the cookies.
- */
-const declineCookiesBackend = async () => await saveCookiesStatusBackend('declineUrl');
-
-/**
- * Filter the cookie groups down to a subset of specified varnames.
- */
-const filterCookieGroups = (cookieGroups, varNames) => {
-  return cookieGroups.filter(group => varNames.includes(group.varname));
-};
-
-export const showCookieBar = async (options={}) => {
-  // merge defaults and provided options
-  CONFIGURATION = {...DEFAULTS, ...options};
-  const {
-    cookieGroupsSelector,
-    templateSelector,
-    insertBefore,
-    onShow,
-    onAccept,
-    onDecline,
-  } = CONFIGURATION;
-  const cookieGroups = loadCookieGroups(cookieGroupsSelector);
-
-  // no cookie groups -> abort
-  if (!cookieGroups.length) return;
-
-  const templateNode = document.querySelector(templateSelector);
-
-  // insert before a given node, if specified, or append to the body as default behaviour
-  const doInsert = insertBefore === null
-    ? (cookieBarNode) => document.querySelector('body').appendChild(cookieBarNode)
-    : typeof insertBefore === 'string'
-      ? (cookieBarNode) => doInsertBefore(document.querySelector(insertBefore), cookieBarNode)
-      : (cookieBarNode) => doInsertBefore(insertBefore, cookieBarNode)
-  ;
-  await loadCookieStatus();
-
-  // calculate the cookie groups to invoke the callbacks. We deliberately fire those
-  // without awaiting so that our cookie bar is shown/hidden as soon as possible.
-  const {
-    acceptedCookieGroups: accepted,
-    declinedCookieGroups: declined,
-    notAcceptedOrDeclinedCookieGroups
-  } = COOKIE_STATUS;
-
-  const acceptedGroups = filterCookieGroups(cookieGroups, accepted);
-  if (acceptedGroups.length) onAccept?.(acceptedGroups);
-  const declinedGroups = filterCookieGroups(cookieGroups, declined);
-  if (declinedGroups.length) onDecline?.(declinedGroups);
-
-  // there are no (more) cookie groups to accept, don't show the bar
-  if (!notAcceptedOrDeclinedCookieGroups.length) return;
-
-  // grab the contents from the template node and add them to the DOM, optionally
-  // calling the onShow callback
-  const cookieBarNode = templateNode.content.firstElementChild.cloneNode(true);
-  registerEvents(cookieBarNode, cookieGroups);
-  onShow?.();
-  doInsert(cookieBarNode);
-};
diff --git a/docs/javascript.rst b/docs/javascript.rst
index 1f83361..fa24729 100644
--- a/docs/javascript.rst
+++ b/docs/javascript.rst
@@ -105,8 +105,18 @@ The ``status_url`` is special - it points to a backend view which returns the
 user-specific cookie consent status, returning the appropriate accept and decline URLs
 and other details relevant to cookie consent.
 
-You can of course also import this function in your own Javascript entrypoint (if you
-use Babel/Webpack or similar tooling) and initialize the cookie bar that way.
+.. note::
+
+    If you prefer the include the cookiebar module in your own Javascript entrypoint,
+    the easiest way is to install our `published package`_.
+
+    This package should work with TypeScript, Webpack, ESBuild, Vite... and other popular
+    bundlers and toolchains.
+
+    Just be careful to install the same (minor) version as the backend package to avoid
+    weird bugs.
+
+.. _published package: hhttps://www.npmjs.com/package/django-cookie-consent
 
 Options
 =======
diff --git a/js/.nvmrc b/js/.nvmrc
new file mode 100644
index 0000000..9a2a0e2
--- /dev/null
+++ b/js/.nvmrc
@@ -0,0 +1 @@
+v20
diff --git a/js/README.md b/js/README.md
new file mode 100644
index 0000000..d2e301d
--- /dev/null
+++ b/js/README.md
@@ -0,0 +1,52 @@
+# django-cookie-consent
+
+Package containing the JS code for django-cookie-consent.
+
+[![Jazzband][badge:jazzband]][jazzband]
+
+The cookiebar module is shipped in the Python package itself and available through
+django's staticfiles mechanism. This package is aimed at users wishing to include the
+assets in their own Javascript bundle through webpack/vite/...
+
+## Installation
+
+```bash
+npm install django-cookie-consent
+```
+
+You can now import the public API in your own bundle:
+
+```ts
+import {showCookieBar} from '@jazzband/django-cookie-consent';
+````
+
+## TypeScript and ESM
+
+The source code is written in TypeScript. The type declarations are shipped in the
+published package.
+
+We only publish ES modules and do not offer CommonJS.
+
+## Building
+
+Use ``nvm`` or your tool of choice to select the right NodeJS version:
+
+```bash
+nvm use
+```
+
+Building the NPM package:
+
+```bash
+npm run build
+```
+
+Lastly, the frontend toolchain also builds the cookiebar module bundle that's included
+in the Python package:
+
+```bash
+npm run build:django-static
+```
+
+[jazzband]: https://jazzband.co/
+[badge:jazzband]: https://jazzband.co/static/img/badge.svg
diff --git a/js/package-lock.json b/js/package-lock.json
new file mode 100644
index 0000000..58bb39a
--- /dev/null
+++ b/js/package-lock.json
@@ -0,0 +1,436 @@
+{
+  "name": "django-cookie-consent",
+  "version": "0.6.0-beta0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "django-cookie-consent",
+      "version": "0.6.0-beta0",
+      "license": "BSD-2-Clause",
+      "devDependencies": {
+        "esbuild": "^0.20.2",
+        "typescript": "^5.4.5"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}
diff --git a/js/package.json b/js/package.json
new file mode 100644
index 0000000..1db695a
--- /dev/null
+++ b/js/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "django-cookie-consent",
+  "version": "0.6.0-beta0",
+  "description": "Frontend code for django-cookie-consent",
+  "main": "lib/index.js",
+  "type": "module",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:django-static": "esbuild --bundle src/cookiebar.ts --outfile=../cookie_consent/static/cookie_consent/cookiebar.module.js --target=es2018 --format=esm --sourcemap",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jazzband/django-cookie-consent.git"
+  },
+  "keywords": [
+    "django",
+    "typescript",
+    "cookie",
+    "consent"
+  ],
+  "author": "Sergei Maertens",
+  "license": "BSD-2-Clause",
+  "bugs": {
+    "url": "https://github.com/jazzband/django-cookie-consent/issues"
+  },
+  "homepage": "https://github.com/jazzband/django-cookie-consent#readme",
+  "devDependencies": {
+    "esbuild": "^0.20.2",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/js/src/cookiebar.ts b/js/src/cookiebar.ts
new file mode 100644
index 0000000..f61fdb0
--- /dev/null
+++ b/js/src/cookiebar.ts
@@ -0,0 +1,325 @@
+/**
+ * Cookiebar functionality, as a TS/JS module.
+ *
+ * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+ *
+ * The code is organized here in a way to make the templates work with Django's page
+ * cache. This means that anything user-specific (so different django session and even
+ * cookie consent cookies) cannot be baked into the templates, as that breaks caches.
+ *
+ * The cookie bar operates on the following principles:
+ *
+ * - The developer using the library includes the desired template in their django
+ *   templates, using the HTML <template> element. This contains the content for the
+ *   cookie bar.
+ * - The developer is responsible for loading some Javascript that loads this script.
+ * - The main export of this script needs to be called (showCookieBar), with the
+ *   appropriate options.
+ * - The options include the backend URLs where the retrieve data, which selectors/DOM
+ *   nodes to use for various functionality and the hooks to tap into the accept/decline
+ *   life-cycle.
+ * - When a user accepts or declines (all) cookies, the call to the backend is made via
+ *   a fetch request, bypassing any page caches and preventing full-page reloads.
+ */
+
+/**
+ * A serialized cookie group.
+ *
+ * See the backend model method `CookieGroup.as_json()`.
+ */
+export interface CookieGroup {
+  varname: string;
+  name: string;
+  description: string;
+  is_required: boolean;
+}
+
+export interface Options {
+  statusUrl: string;
+  // TODO: also accept element rather than selector?
+  templateSelector: string;
+  /**
+   * DOM selector to the (script) tag holding the JSON-serialized cookie groups.
+   *
+   * This is typically rendered in a template with a template tag, e.g.
+   *
+   * ```django
+   * {% all_cookie_groups 'cookie-consent__cookie-groups' %}
+   * ```
+   *
+   * resulting in the selector: `'#cookie-consent__cookie-groups'`.
+   */
+  cookieGroupsSelector: string;
+  acceptSelector: string;
+  declineSelector: string;
+  /**
+   * Either a string (selector), DOMNode or null.
+   *
+   * If null, the bar is appended to the body. If provided, the node is used or looked
+   * up.
+   */
+  insertBefore: string | HTMLElement | null;
+  /**
+   * Optional callback for when the cookie bar is being shown.
+   *
+   * You can use this to add a CSS class name to the body, for example.
+   */
+  onShow?: () => void;
+  /**
+   * Optional callback called when cookies are accepted.
+   */
+  onAccept?: (acceptedGroups: CookieGroup[], event?: MouseEvent) => void;
+  /**
+   * Optional callback called when cookies are accepted.
+   */
+  onDecline?: (declinedGroups: CookieGroup[], event?: MouseEvent) => void;
+  /**
+   * Name of the header to use for the CSRF token.
+   *
+   * If needed, this can be read/set via `settings.CSRF_HEADER_NAME` in the backend.
+   */
+  csrfHeaderName: string;
+};
+
+export interface CookieStatus {
+  csrftoken: string;
+  /**
+   * Backend endpoint to POST to to accept the cookie groups.
+   */
+  acceptUrl: string;
+  /**
+   * Backend endpoint to POST to to decline the cookie groups.
+   */
+  declineUrl: string;
+  /**
+   * Array of accepted cookie group varnames.
+   */
+  acceptedCookieGroups: string[];
+  /**
+   * Array of declined cookie group varnames.
+   */
+  declinedCookieGroups: string[];
+  /**
+   * Array of undecided cookie group varnames.
+   */
+  notAcceptedOrDeclinedCookieGroups: string[];
+}
+
+const DEFAULT_FETCH_HEADERS: Record<string, string> = {
+  'X-Cookie-Consent-Fetch': '1'
+};
+
+class FetchClient {
+  protected statusUrl: string;
+  protected csrfHeaderName: string;
+  protected cookieStatus: CookieStatus | null;
+
+  constructor(statusUrl: string, csrfHeaderName: string) {
+    this.statusUrl = statusUrl;
+    this.csrfHeaderName = csrfHeaderName;
+    this.cookieStatus = null;
+  }
+
+  async getCookieStatus(): Promise<CookieStatus> {
+    if (this.cookieStatus === null) {
+      const response = await window.fetch(
+        this.statusUrl,
+        {
+          method: 'GET',
+          credentials: 'same-origin',
+          headers: DEFAULT_FETCH_HEADERS,
+        }
+      );
+      this.cookieStatus = await response.json();
+    }
+
+    // type checker sanity check
+    if (this.cookieStatus === null) {
+      throw new Error('Unexpectedly received null cookie status');
+    }
+    return this.cookieStatus;
+  };
+
+  async saveCookiesStatusBackend (urlProperty: 'acceptUrl' | 'declineUrl') {
+    const cookieStatus = await this.getCookieStatus();
+    const url = cookieStatus[urlProperty];
+    if (!url) {
+      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
+    }
+
+    await window.fetch(url, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        ...DEFAULT_FETCH_HEADERS,
+        [this.csrfHeaderName]: cookieStatus.csrftoken
+      }
+    });
+  }
+}
+
+/**
+ * Read the JSON script node contents and parse the content as JSON.
+ *
+ * The result is the list of available/configured cookie groups.
+ * Use the status URL to get the accepted/declined status for an individual user.
+ */
+export const loadCookieGroups = (selector: string): CookieGroup[] => {
+  const node = document.querySelector<HTMLScriptElement>(selector);
+  if (!node) {
+    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);
+  }
+  return JSON.parse(node.innerText);
+};
+
+const doInsertBefore = (beforeNode: HTMLElement, newNode: Node): void => {
+  const parent = beforeNode.parentNode;
+  if (parent === null) throw new Error('Reference node doesn\'t have a parent.');
+  parent.insertBefore(newNode, beforeNode);
+}
+
+type RegisterEventsOptions = Pick<
+  Options,
+  'acceptSelector' | 'onAccept' | 'declineSelector' | 'onDecline'
+> & Pick<
+  CookieStatus,
+  'acceptedCookieGroups' | 'declinedCookieGroups' | 'notAcceptedOrDeclinedCookieGroups'
+> & {
+  client: FetchClient,
+  cookieBarNode: Element;
+  cookieGroups: CookieGroup[];
+}
+
+/**
+ * Register the accept/decline event handlers.
+ *
+ * Note that we can't just set the decline or accept cookie purely client-side, as the
+ * cookie possibly has the httpOnly flag set.
+ */
+const registerEvents = ({
+  client,
+  cookieBarNode,
+  cookieGroups,
+  acceptSelector,
+  onAccept,
+  declineSelector,
+  onDecline,
+  acceptedCookieGroups: accepted,
+  declinedCookieGroups: declined,
+  notAcceptedOrDeclinedCookieGroups: undecided,
+}: RegisterEventsOptions): void => {
+
+  const acceptNode = cookieBarNode.querySelector<HTMLElement>(acceptSelector);
+  if (acceptNode) {
+    acceptNode.addEventListener('click', event => {
+      event.preventDefault();
+      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));
+      onAccept?.(acceptedGroups, event);
+      // trigger async action, but don't wait for completion
+      client.saveCookiesStatusBackend('acceptUrl');
+      cookieBarNode.parentNode!.removeChild(cookieBarNode);
+    });
+  }
+
+  const declineNode = cookieBarNode.querySelector<HTMLElement>(declineSelector);
+  if (declineNode) {
+    declineNode.addEventListener('click', event => {
+      event.preventDefault();
+      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));
+      onDecline?.(declinedGroups, event);
+      // trigger async action, but don't wait for completion
+      client.saveCookiesStatusBackend('declineUrl');
+      cookieBarNode.parentNode!.removeChild(cookieBarNode);
+    });
+  }
+};
+
+/**
+ * Filter the cookie groups down to a subset of specified varnames.
+ */
+const filterCookieGroups = (cookieGroups: CookieGroup[], varNames: string[]) => {
+  return cookieGroups.filter(group => varNames.includes(group.varname));
+};
+
+// See https://github.com/microsoft/TypeScript/issues/283
+function cloneNode<T extends Node>(node: T) {
+  return <T>node.cloneNode(true);
+}
+
+export const showCookieBar = async (options: Partial<Options> = {}): Promise<void> => {
+  const {
+    templateSelector = '#cookie-consent__cookie-bar',
+    cookieGroupsSelector = '#cookie-consent__cookie-groups',
+    acceptSelector = '.cookie-consent__accept',
+    declineSelector = '.cookie-consent__decline',
+    insertBefore = null,
+    onShow,
+    onAccept,
+    onDecline,
+    statusUrl = '',
+    csrfHeaderName = 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME
+  } = options;
+
+  const cookieGroups = loadCookieGroups(cookieGroupsSelector);
+
+  // no cookie groups -> abort, nothing to do
+  if (!cookieGroups.length) return;
+
+  const templateNode = document.querySelector<HTMLTemplateElement>(templateSelector);
+  if (!templateNode) {
+    throw new Error(`No (template) element found for selector '${templateSelector}'.`)
+  }
+
+  // insert before a given node, if specified, or append to the body as default behaviour
+  const doInsert = insertBefore === null
+    ? (cookieBarNode: Node) => document.querySelector('body')!.appendChild(cookieBarNode)
+    : typeof insertBefore === 'string'
+      ? (cookieBarNode: Node) => {
+        const referenceNode = document.querySelector<HTMLElement>(insertBefore);
+        if (referenceNode === null) throw new Error(`No element found for selector '${insertBefore}'.`)
+        doInsertBefore(referenceNode, cookieBarNode);
+      }
+      : (cookieBarNode: Node) => doInsertBefore(insertBefore, cookieBarNode)
+  ;
+
+  if (!statusUrl) throw new Error('Missing status URL option, did you forget to pass the `statusUrl` option?');
+
+  const client = new FetchClient(statusUrl, csrfHeaderName);
+  const cookieStatus = await client.getCookieStatus();
+
+  // calculate the cookie groups to invoke the callbacks. We deliberately fire those
+  // without awaiting so that our cookie bar is shown/hidden as soon as possible.
+  const {
+    acceptedCookieGroups,
+    declinedCookieGroups,
+    notAcceptedOrDeclinedCookieGroups
+  } = cookieStatus;
+
+  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);
+  if (acceptedGroups.length) onAccept?.(acceptedGroups);
+  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);
+  if (declinedGroups.length) onDecline?.(declinedGroups);
+
+  // there are no (more) cookie groups to accept, don't show the bar
+  if (!notAcceptedOrDeclinedCookieGroups.length) return;
+
+  // grab the contents from the template node and add them to the DOM, optionally
+  // calling the onShow callback
+  const childToClone = templateNode.content.firstElementChild;
+  if (childToClone === null) throw new Error('The cookie bar template element may not be empty.');
+  const cookieBarNode = cloneNode(childToClone);
+  registerEvents({
+    client,
+    cookieBarNode,
+    cookieGroups,
+    acceptSelector,
+    onAccept,
+    declineSelector,
+    onDecline,
+    acceptedCookieGroups,
+    declinedCookieGroups,
+    notAcceptedOrDeclinedCookieGroups,
+  });
+  doInsert(cookieBarNode);
+  onShow?.();
+};
diff --git a/js/src/index.ts b/js/src/index.ts
new file mode 100644
index 0000000..0b26cc6
--- /dev/null
+++ b/js/src/index.ts
@@ -0,0 +1 @@
+export {loadCookieGroups, showCookieBar} from './cookiebar.js';
diff --git a/js/tsconfig.json b/js/tsconfig.json
new file mode 100644
index 0000000..673c580
--- /dev/null
+++ b/js/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "target": "es2017",
+    "module": "esnext",
+    "outDir": "lib",
+    "declaration": true,
+    "noErrorTruncation": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictBindCallApply": true,
+    "strictNullChecks": true,
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "lib"],
+}