Merge pull request #479 from dynamsoft-docs/preview

Justin-dynamsoft · web-flow · commit 025669aff85d · 2025-11-24T18:50:12.000+08:00
Preview
diff --git a/_includes/samples_index.html b/_includes/samples_index.html
diff --git a/programming/javascript/faq/unable-to-scan-aztec-code.md b/programming/javascript/faq/unable-to-scan-aztec-code.md
@@ -9,7 +9,7 @@ needAutoGenerateSidebar: false
 # Why am I unable to scan an Aztec code in the helloworld sample?
 
 [<< Back to FAQ index](index.md)
-# Version 10
+## Version 10
 ```javascript
 let settings = await router.getSimplifiedSettings("ReadSingleBarcode");
 settings.barcodeSettings.barcodeFormatIds =
diff --git a/programming/javascript/release-notes/js-11.md b/programming/javascript/release-notes/js-11.md
@@ -85,10 +85,9 @@ noTitleIndex: true
 
 - Introduced new samples:
 
-  - [`Pick One to Fill`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html?utm_source=sampleReadme): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
-  - [`Use Customized Template`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html?utm_source=sampleReadme): Use different customized templates for scanning various barcode types.
-  - [`Batch Inventory`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html?utm_source=sampleReadme): An inventory management tool scan barcodes in batches and provide real-time analysis of the scanned data.
-  - [`Read and Parse GS1-AI`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html?utm_source=sampleReadme): Read GS1 Application Identifier (AI) barcode and parse its structured data.
+  - [`Pick One to Fill`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/pick-one-to-fill/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/scenarios/pick-one-to-fill/index.html?utm_source=sampleReadme): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
+  - [`Batch Inventory`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/scenarios/batch-inventory/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/scenarios/batch-inventory/index.html?utm_source=sampleReadme): An inventory management tool scan barcodes in batches and provide real-time analysis of the scanned data.
+  - [`Read and Parse GS1-AI`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html?utm_source=sampleReadme): Read GS1 Application Identifier (AI) barcode and parse its structured data.
 
 - Template Version Validation: Introduced version checking for templates to prevent compatibility issues and mismatches.
 
@@ -129,7 +128,7 @@ noTitleIndex: true
 
 <img src="../user-guide/assets/1103000_new_control_components.png" style="display: block; margin: 0 auto;"/>
 
-- Introduced a new `"Scan and Search"` sample to simulate searching for relevant data via barcodes. [Give it a try!](https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html)
+- Introduced a new `"Scan and Search"` sample to simulate searching for relevant data via barcodes. [Give it a try!](https://demo.dynamsoft.com/Samples/DBR/JS/scenarios/scan-and-search/scan-and-search.html)
 
 <img src="../user-guide/assets/scan_and_search_sample.png" width="80%" style="display: block; margin: 0 auto;"/>
 
diff --git a/programming/javascript/samples-demos/index.md b/programming/javascript/samples-demos/index.md
diff --git a/programming/javascript/user-guide/barcode-scanner-customization.md b/programming/javascript/user-guide/barcode-scanner-customization.md
@@ -129,7 +129,7 @@ Once you've made your changes, just set the new `uiPath` in the configuration. I
 
 ## Use BarcodeScanner in frameworks
 
-Integrating `BarcodeScanner` into frameworks like `Angular`, `React`, and `Vue` is a little different compared to native usage. You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode) directly without reading this guide.
+Integrating `BarcodeScanner` into frameworks like `Angular`, `React`, and `Vue` is a little different compared to native usage. You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/frameworks) directly without reading this guide.
 
 ### Installation
 
diff --git a/programming/javascript/user-guide/barcode-scanner.md b/programming/javascript/user-guide/barcode-scanner.md
@@ -87,22 +87,22 @@ When getting started with Barcode Scanner, we recommend getting your own 30-day
 ```
 
 <p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/barcode-scanner-api-samples/scan-single-barcode/hello-world.html" title="Code in Github" style="text-decoration:none;">
+  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/hello-world.html" title="Code in Github" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
   </a>
   &nbsp;
   <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/" title="Run via JSFiddle" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
   </a>
   &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
+  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html?ver=11.2.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
   </a>
 </p>
 
 ### Step 1: Setting up the HTML and Including the Barcode Scanner
 
-As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.40).
+As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main).
 
 The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.
 
@@ -223,6 +223,7 @@ Now that the Barcode Scanner has been initialized and configured, it is ready to
 
 > [!TIP]
 > When running performance benchmarks, make sure to disable the console, avoid using `console.log()`, and run in non-debug mode whenever possible. This ensures that your benchmark results reflect true performance without interference from logging or debugging overhead.
+
 ## Next Steps
 
 Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:
diff --git a/programming/javascript/user-guide/index.md b/programming/javascript/user-guide/index.md
@@ -62,7 +62,7 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
     - [Release Notes](#release-notes)
   - [Next Steps](#next-steps)
 
-**Popular Examples**
+<!-- **Popular Examples**
 
 - Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/foundational-api-samples/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.2.40&utm_source=guide)
 - Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/foundational-api-samples/hello-world/angular)
@@ -78,7 +78,7 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
 You can also:
 
 - Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=11.2.40&utm_source=guide)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.40/)
+- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.40/) -->
 
 ## Hello World - Simplest Implementation
 
@@ -140,15 +140,15 @@ The complete code of the "Hello World" example is shown below
 <!--TOM: Update the code links-->
 
 <p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/foundational-api-samples/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
+  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/hello-world.html" title="Code in Github" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
   </a>
   &nbsp;
   <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
   </a>
   &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.2.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
+  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html?ver=11.2.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
   </a>
 </p>
diff --git a/programming/javascript/user-guide/use-in-framework.md b/programming/javascript/user-guide/use-in-framework.md
@@ -14,7 +14,7 @@ schema: schemas/dynamsoft-facilitates-mit-research-schema.json
 
 Integrating [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) into frameworks like Angular, React, and Vue is a little different compared to native usage. This guide will quickly explain the common practices of integrating DBR-JS into these frameworks.
 
-You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world) directly without reading this guide.
+You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/frameworks) directly without reading this guide.
 
 ## Installation
 
@@ -259,7 +259,7 @@ async beforeUnmount(){
 <input type="file" onChange={captureImage}>
 ```
 
-> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world), copy these components into your project.
+> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/frameworks), copy these components into your project.
 
 ## Component for Decoding Video
 
diff --git a/programming/javascript/user-guide/zip-guide.md b/programming/javascript/user-guide/zip-guide.md
@@ -48,10 +48,8 @@ Here are a couple of easy ways to start one:
 
 ## Sample Folders
 
-- `barcode-scanner-api-samples/` – Samples using the Barcode Scanner API with a prebuilt interactive UI, making barcode scanning integration quick and easy.
-- `foundational-api-samples/` – Samples using the foundational API with full customization capabilities.
-
----
+- `frameworks/` – This directory contains framework-specific examples demonstrating how to integrate the Dynamsoft Barcode Reader (JavaScript edition) into common web and hybrid frameworks. Each framework folder contains one or more runnable sub-examples (for example, scan-using-foundational-api and/or scan-using-rtu-api) showing practical integration patterns.
+- `scenarios/` – This directory contains focused scenario samples that show common real-world uses of the Dynamsoft Barcode Reader (JavaScript edition).
 
 ## Documentation
 
