regulaforensics · ArtsiomTsybulko · Jan 21, 2026 · Jan 21, 2026
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@
 1. [Controller sample](#controller-sample)
 1. [UI-components sample](#ui-components-sample)
 1. [Switch to mobile sample](#switch-to-mobile-sample)
+1. [Manual multi-page sample](#manual-multi-page-sample)
 1. [CodePen samples](#codepen-samples)
 
 ---
@@ -122,6 +123,14 @@ The ```switch-to-mobile``` folder contains an example of using Document reader c
 
 Follow the steps as in [Webpack sample](#webpack-sample).
 
+## Manual multi-page sample
+
+The ```manual-multi-page``` folder contains an example of using Document reader component for manual control of document page scanning.
+
+### Example installation
+
+Follow the steps as in [Webpack sample](#webpack-sample).
+
 ## CodePen samples
 
 ### Camera snapshot component

diff --git a/manual-multi-page/backend-reprocessing/index.html b/manual-multi-page/backend-reprocessing/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My app</title>
+</head>
+<body>
+<div class="buttons">
+    <button class="button" id="new-document">Start new document</button>
+    <button class="button" id="new-page" disabled>Start new page</button>
+</div>
+<div class="info">Press "Start new document" to start scanning document.</div>
+<script type="module" src="/index.ts"></script>
+</body>
+</html>
diff --git a/manual-multi-page/backend-reprocessing/index.ts b/manual-multi-page/backend-reprocessing/index.ts
@@ -0,0 +1,106 @@
+import {
+    defineComponents,
+    DocumentReaderService,
+    InternalScenarios,
+    DocumentReaderWebComponent,
+    DocumentReaderDetailType,
+    TransactionEvent,
+    EventActions,
+    ResponseCode,
+} from '@regulaforensics/vp-frontend-document-components';
+import './styles.css';
+
+const newDocumentButton = document.querySelector('#new-document') as HTMLButtonElement;
+const nextPageButton = document.querySelector('#new-page') as HTMLButtonElement;
+const info = document.querySelector('.info') as HTMLDivElement;
+
+window.RegulaDocumentSDK = new DocumentReaderService();
+window.RegulaDocumentSDK.recognizerProcessParam = {
+    processParam: {
+        scenario: InternalScenarios.MrzAndLocate,
+        multipageProcessing: true,
+        backendProcessing: {
+            serviceURL: 'YOUR_SERVICE_URL',
+            httpHeaders: {  // you can set http headers if necessary
+                key1: 'header1',
+                key2: 'header2',
+                key3: 'header3'
+            }
+        },
+    },
+};
+window.RegulaDocumentSDK.imageProcessParam = {
+    processParam: {
+        scenario: InternalScenarios.MrzAndLocate,
+    },
+};
+
+defineComponents().then(() => window.RegulaDocumentSDK.initialize());
+// To use the document-reader component on test environments, you have to set the base64 license
+// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'YOUR_BASE64_LICENSE_KEY' }));
+
+function createDocumentReader() {
+    const documentReaderElement = document.createElement('document-reader') as DocumentReaderWebComponent;
+    const container = document.createElement('div');
+    documentReaderElement.setAttribute('new-layout', 'true');
+    container.setAttribute('class', 'reader-container');
+    container.append(documentReaderElement);
+
+    documentReaderElement.settings = {
+        uploadFileButton: false,
+        manualMultipageMode: true,
+    }
+
+    return container;
+}
+
+function documentReaderListener(data: CustomEvent<DocumentReaderDetailType | TransactionEvent>) {
+    const reader = document.querySelector('.reader-container');
+    const action = data.detail.action;
+
+    if (action === EventActions.PROCESS_FINISHED) {
+        const status = data.detail.data?.status;
+        const isFinishStatus = status === ResponseCode.OK || status === ResponseCode.TIMEOUT;
+        const responseData = data.detail.data;
+
+        if (isFinishStatus && responseData?.response) {
+            const isMorePagesAvailable = !!responseData.response.rawResponse.morePagesAvailable;
+
+            info.textContent = 'Check your result in the console. ';
+
+            if (isMorePagesAvailable) {
+                nextPageButton.disabled = false;
+                info.textContent += 'More pages are available, click "Start new page" ' +
+                    'to continue scanning, or start scanning a new document by clicking "Start new document".';
+            } else {
+                void window.RegulaDocumentSDK.finalizePackage();
+            }
+            console.log(responseData.response);
+
+            reader?.remove();
+        }
+    }
+    if (action === EventActions.CAMERA_PROCESS_CLOSED) reader?.remove();
+}
+
+function newDocumentButtonListener() {
+    if (!window.RegulaDocumentSDK) return;
+
+    info.textContent = '';
+    nextPageButton.disabled = true;
+    void window.RegulaDocumentSDK.createBackendTransaction();
+    document.body.append(createDocumentReader());
+}
+
+function nextPageButtonListener() {
+    if (!window.RegulaDocumentSDK) return;
+
+    info.textContent = '';
+    nextPageButton.disabled = true;
+    void window.RegulaDocumentSDK.startNewPage();
+    document.body.append(createDocumentReader());
+}
+
+newDocumentButton?.addEventListener('click', newDocumentButtonListener);
+nextPageButton?.addEventListener('click', nextPageButtonListener);
+document.body.addEventListener('document-reader', documentReaderListener);
diff --git a/manual-multi-page/backend-reprocessing/package.json b/manual-multi-page/backend-reprocessing/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "sample",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@regulaforensics/vp-frontend-document-components": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  }
+}
diff --git a/manual-multi-page/backend-reprocessing/styles.css b/manual-multi-page/backend-reprocessing/styles.css
@@ -0,0 +1,42 @@
+.reader-container {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+    column-gap: 15px;
+    padding-bottom: 20px;
+}
+
+.button {
+    padding: 8px 15px;
+    border: 1px solid black;
+    background: #fff;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 135%;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: .1s;
+}
+
+.button:hover:not(:disabled) {
+    background: #efefef;
+}
+
+.button:disabled {
+    cursor: not-allowed;
+    border: 1px solid lightgrey;
+}
+
+.info {
+    max-width: 600px;
+    text-align: center;
+    line-height: 24px;
+    margin: 0 auto;
+}
diff --git a/manual-multi-page/backend-reprocessing/tsconfig.json b/manual-multi-page/backend-reprocessing/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}
diff --git a/manual-multi-page/react/package.json b/manual-multi-page/react/package.json
@@ -7,8 +7,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@regulaforensics/ui-components": "nightly",
-    "@regulaforensics/vp-frontend-document-components": "nightly",
+    "@regulaforensics/ui-components": "*",
+    "@regulaforensics/vp-frontend-document-components": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

diff --git a/manual-multi-page/typescript/package.json b/manual-multi-page/typescript/package.json
@@ -7,7 +7,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@regulaforensics/vp-frontend-document-components": "nightly"
+    "@regulaforensics/vp-frontend-document-components": "*"
   },
   "devDependencies": {
     "typescript": "^5.9.3",