diff --git a/README.md b/README.md
index b8d8aaed..68dacb7a 100644
--- a/README.md
+++ b/README.md
@@ -174,6 +174,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 - [scan-1D-Industrial/](./scenarios/scan-1D-Industrial/) — 1D industrial barcode tuning example.
 - [scan-from-distance/](./scenarios/scan-from-distance/) — Demo for scanning barcodes from a distance (zoom/ROI tuning).
 - [locate-an-item-with-barcode/](./scenarios/locate-an-item-with-barcode/) — UI to help locate items with barcodes in a list or layout.
+- [grid-barcode-reading/](./scenarios/grid-barcode-reading/) — Scan a grid of DataMatrix / QR codes from an uploaded image with fast scan, layout analysis, and deep decode.
 - [debug/](./scenarios/debug/) — Debug utilities and a small server (frame collector) used for testing and troubleshooting.
 
 ### Official Online Demo
diff --git a/index.html b/index.html
index 333bdc73..92143312 100644
--- a/index.html
+++ b/index.html
@@ -1071,7 +1071,7 @@ <h3>
       <!-- Scenario Samples -->
       <div class="file">
         <h3>
-          Scenario Samples <span class="sample-count">(18)</span>
+          Scenario Samples <span class="sample-count">(19)</span>
           <a
             class="button title readme-link section-readme-link"
             href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/scenarios/README.md"
@@ -1229,6 +1229,15 @@ <h3>
               >Source</a
             >
           </div>
+          <div class="file">
+            <a class="button title demo-link" href="scenarios/grid-barcode-reading/index.html" title="View live demo">Grid Barcode Reading</a>
+            <a
+              class="button title source-link"
+              href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/grid-barcode-reading"
+              title="View source code on GitHub"
+              >Source</a
+            >
+          </div>
         </div>
 
         <div class="file">Data Parsing</div>
diff --git a/scenarios/README.md b/scenarios/README.md
index 35e6ce6e..048ab472 100644
--- a/scenarios/README.md
+++ b/scenarios/README.md
@@ -22,6 +22,7 @@ Included samples
 - [scan-1D-Industrial/](./scan-1D-Industrial/) — 1D industrial barcode tuning example.
 - [scan-from-distance/](./scan-from-distance/) — Demo for scanning barcodes from a distance (zoom/ROI tuning).
 - [locate-an-item-with-barcode/](./locate-an-item-with-barcode/) — UI to help locate items with barcodes in a list or layout.
+- [grid-barcode-reading/](./grid-barcode-reading/) — Scan a grid of DataMatrix / QR codes from an uploaded image with fast scan, layout analysis, and deep decode.
 - [debug/](./debug/) — Debug utilities and a small server (frame collector) used for testing and troubleshooting.
 
 >[!NOTE]
diff --git a/scenarios/grid-barcode-reading/GridDeepDecode.json b/scenarios/grid-barcode-reading/GridDeepDecode.json
new file mode 100644
index 00000000..e2cc067b
--- /dev/null
+++ b/scenarios/grid-barcode-reading/GridDeepDecode.json
@@ -0,0 +1,150 @@
+{
+    "BarcodeFormatSpecificationOptions": [
+        {
+            "BarcodeFormatIds": [
+                "BF_DATAMATRIX", "BF_QR_CODE"
+            ],
+            "MirrorMode": "MM_BOTH",
+            "Name": "bfs1"
+        }
+    ],
+    "BarcodeReaderTaskSettingOptions": [
+        {
+            "BarcodeFormatIds": [
+                "BF_DATAMATRIX", "BF_QR_CODE"
+            ],
+            "BarcodeFormatSpecificationNameArray": [
+                "bfs1"
+            ],
+            "ExpectedBarcodesCount": 1,
+            "MaxThreadsInOneTask": 0,
+            "Name": "task-read-barcodes",
+            "SectionArray": [
+                {
+                    "ImageParameterName": "ip-read-barcodes",
+                    "Section": "ST_BARCODE_LOCALIZATION",
+                    "StageArray": [
+                        {
+                            "Stage": "SST_LOCALIZE_CANDIDATE_BARCODES",
+                            "LocalizationModes": [
+                                {
+                                    "Mode": "LM_CONNECTED_BLOCKS"
+                                },
+                                {
+                                    "Mode": "LM_STATISTICS"
+                                },
+                                {
+                                    "Mode": "LM_LINES"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "ImageParameterName": "ip-read-barcodes",
+                    "Section": "ST_BARCODE_DECODING",
+                    "StageArray" : 
+                    [
+                        {
+                            "Stage" : "SST_RESIST_DEFORMATION"
+                        },
+                        {
+                            "Stage" : "SST_COMPLEMENT_BARCODE"
+                        },
+                        {
+                            "Stage" : "SST_SCALE_BARCODE_IMAGE"
+                        },
+                        {
+                            "Stage" : "SST_DECODE_BARCODES",
+                            "DeblurModes": [
+                                {
+                                    "Mode": "DM_BASED_ON_LOC_BIN"
+                                },
+                                {
+                                    "Mode": "DM_THRESHOLD_BINARIZATION" 
+                                },
+                                {
+                                    "Mode": "DM_DIRECT_BINARIZATION"
+                                },
+                                {
+                                    "Mode": "DM_NEURAL_NETWORK" 
+                                },
+                                {
+                                    "Mode": "DM_DEEP_ANALYSIS"
+                                },
+                                {
+                                    "Mode": "DM_SMOOTHING" 
+                                },
+                                {
+                                    "Mode": "DM_GRAY_EQUALIZATION"
+                                },
+                                {
+                                    "Mode": "DM_MORPHING" 
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "CaptureVisionTemplates": [
+        {
+            "ImageROIProcessingNameArray": [
+                "roi-read-barcodes"
+            ],
+            "Name": "GridDeepDecode",
+            "Timeout": 5000
+        }
+    ],
+    "ImageParameterOptions": [
+        {
+            "ApplicableStages": [
+                {
+                    "GrayscaleTransformationModes": [
+                        {
+                            "Mode": "GTM_ORIGINAL"
+                        },
+                        {
+                            "Mode": "GTM_INVERTED"
+                        }
+                    ],
+                    "Stage": "SST_TRANSFORM_GRAYSCALE"
+                },
+                {
+                    "GrayscaleEnhancementModes": [
+                        {
+                            "Mode": "GEM_GENERAL"
+                        },
+                        {
+                            "Mode": "GEM_GRAY_SMOOTH"
+                        }
+                    ],
+                    "Stage": "SST_ENHANCE_GRAYSCALE"
+                },
+                {
+                    "BinarizationModes": [
+                        {
+                            "BlockSizeX": 0,
+                            "BlockSizeY": 0,
+                            "EnableFillBinaryVacancy": 0,
+                            "ThresholdCompensation": 10,
+                            "Mode": "BM_LOCAL_BLOCK"
+                        }
+                    ],
+                    "Stage": "SST_BINARIZE_IMAGE"
+                }
+            ],
+            "Name": "ip-read-barcodes"
+        }
+    ],
+    "TargetROIDefOptions": [
+        {
+            "Name": "roi-read-barcodes",
+            "TaskSettingNameArray": [
+                "task-read-barcodes"
+            ]
+        }
+    ],
+    "Version": "5.3"
+}
\ No newline at end of file
diff --git a/scenarios/grid-barcode-reading/GridFastScan.json b/scenarios/grid-barcode-reading/GridFastScan.json
new file mode 100644
index 00000000..c5f99f37
--- /dev/null
+++ b/scenarios/grid-barcode-reading/GridFastScan.json
@@ -0,0 +1,101 @@
+{
+    "BarcodeFormatSpecificationOptions": [
+        {
+            "BarcodeFormatIds": [
+                "BF_DATAMATRIX", "BF_QR_CODE"
+            ],
+            "MirrorMode": "MM_BOTH",
+            "Name": "bfs1"
+        }
+    ],
+    "BarcodeReaderTaskSettingOptions": [
+        {
+            "BarcodeFormatIds": [
+                "BF_DATAMATRIX", "BF_QR_CODE"
+            ],
+            "BarcodeFormatSpecificationNameArray": [
+                "bfs1"
+            ],
+            "ExpectedBarcodesCount": 0,
+            "MaxThreadsInOneTask": 0,
+            "Name": "task-read-barcodes",
+            "SectionArray": [
+                {
+                    "ImageParameterName": "ip-read-barcodes",
+                    "Section": "ST_BARCODE_LOCALIZATION",
+                    "StageArray": [
+                        {
+                            "Stage": "SST_LOCALIZE_CANDIDATE_BARCODES",
+                            "LocalizationModes": [
+                                {
+                                    "Mode": "LM_CONNECTED_BLOCKS"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "ImageParameterName": "ip-read-barcodes",
+                    "Section": "ST_BARCODE_DECODING"
+                }
+            ]
+        }
+    ],
+    "CaptureVisionTemplates": [
+        {
+            "ImageROIProcessingNameArray": [
+                "roi-read-barcodes"
+            ],
+            "Name": "GridFastScan",
+            "Timeout": 10000,
+            "MaxParallelTasks": 4
+        }
+    ],
+    "ImageParameterOptions": [
+        {
+            "ApplicableStages": [
+                {
+                    "Stage": "SST_SCALE_IMAGE",
+                    "ImageScaleSetting":{
+                        "ScaleType": "ST_SCALE_DOWN",
+                        "ReferenceEdge": "RE_SHORTER_EDGE",
+                        "EdgeLengthThreshold": 4000
+                    }
+                },
+                {
+                    "GrayscaleTransformationModes": [
+                        {
+                            "Mode": "GTM_ORIGINAL"
+                        },
+                        {
+                            "Mode": "GTM_INVERTED"
+                        }
+                    ],
+                    "Stage": "SST_TRANSFORM_GRAYSCALE"
+                },
+                {
+                    "BinarizationModes": [
+                        {
+                            "BlockSizeX": 31,
+                            "BlockSizeY": 31,
+                            "EnableFillBinaryVacancy": 0,
+                            "ThresholdCompensation": 10,
+                            "Mode": "BM_LOCAL_BLOCK"
+                        }
+                    ],
+                    "Stage": "SST_BINARIZE_IMAGE"
+                }
+            ],
+            "Name": "ip-read-barcodes"
+        }
+    ],
+    "TargetROIDefOptions": [
+        {
+            "Name": "roi-read-barcodes",
+            "TaskSettingNameArray": [
+                "task-read-barcodes"
+            ]
+        }
+    ],
+    "Version": "5.3"
+}
\ No newline at end of file
diff --git a/scenarios/grid-barcode-reading/README.md b/scenarios/grid-barcode-reading/README.md
new file mode 100644
index 00000000..ad2f4d66
--- /dev/null
+++ b/scenarios/grid-barcode-reading/README.md
@@ -0,0 +1,44 @@
+# 📊 Grid Barcode Reading
+
+A demo that scans a grid of DataMatrix / QR codes from an uploaded image. The scanner performs a fast scan, layout analysis, and deep decode to read every cell in the grid using the Dynamsoft Barcode Reader (JavaScript edition).
+
+## Included files
+
+- `index.html` — demo page (image upload + grid scanning UI).  
+- `GridFastScan.json` — configuration for the initial fast scan pass.  
+- `GridDeepDecode.json` — configuration for the deep decode pass on missed cells.  
+- `sample_grid.png` — example grid image for testing.  
+
+## ✨ Features
+
+- Image-based grid scanning (upload an image containing a grid of DataMatrix / QR codes)  
+- Three-phase pipeline: fast scan → layout analysis → deep decode  
+- Visual grid result table showing decoded text, status, and location for each cell  
+- Statistics display (total cells, decoded count, success rate)  
+
+## 🔧 How it works
+
+- **Phase 1 – Fast Scan**: The uploaded image is processed with `GridFastScan` settings to quickly decode as many barcodes as possible.  
+- **Phase 2 – Layout Analysis**: A layout engine identifies the grid structure and maps decoded texts to their row/column positions.  
+- **Phase 3 – Deep Decode**: Cells that failed in the fast scan are individually re-processed using `GridDeepDecode` settings with more aggressive decoding modes (deblur, morphing, neural network, etc.).  
+- Results are rendered as an interactive grid table with color-coded status indicators.
+
+## Quick start
+
+Opening HTML files directly may not work as expected. Instead, run a local development server. Here's a quick method using [Visual Studio Code](https://code.visualstudio.com/):
+
+1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
+
+2. Right-click on `index.html` and select "Open with Five Server".
+
+## 💡 Tips
+
+- Use high-resolution images for better grid detection accuracy.  
+- The sample image `sample_grid.png` can be used for quick testing.  
+- Adjust the JSON configurations to tune the balance between speed and accuracy.
+
+## 📌 Notes
+
+- Serve on localhost/HTTPS to avoid browser restrictions.  
+- This demo processes static images (no camera required).  
+- Replace the included demo/trial license with a valid Dynamsoft license for extended evaluation.
diff --git a/scenarios/grid-barcode-reading/index.html b/scenarios/grid-barcode-reading/index.html
new file mode 100644
index 00000000..ce4c55bb
--- /dev/null
+++ b/scenarios/grid-barcode-reading/index.html
@@ -0,0 +1,965 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dynamsoft DataMatrix Grid Scanner</title>
+    <script src="../dcv-bundle/dist/dcv.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.3000/dist/dbr.bundle.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: #f0f2f5;
+        color: #333;
+        min-height: 100vh;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 24px 20px;
+      }
+
+      .page-header {
+        margin-bottom: 24px;
+      }
+      .page-header h1 {
+        font-size: 22px;
+        font-weight: 600;
+        color: #1a1a2e;
+        margin-bottom: 6px;
+      }
+      .page-header p {
+        color: #666;
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      /* Upload */
+      .upload-section {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 20px;
+        background: white;
+        border-radius: 8px;
+        padding: 16px 20px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+      }
+      .upload-btn {
+        display: inline-block;
+        padding: 9px 20px;
+        background: #fe8e14;
+        color: white;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        white-space: nowrap;
+        transition: background 0.15s;
+        user-select: none;
+      }
+      .upload-btn:hover {
+        background: #e07a10;
+      }
+      #imageInput {
+        display: none;
+      }
+      #fileName {
+        color: #888;
+        font-size: 14px;
+      }
+
+      /* Phases */
+      .phases {
+        display: flex;
+        background: white;
+        border-radius: 8px;
+        padding: 16px 20px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+        margin-bottom: 20px;
+        gap: 4px;
+      }
+      .phase {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        position: relative;
+        padding: 0 8px;
+      }
+      .phase:not(:last-child)::after {
+        content: "›";
+        position: absolute;
+        right: -6px;
+        top: 10px;
+        color: #ccc;
+        font-size: 18px;
+        font-weight: 300;
+      }
+      .phase-icon {
+        font-size: 22px;
+        line-height: 1;
+      }
+      .phase-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: #555;
+        text-align: center;
+      }
+      .phase-sublabel {
+        font-size: 11px;
+        color: #999;
+        text-align: center;
+        min-height: 14px;
+      }
+
+      .phase-pending .phase-icon::before {
+        content: "○";
+        color: #ccc;
+      }
+      .phase-running .phase-icon::before {
+        content: "⏳";
+      }
+      .phase-done .phase-icon::before {
+        content: "✅";
+      }
+      .phase-error .phase-icon::before {
+        content: "❌";
+      }
+
+      /* Progress strip */
+      .progress-strip {
+        display: none;
+        align-items: center;
+        gap: 14px;
+        background: white;
+        border-radius: 8px;
+        padding: 10px 20px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+        margin-bottom: 8px;
+      }
+      .progress-strip.active {
+        display: flex;
+      }
+      .progress-track {
+        flex: 1;
+        height: 6px;
+        background: #e9ecef;
+        border-radius: 3px;
+        overflow: hidden;
+        position: relative;
+      }
+      .progress-fill {
+        height: 100%;
+        width: 0%;
+        background: linear-gradient(90deg, #fe8e14, #ffb347);
+        border-radius: 3px;
+        transition: width 0.3s ease;
+        position: relative;
+      }
+      .progress-fill.animating::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
+        animation: shimmer 1.5s infinite;
+      }
+      @keyframes shimmer {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+      .progress-strip.done .progress-fill {
+        background: linear-gradient(90deg, #28a745, #5bd778);
+      }
+      .progress-strip.error .progress-fill {
+        background: linear-gradient(90deg, #dc3545, #e8606d);
+      }
+      .progress-elapsed {
+        font-size: 13px;
+        font-variant-numeric: tabular-nums;
+        color: #888;
+        white-space: nowrap;
+        min-width: 48px;
+        text-align: right;
+      }
+
+      /* Canvas area */
+      .canvas-wrapper {
+        background: white;
+        border-radius: 8px;
+        padding: 16px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+        margin-bottom: 20px;
+        overflow: auto;
+        text-align: center;
+        min-height: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .canvas-placeholder {
+        color: #bbb;
+        font-size: 14px;
+      }
+      #canvas {
+        max-width: 100%;
+        border: 1px solid #eee;
+        display: none;
+      }
+
+      /* Log */
+      #logSection {
+        background: #0f1117;
+        color: #8be08b;
+        border-radius: 8px;
+        padding: 14px 16px;
+        margin-bottom: 20px;
+        max-height: 180px;
+        overflow-y: auto;
+        font-family: "Courier New", monospace;
+        font-size: 13px;
+        display: none;
+      }
+      .log-entry {
+        margin-bottom: 3px;
+        line-height: 1.4;
+      }
+      .log-entry.log-result {
+        color: #fff;
+        font-weight: 700;
+        background: rgba(91, 187, 255, 0.15);
+        border-left: 3px solid #5bf;
+        padding: 3px 8px;
+        margin-left: -8px;
+        margin-right: -8px;
+        border-radius: 0 4px 4px 0;
+      }
+
+      /* Results */
+      #resultsSection {
+        background: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+        display: none;
+      }
+      #resultsSection h2 {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: #1a1a2e;
+      }
+      .summary-stats {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 20px;
+      }
+      .stat {
+        flex: 1;
+        background: #f8f9fa;
+        border-radius: 6px;
+        padding: 14px 10px;
+        text-align: center;
+      }
+      .stat-value {
+        display: block;
+        font-size: 28px;
+        font-weight: 700;
+        color: #1a1a2e;
+        line-height: 1;
+        margin-bottom: 4px;
+      }
+      .stat-label {
+        font-size: 12px;
+        color: #888;
+      }
+      .stat.decoded .stat-value {
+        color: #28a745;
+      }
+      .stat.failed .stat-value {
+        color: #dc3545;
+      }
+
+      .results-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      .results-table th {
+        background: #f8f9fa;
+        padding: 9px 14px;
+        text-align: left;
+        border-bottom: 2px solid #e9ecef;
+        font-weight: 600;
+        font-size: 12px;
+        text-transform: uppercase;
+        color: #555;
+        letter-spacing: 0.5px;
+      }
+      .results-table td {
+        padding: 7px 14px;
+        border-bottom: 1px solid #f0f0f0;
+        vertical-align: middle;
+      }
+      .results-table tr:last-child td {
+        border-bottom: none;
+      }
+      .results-table tr:hover td {
+        background: #fafafa;
+      }
+      .status-decoded {
+        color: #28a745;
+        font-weight: 600;
+      }
+      .status-deep-decoded {
+        color: #3399ff;
+        font-weight: 600;
+      }
+      .status-failed {
+        color: #dc3545;
+        font-weight: 600;
+      }
+      .text-cell {
+        font-family: "Courier New", monospace;
+        font-size: 12px;
+        max-width: 400px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .cell-num {
+        color: #888;
+        font-variant-numeric: tabular-nums;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="page-header">
+        <h1>DataMatrix Grid Scanner</h1>
+        <p>
+          Upload an image to scan a grid of DataMatrix barcodes. The scanner performs fast scan, layout analysis, and deep decode to read
+          every cell in the grid.
+        </p>
+      </div>
+
+      <div class="upload-section" id="uploadSection">
+        <label for="imageInput" class="upload-btn">Choose Image</label>
+        <input type="file" id="imageInput" accept="image/*" />
+        <span id="fileName">No file selected</span>
+      </div>
+
+      <div class="progress-strip" id="progressStrip">
+        <div class="progress-track">
+          <div class="progress-fill animating" id="progressFill"></div>
+        </div>
+        <span class="progress-elapsed" id="progressElapsed">0.0s</span>
+      </div>
+
+      <div class="phases">
+        <div class="phase phase-pending" id="phase1">
+          <span class="phase-icon"></span>
+          <span class="phase-label">Fast Scan</span>
+          <span class="phase-sublabel" id="phase1-sub"></span>
+        </div>
+        <div class="phase phase-pending" id="phase2">
+          <span class="phase-icon"></span>
+          <span class="phase-label">Layout Analysis</span>
+          <span class="phase-sublabel" id="phase2-sub"></span>
+        </div>
+        <div class="phase phase-pending" id="phase3">
+          <span class="phase-icon"></span>
+          <span class="phase-label">Deep Decode</span>
+          <span class="phase-sublabel" id="phase3-sub"></span>
+        </div>
+        <div class="phase phase-pending" id="phase4">
+          <span class="phase-icon"></span>
+          <span class="phase-label">Final Result</span>
+          <span class="phase-sublabel" id="phase4-sub"></span>
+        </div>
+      </div>
+
+      <div id="logSection"></div>
+
+      <div class="canvas-wrapper" id="canvasWrapper">
+        <span class="canvas-placeholder">Image preview will appear here after uploading</span>
+        <canvas id="canvas"></canvas>
+      </div>
+
+      <div id="resultsSection">
+        <h2>Results</h2>
+        <div class="summary-stats" id="resultsSummary"></div>
+        <div style="overflow-x: auto">
+          <table class="results-table">
+            <thead>
+              <tr>
+                <th>Row</th>
+                <th>Col</th>
+                <th>Status</th>
+                <th>Text</th>
+              </tr>
+            </thead>
+            <tbody id="resultsBody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // ─── SDK configuration ────────────────────────────────────────────────
+      let sdkReady = false;
+      const sdkReadyPromise = (async () => {
+        Dynamsoft.License.LicenseManager.initLicense("");
+        // Force a non-pthread wasm variant for local static servers (e.g. Five Server)
+        // to avoid worker startup failures related to SharedArrayBuffer isolation.
+        Dynamsoft.Core.CoreModule.wasmLoadOptions = {
+          wasmType: "ml-simd",
+        };
+
+        Dynamsoft.Core.CoreModule.engineResourcePaths = {
+          //dcvBundle: "../dcv-bundle/dist/",
+          dcvData: "../data/",
+          //dcvData: 'https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-capture-vision-data@1.2.2-dev-20260528161158/',
+        };
+
+        try {
+          await Dynamsoft.Core.CoreModule.loadWasm();
+          sdkReady = true;
+          log("[Init] WASM preloaded.");
+        } catch (e) {
+          console.error("[Init] Failed to preload WASM:", e);
+          throw e;
+        }
+      })();
+      // ─── Constants ────────────────────────────────────────────────────────
+      const FAST_TEMPLATE = "GridFastScan";
+      const DEEP_TEMPLATE = "GridDeepDecode";
+      const SCALE_FACTOR = 2.0;
+
+      // ─── Geometry helpers ─────────────────────────────────────────────────
+      function computeCenter(quad) {
+        const cx = quad.points.reduce((s, p) => s + p.x, 0) / 4;
+        const cy = quad.points.reduce((s, p) => s + p.y, 0) / 4;
+        return { cx, cy };
+      }
+
+      function expandQuad(quad, scale) {
+        const { cx, cy } = computeCenter(quad);
+        return {
+          points: quad.points.map((p) => ({
+            x: Math.round(cx + (p.x - cx) * scale),
+            y: Math.round(cy + (p.y - cy) * scale),
+          })),
+        };
+      }
+
+      /**
+       * Produces a string key from a quad's corner coordinates so we can
+       * match LayoutAnalyzer LES_INPUT elements back to the decoded texts.
+       * Uses rounded integers to tolerate sub-pixel differences.
+       */
+      function quadKey(quad) {
+        return quad.points.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join("|");
+      }
+
+      // ─── Canvas drawing helpers ───────────────────────────────────────────
+      function drawImage(ctx, bitmap) {
+        ctx.drawImage(bitmap, 0, 0);
+      }
+
+      function drawSolidQuads(ctx, quads, color = "#00cc44", lineWidth = 2) {
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = lineWidth;
+        ctx.setLineDash([]);
+        for (const quad of quads) {
+          const pts = quad.points;
+          ctx.beginPath();
+          ctx.moveTo(pts[0].x, pts[0].y);
+          for (let i = 1; i < 4; i++) ctx.lineTo(pts[i].x, pts[i].y);
+          ctx.closePath();
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+
+      function drawDashedQuads(ctx, quads, color = "#ff3333", lineWidth = 3, dashLen = 10) {
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = lineWidth;
+        ctx.setLineDash([dashLen, dashLen]);
+        for (const quad of quads) {
+          const pts = quad.points;
+          ctx.beginPath();
+          ctx.moveTo(pts[0].x, pts[0].y);
+          for (let i = 1; i < 4; i++) ctx.lineTo(pts[i].x, pts[i].y);
+          ctx.closePath();
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+
+      function getTopLeft(quad) {
+        return {
+          x: Math.min(...quad.points.map((p) => p.x)),
+          y: Math.min(...quad.points.map((p) => p.y)),
+        };
+      }
+
+      function drawTexts(ctx, items, color = "#00ff55", fontSize = 11) {
+        ctx.save();
+        ctx.fillStyle = color;
+        ctx.font = `bold ${fontSize}px monospace`;
+        for (const item of items) {
+          if (!item.text) continue;
+          const { x, y } = getTopLeft(item.location);
+          ctx.fillText(item.text, x + 1, Math.max(y - 2, fontSize));
+        }
+        ctx.restore();
+      }
+
+      // ─── UI helpers ───────────────────────────────────────────────────────
+      function setPhaseStatus(num, status, subText = "") {
+        const el = document.getElementById(`phase${num}`);
+        if (!el) return;
+        el.className = `phase phase-${status}`;
+        const sub = document.getElementById(`phase${num}-sub`);
+        if (sub) sub.textContent = subText;
+      }
+
+      function log(msg, type) {
+        const logEl = document.getElementById("logSection");
+        logEl.style.display = "block";
+        const div = document.createElement("div");
+        div.className = "log-entry" + (type ? ` log-${type}` : "");
+        div.textContent = msg;
+        logEl.appendChild(div);
+        logEl.scrollTop = logEl.scrollHeight;
+      }
+
+      function escapeHtml(str) {
+        return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      }
+
+      function withTimeout(promise, timeoutMs, timeoutMessage) {
+        let timer = null;
+        const timeoutPromise = new Promise((_, reject) => {
+          timer = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
+        });
+        return Promise.race([promise, timeoutPromise]).finally(() => {
+          if (timer) clearTimeout(timer);
+        });
+      }
+
+      const AUTO_AXIS = { elementCount: -1, isStaggered: false, angle: -1, isEqualSpacing: false, spacing: -1, spacingUnit: 0 };
+
+      async function analyzeLayoutWithFallback(locations, width, height) {
+        return await withTimeout(
+          Dynamsoft.Utility.LayoutAnalyzer.analyze(locations, {
+            pattern: Dynamsoft.Utility.EnumLayoutPattern.LP_MATRIX,
+            axes: [AUTO_AXIS, AUTO_AXIS],
+            inputImageWidth: width,
+            inputImageHeight: height,
+          }),
+          60000,
+          "Phase 2 timeout on LP_MATRIX (60s)",
+        );
+      }
+
+      // ─── Progress bar helpers ─────────────────────────────────────────
+      let _progressTimer = null;
+      let _progressStart = 0;
+
+      function startProgress() {
+        const strip = document.getElementById("progressStrip");
+        const fill = document.getElementById("progressFill");
+        const elapsed = document.getElementById("progressElapsed");
+        strip.className = "progress-strip active";
+        fill.className = "progress-fill animating";
+        fill.style.width = "0%";
+        elapsed.textContent = "0.0s";
+        _progressStart = Date.now();
+        _progressTimer = setInterval(() => {
+          const s = ((Date.now() - _progressStart) / 1000).toFixed(1);
+          elapsed.textContent = `${s}s`;
+        }, 100);
+      }
+
+      function updateProgress(pct) {
+        document.getElementById("progressFill").style.width = `${Math.min(pct, 100)}%`;
+      }
+
+      function stopProgress(status = "done") {
+        if (_progressTimer) {
+          clearInterval(_progressTimer);
+          _progressTimer = null;
+        }
+        const strip = document.getElementById("progressStrip");
+        const fill = document.getElementById("progressFill");
+        const elapsed = document.getElementById("progressElapsed");
+        fill.classList.remove("animating");
+        fill.style.width = "100%";
+        strip.className = `progress-strip active ${status}`;
+        const s = ((Date.now() - _progressStart) / 1000).toFixed(1);
+        elapsed.textContent = `${s}s`;
+      }
+
+      // ─── Results rendering ────────────────────────────────────────────────
+      function renderResults(gridItems) {
+        let totalDecoded = 0,
+          totalFailed = 0,
+          totalCells = 0;
+        Object.values(gridItems).forEach((cols) =>
+          Object.values(cols).forEach((item) => {
+            totalCells++;
+            if (item.type === "decoded" || item.type === "deep-decoded") totalDecoded++;
+            else if (item.type === "failed") totalFailed++;
+          }),
+        );
+
+        document.getElementById("resultsSummary").innerHTML = `
+          <div class="stat decoded">
+            <span class="stat-value">${totalDecoded}</span>
+            <span class="stat-label">Decoded</span>
+          </div>
+          <div class="stat failed">
+            <span class="stat-value">${totalFailed}</span>
+            <span class="stat-label">Failed</span>
+          </div>
+          <div class="stat">
+            <span class="stat-value">${totalCells}</span>
+            <span class="stat-label">Total Cells</span>
+          </div>`;
+
+        const tbody = document.getElementById("resultsBody");
+        tbody.innerHTML = "";
+        Object.keys(gridItems)
+          .map(Number)
+          .sort((a, b) => a - b)
+          .forEach((ri) => {
+            Object.keys(gridItems[ri])
+              .map(Number)
+              .sort((a, b) => a - b)
+              .forEach((ci) => {
+                const item = gridItems[ri][ci];
+                const statusLabel = item.type === "decoded" ? "Decoded" : item.type === "deep-decoded" ? "Deep Decoded" : "Failed";
+                const tr = document.createElement("tr");
+                tr.innerHTML = `
+                  <td class="cell-num">${ri + 1}</td>
+                  <td class="cell-num">${ci + 1}</td>
+                  <td class="status-${item.type}">${statusLabel}</td>
+                  <td class="text-cell" title="${escapeHtml(item.text)}">${escapeHtml(item.text)}</td>`;
+                tbody.appendChild(tr);
+              });
+          });
+
+        const section = document.getElementById("resultsSection");
+        section.style.display = "block";
+        section.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+
+      // ─── Main processing pipeline ─────────────────────────────────────────
+      let cvRouter = null;
+      let isProcessing = false;
+
+      async function ensureRouter() {
+        if (!cvRouter) {
+          cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+        }
+        return cvRouter;
+      }
+
+      // Phase 1 – Fast Scan on a given source (File, Canvas, etc.)
+      async function runFastScan(source) {
+        await cvRouter.initSettings("./GridFastScan.json");
+        const t0 = Date.now();
+        const fastResult = await cvRouter.capture(source, FAST_TEMPLATE);
+        const elapsed = Date.now() - t0;
+        const barcodeItems = fastResult.decodedBarcodesResult?.barcodeResultItems ?? [];
+        const quadTextMap = new Map();
+        barcodeItems.forEach((item) => quadTextMap.set(quadKey(item.location), item.text));
+        const locations = barcodeItems.map((b) => b.location);
+        return { barcodeItems, quadTextMap, locations, elapsed };
+      }
+
+      // Phase 2 – Build gridItems from layout result + quadTextMap
+      function buildGridItems(layoutResult, quadTextMap) {
+        const LES = Dynamsoft.Utility.EnumLayoutElementSource;
+        const gridItems = {};
+        const elements = layoutResult.elements ?? [];
+        elements.forEach((row, ri) => {
+          row.forEach((el, ci) => {
+            if (el.source === LES.LES_INPUT) {
+              const text = quadTextMap.get(quadKey(el.quad)) ?? "";
+              (gridItems[ri] ??= {})[ci] = { location: el.quad, text, type: "decoded" };
+            } else if (el.source === LES.LES_INFERRED) {
+              (gridItems[ri] ??= {})[ci] = { location: el.quad, text: "", type: "inferred" };
+            }
+          });
+        });
+        return gridItems;
+      }
+
+      // Phase 3 – Deep Decode inferred cells
+      async function runDeepDecode(gridItems, source) {
+        await cvRouter.initSettings("./GridDeepDecode.json");
+        const tasks = [];
+        Object.entries(gridItems).forEach(([ri, cols]) =>
+          Object.entries(cols).forEach(([ci, item]) => {
+            if (item.type === "inferred") tasks.push({ ri: +ri, ci: +ci });
+          }),
+        );
+
+        let deepDecoded = 0;
+        const t0 = Date.now();
+
+        for (let i = 0; i < tasks.length; i++) {
+          const { ri, ci } = tasks[i];
+          setPhaseStatus(3, "running", `${i + 1} / ${tasks.length}`);
+          updateProgress(50 + ((i + 1) / tasks.length) * 40);
+
+          try {
+            const expandedQuad = expandQuad(gridItems[ri][ci].location, SCALE_FACTOR);
+            const simSettings = await cvRouter.getSimplifiedSettings(DEEP_TEMPLATE);
+            simSettings.roi = expandedQuad;
+            simSettings.roiMeasuredInPercentage = 0;
+            await cvRouter.updateSettings(DEEP_TEMPLATE, simSettings);
+
+            const deepResult = await cvRouter.capture(source, DEEP_TEMPLATE);
+            const deepBarcodes = deepResult.decodedBarcodesResult?.barcodeResultItems;
+
+            if (deepBarcodes?.length && deepBarcodes[0].text) {
+              gridItems[ri][ci] = {
+                location: deepBarcodes[0].location,
+                text: deepBarcodes[0].text,
+                type: "deep-decoded",
+              };
+              deepDecoded++;
+            } else {
+              gridItems[ri][ci].type = "failed";
+            }
+          } catch (e) {
+            console.error(`Deep decode [${ri},${ci}]:`, e);
+            gridItems[ri][ci].type = "failed";
+          }
+        }
+
+        const elapsed = Date.now() - t0;
+        return { deepDecoded, total: tasks.length, elapsed };
+      }
+
+      // Phase 4 – Draw final overlay with quads + text labels
+      function drawFinalOverlay(ctx, backgroundImage, gridItems) {
+        ctx.drawImage(backgroundImage, 0, 0);
+        const phase1Quads = [], deepQuads = [], failedQuads = [];
+        const phase1Items = [], deepItems = [];
+        Object.values(gridItems).forEach((cols) =>
+          Object.values(cols).forEach((item) => {
+            if (item.type === "decoded") {
+              phase1Quads.push(item.location);
+              phase1Items.push(item);
+            } else if (item.type === "deep-decoded") {
+              deepQuads.push(item.location);
+              deepItems.push(item);
+            } else {
+              failedQuads.push(expandQuad(item.location, SCALE_FACTOR));
+            }
+          }),
+        );
+        drawSolidQuads(ctx, phase1Quads);
+        drawSolidQuads(ctx, deepQuads, "#3399ff");
+        drawDashedQuads(ctx, failedQuads);
+        drawTexts(ctx, phase1Items);
+        drawTexts(ctx, deepItems, "#66bbff");
+        return { totalDecoded: phase1Items.length + deepItems.length, totalCells: phase1Items.length + deepItems.length + failedQuads.length };
+      }
+
+      async function processImage(file) {
+        if (isProcessing) return;
+        isProcessing = true;
+
+        // Reset UI
+        document.getElementById("logSection").innerHTML = "";
+        document.getElementById("resultsSection").style.display = "none";
+        for (let i = 1; i <= 4; i++) setPhaseStatus(i, "pending");
+        startProgress();
+        log(`Processing ${file.name}...`);
+
+        const canvas = document.getElementById("canvas");
+        const placeholder = document.querySelector(".canvas-placeholder");
+
+        try {
+          if (!sdkReady) {
+            log("[Init] Waiting for SDK/WASM preload...");
+            await sdkReadyPromise;
+          }
+
+          // Validate image format
+          const supportedTypes = ["image/png", "image/jpeg", "image/bmp", "image/gif", "image/webp"];
+          if (!supportedTypes.includes(file.type)) {
+            log(`Unsupported file type: "${file.type || file.name.split(".").pop()}". Please use PNG, JPEG, BMP, GIF, or WebP.`);
+            stopProgress("error");
+            return;
+          }
+
+          // Load image into canvas
+          const bitmap = await createImageBitmap(file);
+          const { width, height } = bitmap;
+          canvas.width = width;
+          canvas.height = height;
+          canvas.style.display = "block";
+          if (placeholder) placeholder.style.display = "none";
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(bitmap, 0, 0);
+
+          await ensureRouter();
+
+          // ══════════════════════════════════════════════
+          // Phase 1 – Fast Scan
+          // ══════════════════════════════════════════════
+          setPhaseStatus(1, "running");
+          const { barcodeItems, quadTextMap, locations, elapsed: elapsed1 } = await runFastScan(file);
+          log(`[Phase 1] Fast scan: ${barcodeItems.length} barcodes decoded in ${elapsed1}ms.`, "result");
+          setPhaseStatus(1, "done", `${barcodeItems.length} barcodes`);
+          updateProgress(25);
+
+          // Draw phase 1 overlay
+          ctx.drawImage(bitmap, 0, 0);
+          drawSolidQuads(ctx, barcodeItems.map((b) => b.location));
+
+          if (barcodeItems.length === 0) {
+            log("No barcodes found in the image. Please check the image and try again.");
+            setPhaseStatus(2, "error");
+            setPhaseStatus(3, "error");
+            setPhaseStatus(4, "error");
+            stopProgress("error");
+            return;
+          }
+
+          log(`[Phase 2] Input quads: ${locations.length}`);
+
+          // ══════════════════════════════════════════════
+          // Phase 2 – Layout Analysis
+          // ══════════════════════════════════════════════
+          setPhaseStatus(2, "running");
+          log("[Phase 2] Running layout analysis...");
+          let gridItems = {};
+          let skippedDeepDecode = false;
+
+          try {
+            const layoutResult = await analyzeLayoutWithFallback(locations, width, height);
+            console.log("Layout analysis result:", layoutResult);
+
+            const layoutErrCode = layoutResult.errorInfo?.errorCode ?? layoutResult.errorCode ?? 0;
+            if (layoutErrCode === 0) {
+              const { rowCount, colCount, inferredQuads } = layoutResult;
+              const inferredCount = (inferredQuads ?? []).length;
+              log(`[Phase 2] Layout: ${rowCount}×${colCount} grid, ${inferredCount} inferred cells.`, "result");
+              setPhaseStatus(2, "done", `${rowCount}×${colCount}`);
+              gridItems = buildGridItems(layoutResult, quadTextMap);
+            } else {
+              log(`[Phase 2] Layout analysis returned error code ${layoutErrCode}. Falling back to Phase 1 results.`);
+              setPhaseStatus(2, "done", "n/a — fallback");
+            }
+          } catch (layoutErr) {
+            log(`[Phase 2] Layout analysis threw: ${layoutErr.message ?? layoutErr}. Falling back to Phase 1 results.`);
+            setPhaseStatus(2, "done", "n/a — fallback");
+          }
+
+          // Fallback: if layout produced no grid items, build a flat list from Phase 1
+          if (Object.keys(gridItems).length === 0) {
+            log("[Phase 2] No grid cells from layout — using Phase 1 barcode list instead.");
+            gridItems = { 0: {} };
+            barcodeItems.forEach((item, idx) => {
+              gridItems[0][idx] = { location: item.location, text: item.text, type: "decoded" };
+            });
+            updateProgress(50);
+            skippedDeepDecode = true;
+          }
+
+          // Draw phase 2 overlay
+          ctx.drawImage(bitmap, 0, 0);
+          const decoded2 = [], inferred2 = [];
+          Object.values(gridItems).forEach((cols) =>
+            Object.values(cols).forEach((item) => {
+              if (item.type === "decoded") decoded2.push(item.location);
+              else inferred2.push(item.location);
+            }),
+          );
+          drawSolidQuads(ctx, decoded2);
+          drawDashedQuads(ctx, inferred2);
+          updateProgress(50);
+
+          // ══════════════════════════════════════════════
+          // Phase 3 – Deep Decode (inferred cells)
+          // ══════════════════════════════════════════════
+          if (skippedDeepDecode) {
+            log("[Phase 3] Skipped: all cells already decoded in Phase 1.", "result");
+            setPhaseStatus(3, "done", "0 inferred");
+          } else {
+            setPhaseStatus(3, "running");
+            const { deepDecoded, total: inferredTotal, elapsed: elapsed3 } = await runDeepDecode(gridItems, file);
+            log(`[Phase 3] Deep decode: ${deepDecoded} / ${inferredTotal} inferred cells decoded in ${elapsed3}ms.`, "result");
+            setPhaseStatus(3, "done", `+${deepDecoded} decoded`);
+          }
+
+          // Draw phase 3 overlay
+          ctx.drawImage(bitmap, 0, 0);
+          const phase1Quads3 = [], deepQuads3 = [], failed3 = [];
+          Object.values(gridItems).forEach((cols) =>
+            Object.values(cols).forEach((item) => {
+              if (item.type === "decoded") phase1Quads3.push(item.location);
+              else if (item.type === "deep-decoded") deepQuads3.push(item.location);
+              else failed3.push(expandQuad(item.location, SCALE_FACTOR));
+            }),
+          );
+          drawSolidQuads(ctx, phase1Quads3);
+          drawSolidQuads(ctx, deepQuads3, "#3399ff");
+          drawDashedQuads(ctx, failed3);
+
+          // ══════════════════════════════════════════════
+          // Phase 4 – Final Result
+          // ══════════════════════════════════════════════
+          setPhaseStatus(4, "running");
+          const { totalDecoded, totalCells } = drawFinalOverlay(ctx, bitmap, gridItems);
+          log(`[Done] ${totalDecoded} / ${totalCells} cells decoded successfully.`, "result");
+          setPhaseStatus(4, "done", `${totalDecoded}/${totalCells} cells`);
+          stopProgress("done");
+
+          renderResults(gridItems);
+        } catch (err) {
+          log(`Error: ${err.message ?? err}`);
+          console.error(err);
+          stopProgress("error");
+        } finally {
+          isProcessing = false;
+        }
+      }
+
+      // ─── File input handler ───────────────────────────────────────────────
+      document.getElementById("imageInput").addEventListener("change", async (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        document.getElementById("fileName").textContent = file.name;
+        e.target.value = ""; // allow re-selecting the same file
+        await processImage(file);
+      });
+    </script>
+  </body>
+</html>
diff --git a/scenarios/grid-barcode-reading/sample_grid.png b/scenarios/grid-barcode-reading/sample_grid.png
new file mode 100644
index 00000000..27cb5c6d
Binary files /dev/null and b/scenarios/grid-barcode-reading/sample_grid.png differ