Fix grammar and UI path issues

Timothy-Dynamsoft · Timothy-Dynamsoft · commit a403a626b216 · 2025-10-22T11:04:36.000-07:00
diff --git a/programming/javascript/index.md b/programming/javascript/index.md
@@ -13,25 +13,25 @@ breadcrumbText: JavaScript
 
 Dynamsoft Barcode Reader (DBR) can be used in JavaScript to add barcode reading capabilities to websites running in modern browsers. It is ideal for
 
-* organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; or
-* organizations whose customers have no desire to install applications for temporary usage of their services.
+- organizations who already have sophisticated websites and do not intend to develop mobile applications for the same purposes; or
+- organizations whose customers have no desire to install applications for temporary usage of their services.
 
 To get a fast start, you can
 
-* read the [User Guide](user-guide/barcode-scanner.html), or
-* try the [Samples and Demos](samples-demos/)
+- read the [User Guide](user-guide/barcode-scanner.html), or
+- try the [Samples and Demos](samples-demos/)
 
 The following describes the highlights of DBR JavaScript edition (DBR-JS) version 11.x.
 
 # ✨BarcodeScanner – Simplified API and Built-in UI
 
-The `BarcodeScanner` class offering a streamlined API and a prebuilt interactive UI, making barcode scanning integration easier than ever. This is now the recommended way to use DBR-JS, especially for developers who want a quick, clean, and robust scanning experience with minimal setup.
+The `BarcodeScanner` class offers a streamlined API and a prebuilt interactive UI, making barcode scanning integration easier than ever. This is now the recommended way to use DBR-JS, especially for developers who want a quick, clean, and robust scanning experience with minimal setup.
 
 With `BarcodeScanner`, you can:
 
-- Instantiate and configure the scanner with just a few lines of code;
+- Instantiate and configure the scanner with just a few lines of code.
 
-- Select your scanning mode and present a ready-to-use scanning interface;
+- Select your scanning mode and present a ready-to-use scanning interface.
 
 - Focus on your application logic without worrying about camera setup, UI rendering, or lifecycle management.
 
@@ -42,11 +42,11 @@ With `BarcodeScanner`, you can:
 
 ## Fast Integration
 
-This [JSFiddle example](https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/) demonstrates all the code needed to build a web application using `BarcodeScanner`, end users of the web page can open it in a browser, access their cameras and read barcodes directly from the video input.
+This [JSFiddle example](https://jsfiddle.net/DynamsoftTeam/gcqjf5r7/) demonstrates all the code needed to build a web application using `BarcodeScanner`. End users of the web page can open it in a browser, access their cameras, and read barcodes directly from the video input.
 
 ### Camera Control
 
-Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. As shown in the code snippet above, the product **Dynamsoft Camera Enhancer (DCE)** is used to provide camera support. It makes use of the powerful [**MediaDevices**](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface (provided by the browser itself) to instantly access the video input of the camera, capture image frames and supply them to the back-end decoding engine.
+Customers generally need to scan a barcode on the fly at which time there is no better input than the camera hooked to or built into the device itself. As shown in the example above, the product **Dynamsoft Camera Enhancer (DCE)** is used to provide camera support. It makes use of the powerful [**MediaDevices**](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) interface (provided by the browser itself) to instantly access the video input of the camera, capture image frames and supply them to the back-end decoding engine.
 
 > DBR and DCE communicate through the interface called [Image Source Adapter]({{ site.dcvb_architecture }}input.html#image-source-adapter?lang=js).
 
@@ -74,21 +74,21 @@ The actual use environment is unpredictable. The barcode may appear distorted, i
 
 DBR does a lot of preparation work to make sure the barcode is as legible as possible for the decoding engine to read. This ensures a very high accuracy. In addition, DBR achieves even higher accuracy through the following ways:
 
-* DBR can verify results by comparing the results of multiple consecutive recognitions;
-* DBR has a confidence score for each recognition which can be used to filter unwanted results;
-* DBR is also able to verify the barcode result with printed text that accompanies the barcode with the help of the product **Dynamsoft Label Recognizer (DLR)**.
+- DBR can verify results by comparing the results of multiple consecutive recognitions;
+- DBR has a confidence score for each recognition which can be used to filter unwanted results;
+- DBR is also able to verify the barcode result with printed text that accompanies the barcode with the help of the product **Dynamsoft Label Recognizer (DLR)**.
 
-Through many experiences, DBR has also cultivated its error correction ability to handle
+Through extensive real-world use, DBR has also cultivated its error correction ability to handle:
 
-* Non-standard barcodes which do not strictly abide by the specification;
-* Deformed barcodes which are usually caused by improper printing.
+- Non-standard barcodes which do not strictly abide by the specification;
+- Deformed barcodes which are usually caused by improper printing.
 
 ## Effortless Expansion
 
 DBR-JS v11.x is based on [Dynamsoft Capture Vision]({{site.dcvb_architecture}}) which is a modular architecture. This architecture makes it easy to add new functionality or custom behavior with very little change to the code. Two examples are:
 
-* Add **Dynamsoft Document Normalizer (DDN)** to do perspective correction before pass an image frame to read barcodes;
-* Add **Dynamsoft Code Parser (DCP)** to parse the text embedded in the PDF417 on driver's licenses.
+- Add **Dynamsoft Document Normalizer (DDN)** to do perspective correction before passing an image frame to read barcodes;
+- Add **Dynamsoft Code Parser (DCP)** to parse the text embedded in the PDF417 on driver's licenses.
 
 ## Next Step
 
diff --git a/programming/javascript/user-guide/barcode-scanner-customization.md b/programming/javascript/user-guide/barcode-scanner-customization.md
@@ -12,7 +12,7 @@ description: Dynamsoft Barcode Scanner customization
 
 - [Specify the barcode format](#specify-the-barcode-format)
 - [Use customized template](#use-customized-template)
-- [Config the pre-built UIs](#config-the-pre-built-uis)
+- [Configure the pre-built UIs](#configure-the-pre-built-uis)
 - [Use BarcodeScanner in frameworks](#use-barcodescanner-in-frameworks)
 
 ## Specify the barcode format
@@ -49,7 +49,7 @@ The benefit of this approach is that the template file can be reused across diff
 Refer to [`Use customized template`](#use-customized-template) for more details.
 
 > [!IMPORTANT]
-> Due to the powerful customization capabilities, the number of configurable parameters in the templates is extensive and relatively complex. feel free to [contact us](https://www.dynamsoft.com/contact/) if you need help creating a custom template.
+> Due to the powerful customization capabilities, the number of configurable parameters in the templates is extensive and relatively complex. Feel free to [contact us](https://www.dynamsoft.com/contact/) if you need help creating a custom template.
 
 ## Use customized template
 
@@ -61,13 +61,13 @@ In more complex scenarios—such as blurred, damaged, curved, or unevenly lit ba
 ```js
   const barcodeScannerConfig = {
     // The path to your custom JSON template that defines the scanning process.
-    templateFilePath:'path/to/DBR-PresetTemplates.json'
+    templateFilePath: 'path/to/DBR-PresetTemplates.json'
     };
   // Initialize the BarcodeScanner with the above BarcodeScannerConfig object
   const barcodeScanner = new Dynamsoft.BarcodeScanner(barcodeScannerConfig);
 ```
 
-## Config the Pre-built UIs
+## Configure the Pre-built UIs
 
 The built-in UI of `BarcodeScanner` is composed of `BarcodeScannerView` and `BarcodeResultView`. In `MULTI_UNIQUE` mode, `BarcodeResultView` is shown by default to ensure the essential workflow can proceed. Other UI components can be shown or hidden manually through `barcodeScannerConfig`. Let's break down these two Views:
 
@@ -81,7 +81,7 @@ The `BarcodeScannerView` is composed of the following UI elements:
 
 2. **Load Image Button**: This button allows the user to scan a file of a barcode-containing image from the device's local storage. You can decide whether to show or hide the button by [showUploadImageButton]({{ site.js_api }}barcode-scanner.html#barcodescannerconfig) property.
 
-3. **Close Scanner Button**: This button closes the Barcode Scanner, return a [`BarcodeScanResult`]({{ site.js_api }}barcode-scanner.html#barcodescanresult) object and destroys the **`BarcodeScanner`** instance. You can decide whether to show or hide the button by [showCloseButton]({{ site.js_api }}barcode-scanner.html#scannerviewconfig) property.
+3. **Close Scanner Button**: This button closes the Barcode Scanner, returns a [`BarcodeScanResult`]({{ site.js_api }}barcode-scanner.html#barcodescanresult) object and destroys the **`BarcodeScanner`** instance. You can decide whether to show or hide the button by [showCloseButton]({{ site.js_api }}barcode-scanner.html#scannerviewconfig) property.
 
 4. **Flash Button**: This button allows the user to toggle the camera's torch. You can decide whether to show or hide the button by [showFlashButton]({{ site.js_api }}barcode-scanner.html#barcodescannerconfig) property.
 
@@ -97,11 +97,11 @@ Here is a quick breakdown of the `MULTI_UNIQUE` UI elements of the `BarcodeResul
 
 2. **Clear Button**: The button on the bottom left, which clears all elements of the current `Barcode Results List`. You can change the style of the Button with [BarcodeResultViewToolbarButtonsConfig]({{ site.js_api }}barcode-scanner.html#barcoderesultviewtoolbarbuttonsconfig).
 
-3. **Done Button**: The button on the bottom right, which closes the Barcode Scanner, return a [`BarcodeScanResult`]({{ site.js_api }}barcode-scanner.html#barcodescanresult) object that includes all unique barcodes and destroys the **`BarcodeScanner`** instance. You can change the style of the Button with [BarcodeResultViewToolbarButtonsConfig]({{ site.js_api }}barcode-scanner.html#barcoderesultviewtoolbarbuttonsconfig).
+3. **Done Button**: The button on the bottom right, which closes the Barcode Scanner, returns a [`BarcodeScanResult`]({{ site.js_api }}barcode-scanner.html#barcodescanresult) object that includes all unique barcodes and destroys the **`BarcodeScanner`** instance. You can change the style of the Button with [BarcodeResultViewToolbarButtonsConfig]({{ site.js_api }}barcode-scanner.html#barcoderesultviewtoolbarbuttonsconfig).
 
 ### Manually modify the UI file
 
-Another way to fully customize the UI is by directly editing the `.xml` file. In the `dist/` directory, you'll find the `barcode-scanner.ui.xml` file, which is the default UI for the `BarcodeScanner`. 
+Another way to fully customize the UI is by directly editing the `.xml` file. In the `dist/ui/` directory, you'll find the `barcode-scanner.ui.xml` file, which is the default UI for the `BarcodeScanner`. 
 
 > [!NOTE]
 > Although it is essentially HTML, using a .xml extension can help prevent compatibility issues with the Live Server plugin.
@@ -164,10 +164,10 @@ Below is an example using the official CDN — feel free to replace it with your
       // Configures the paths where the .wasm files and other necessary resources for modules are located.
       engineResourcePaths: {
         // Using jsDelivr CDN as an example
-        rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/",
+        rootDirectory: "https://cdn.jsdelivr.net/npm/",
       },
       // Path to the UI (.xml template file).
-      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/barcode-scanner.ui.xml",
+      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/ui/barcode-scanner.ui.xml",
     };
 ```
 
diff --git a/programming/javascript/user-guide/barcode-scanner.md b/programming/javascript/user-guide/barcode-scanner.md
@@ -115,7 +115,7 @@ The first step before writing the code is to include the SDK in your application
 </html>
 ```
 
-In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.
+In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the body.
 
 <div class="multi-panel-switching-prefix"></div>
 
@@ -144,7 +144,7 @@ When using a framework such as **React**, **Vue** or **Angular**, we recommend a
   yarn add dynamsoft-barcode-reader-bundle@11.0.6000
   ```
 
-As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
+When using package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
 <div class="multi-panel-end"></div>
 
 <div class="multi-panel-start"></div>
@@ -169,7 +169,7 @@ Alternatively, you may choose to download the SDK and host the files on your own
   > [!IMPORTANT]
   > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
 
-You can typically include SDK like this:
+You can typically include the SDK like this:
 
 ```html
 <script src="path/to/dynamsoft-barcode-reader-bundle@11.0.6000/dist/dbr.bundle.js"></script>
@@ -184,9 +184,9 @@ Barcode Scanner comes with a **Ready-to-Use UI**. When the Barcode Scanner launc
 
 ```js
 // Initialize the Dynamsoft Barcode Scanner
-const barcodescanner = new Dynamsoft.BarcodeScanner({
+const barcodeScanner = new Dynamsoft.BarcodeScanner({
   // Please don't forget to replace YOUR_LICENSE_KEY_HERE
-  license: "YOUR_LICENSE_KEY_HERE", 
+  license: "YOUR_LICENSE_KEY_HERE",
 });
 ```
 
@@ -197,7 +197,7 @@ This is the **simplest** way to initialize the Barcode Scanner. The configuratio
 
 ```js
 // Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode
-const barcodescanner = new Dynamsoft.BarcodeScanner({
+const barcodeScanner = new Dynamsoft.BarcodeScanner({
   license: "YOUR_LICENSE_KEY_HERE",
   scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
 });
@@ -208,7 +208,7 @@ const barcodescanner = new Dynamsoft.BarcodeScanner({
 ```js
 (async () => {
   // Launch the scanner and wait for the result
-  const result = await barcodescanner.launch();
+  const result = await barcodeScanner.launch();
   // Display the first detected barcode's text in an alert
   if (result.barcodeResults.length) {
       alert(result.barcodeResults[0].text);
@@ -219,11 +219,11 @@ const barcodescanner = new Dynamsoft.BarcodeScanner({
 Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main **`BarcodeScannerView`** UI in its container on the page, and is ready to start scanning. By default, we use the `SINGLE` scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.
 
 > [!NOTE]
-> In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
+> In the Hello World sample, after a successful decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
 
 ## 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
+Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner:
 
 1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
 2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.6000)
