diff --git a/dev/js/src-lib/pageInfo/demo/index.html b/dev/js/src-lib/pageInfo/demo/index.html
new file mode 100644
index 0000000..011df9b
--- /dev/null
+++ b/dev/js/src-lib/pageInfo/demo/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>PageInfo Demo</title>
+</head>
+<body>
+  <main>
+    <h1>PageInfo Demo</h1>
+    <div id="pageinfo-demo"></div>
+  </main>
+
+  <script type="module" src="./pageInfodemo.js"></script>
+</body>
+</html>
diff --git a/dev/js/src-lib/pageInfo/demo/pageInfodemo.js b/dev/js/src-lib/pageInfo/demo/pageInfodemo.js
new file mode 100644
index 0000000..d329d41
--- /dev/null
+++ b/dev/js/src-lib/pageInfo/demo/pageInfodemo.js
@@ -0,0 +1,39 @@
+import PageInfo from '../pageInfo.js';
+import '../../../../scss/kalamar.scss';
+
+function mountPageInfoDemo() {
+  const host = document.getElementById('pageinfo-demo');
+  if (!host) {
+    return;
+  }
+
+  // Demo source element read by PageInfo
+  let pagination = document.getElementById('pagination');
+  if (!pagination) {
+    pagination = document.createElement('div');
+    pagination.setAttribute('id', 'pagination');
+    pagination.setAttribute('data-page', '3');
+    pagination.setAttribute('data-total', '30');
+    pagination.setAttribute('data-count', '25');
+    host.appendChild(pagination);
+  }
+
+  const pi = new PageInfo();
+
+  const out = document.createElement('pre');
+  out.textContent = [
+    'PageInfo demo',
+    '-------------',
+    'page: ' + pi.page(),
+    'total: ' + pi.total(),
+    'count: ' + pi.count()
+  ].join('\n');
+
+  host.appendChild(out);
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', mountPageInfoDemo);
+} else {
+  mountPageInfoDemo();
+}
diff --git a/dev/js/src-lib/pageInfo/package.json b/dev/js/src-lib/pageInfo/package.json
new file mode 100644
index 0000000..186a704
--- /dev/null
+++ b/dev/js/src-lib/pageInfo/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "kalamar-pageInfo",
+  "version": "0.0.1",
+  "description": "PageInfo for Kalmar",
+  "main": "pageInfo.js",
+  "scripts": {
+    "dev": "vite --open /demo/index.html"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/dev/js/src-lib/pageInfo/pageInfo.js b/dev/js/src-lib/pageInfo/pageInfo.js
new file mode 100644
index 0000000..79685ce
--- /dev/null
+++ b/dev/js/src-lib/pageInfo/pageInfo.js
@@ -0,0 +1,18 @@
+export default class PageInfo {
+  constructor() {
+    const p = document.getElementById('pagination');
+    this.ds = p ? p.dataset : {};
+  }
+
+  page() {
+    return parseInt(this.ds["page"] || 0);
+  }
+
+  total() {
+    return parseInt(this.ds["total"] || 0);
+  }
+
+  count() {
+    return parseInt(this.ds["count"] || 0);
+  }
+}
diff --git a/dev/js/src-lib/pageInfo/test/pageInfoSpec.js b/dev/js/src-lib/pageInfo/test/pageInfoSpec.js
new file mode 100644
index 0000000..1f5b462
--- /dev/null
+++ b/dev/js/src-lib/pageInfo/test/pageInfoSpec.js
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import pageInfoClass from '../pageInfo.js';
+
+  describe('KorAP.PageInfo', function () {
+    it('should be initializable', function () {
+      let pi = new pageInfoClass();
+      expect(pi.total()).toEqual(0);
+      expect(pi.count()).toEqual(0);
+      expect(pi.page()).toEqual(0);
+    });
+
+    it('should be read the correct values', function () {
+
+      // Create pagination element for pagination information
+      let p = document.createElement('div');
+      p.setAttribute('id', 'pagination')
+      p.setAttribute('data-page',3);
+      p.setAttribute('data-total',30);
+      p.setAttribute('data-count',25);
+
+      document.body.appendChild(p);
+      
+      let pi = new pageInfoClass();
+      expect(pi.total()).toEqual(30);
+      expect(pi.count()).toEqual(25);
+      expect(pi.page()).toEqual(3);
+
+      // Recreate initial state
+      document.body.removeChild(p);
+    });
+  });
diff --git a/dev/js/src-lib/pageInfo/vite.config.js b/dev/js/src-lib/pageInfo/vite.config.js
new file mode 100644
index 0000000..5ba5801
--- /dev/null
+++ b/dev/js/src-lib/pageInfo/vite.config.js
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+const scssDir = path.resolve(__dirname, '../../../scss'); // Path to your SCSS directory
+
+export default defineConfig({
+
+  server: {
+    fs: {
+      allow: [
+        scssDir,
+        __dirname
+      ]
+    },
+    port: 3000
+  },
+
+ 
+  css: {
+    preprocessorOptions: {
+      scss: {
+        loadPaths: [scssDir]
+      }
+    }
+  }
+});
+