+
+
+
+
diff --git a/programming/javascript/faq/unable-to-scan-aztec-code.md b/programming/javascript/faq/unable-to-scan-aztec-code.md
index ee50cfd5..9383bbdb 100644
--- 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
index 44b502de..14ea5641 100644
--- 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
-- 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)
diff --git a/programming/javascript/samples-demos/index.md b/programming/javascript/samples-demos/index.md
index 9489f4e2..c45a1c2c 100644
--- a/programming/javascript/samples-demos/index.md
+++ b/programming/javascript/samples-demos/index.md
@@ -2,396 +2,10 @@
layout: default-layout
title: Samples and Demos Index - Dynamsoft Barcode Reader JavaScript Edition
description: Refer these samples and demos for different frameworks such as Angular, React, NuxtJS, etc, of Dynamsoft Barcode Reader JavaScript Edition.
-keywords: javascript, js
+keywords: javascript, js, samples
breadcrumbText: Samples and Demos
noTitleIndex: true
needAutoGenerateSidebar: false
---
-
-
-
\ No newline at end of file
+
+{%- include samples_index.html -%}
\ No newline at end of file
diff --git a/programming/javascript/user-guide/barcode-scanner-customization.md b/programming/javascript/user-guide/barcode-scanner-customization.md
index 5afc808d..e5e093be 100644
--- 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
index 87e841a9..a93080ad 100644
--- a/programming/javascript/user-guide/barcode-scanner.md
+++ b/programming/javascript/user-guide/barcode-scanner.md
@@ -87,7 +87,7 @@ When getting started with Barcode Scanner, we recommend getting your own 30-day
```
-
+
@@ -95,14 +95,14 @@ When getting started with Barcode Scanner, we recommend getting your own 30-day
-
+
### 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
index bf25c8da..227f7a88 100644
--- 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**
+
## Hello World - Simplest Implementation
@@ -140,7 +140,7 @@ The complete code of the "Hello World" example is shown below
-
+
@@ -148,7 +148,7 @@ The complete code of the "Hello World" example is shown below
-
+
diff --git a/programming/javascript/user-guide/use-in-framework.md b/programming/javascript/user-guide/use-in-framework.md
index 48e9d8a2..98397056 100644
--- 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(){
```
-> 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
index 94069231..222b152d 100644
--- 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
-- 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)
diff --git a/programming/javascript/samples-demos/index.md b/programming/javascript/samples-demos/index.md
index 9489f4e2..c45a1c2c 100644
--- a/programming/javascript/samples-demos/index.md
+++ b/programming/javascript/samples-demos/index.md
@@ -2,396 +2,10 @@
layout: default-layout
title: Samples and Demos Index - Dynamsoft Barcode Reader JavaScript Edition
description: Refer these samples and demos for different frameworks such as Angular, React, NuxtJS, etc, of Dynamsoft Barcode Reader JavaScript Edition.
-keywords: javascript, js
+keywords: javascript, js, samples
breadcrumbText: Samples and Demos
noTitleIndex: true
needAutoGenerateSidebar: false
---
-
-
-
)
)
)
)
)
)
)
)
)
)
)
)
-
-
- 
- 