diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.css b/hello-world/angular/src/app/image-capture/image-capture.component.css
index febb3153..53e77ab1 100644
--- a/hello-world/angular/src/app/image-capture/image-capture.component.css
+++ b/hello-world/angular/src/app/image-capture/image-capture.component.css
@@ -16,4 +16,5 @@
 
 .image-capture-container .results {
   margin-top: 20px;
+  white-space: pre-wrap;
 }
diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.html b/hello-world/angular/src/app/image-capture/image-capture.component.html
index 5faddf9c..fb7b3bc6 100644
--- a/hello-world/angular/src/app/image-capture/image-capture.component.html
+++ b/hello-world/angular/src/app/image-capture/image-capture.component.html
@@ -7,5 +7,5 @@
       accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
     />
   </div>
-  <div class="results" #results></div>
+  <div class="results">{{resultText}}</div>
 </div>
diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.ts b/hello-world/angular/src/app/image-capture/image-capture.component.ts
index fd0bac27..4eb179e8 100644
--- a/hello-world/angular/src/app/image-capture/image-capture.component.ts
+++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts
@@ -11,7 +11,7 @@ import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
   standalone: true,
 })
 export class ImageCaptureComponent {
-  @ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
+  resultText = "";
 
   pCvRouter?: Promise<CaptureVisionRouter>;
   isDestroyed = false;
@@ -19,7 +19,7 @@ export class ImageCaptureComponent {
   captureImage = async (e: Event) => {
     let files = [...((e.target! as HTMLInputElement).files as any as File[])];
     (e.target! as HTMLInputElement).value = ''; // reset input
-    this.resultsContainer!.nativeElement.innerText = '';
+    this.resultText = '';
     try {
       // ensure cvRouter is created only once
       const cvRouter = await (this.pCvRouter =
@@ -27,25 +27,25 @@ export class ImageCaptureComponent {
       if (this.isDestroyed) return;
 
       for (let file of files) {
-        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-        const result = await cvRouter.capture(file, 'ReadBarcodes_SpeedFirst');
+        // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+        const result = await cvRouter.capture(file, 'ReadBarcodes_ReadRateFirst');
+        console.log(result);
         if (this.isDestroyed) return;
 
         // Print file name if there's multiple files
         if (files.length > 1) {
-          this.resultsContainer!.nativeElement.innerText += `\n${file.name}:\n`;
+          this.resultText += `\n${file.name}:\n`;
         }
         for (let _item of result.items) {
           if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
             continue; // check if captured result item is a barcode
           }
           let item = _item as BarcodeResultItem;
-          this.resultsContainer!.nativeElement.innerText += item.text + '\n'; // output the decoded barcode text
-          console.log(item.text);
+          this.resultText += item.text + '\n'; // output the decoded barcode text
         }
         // If no items are found, display that no barcode was detected
         if (!result.items.length)
-          this.resultsContainer!.nativeElement.innerText +=
+          this.resultText +=
             'No barcode found\n';
       }
     } catch (ex: any) {
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.html b/hello-world/angular/src/app/video-capture/video-capture.component.html
index e8a173e9..bae059e4 100644
--- a/hello-world/angular/src/app/video-capture/video-capture.component.html
+++ b/hello-world/angular/src/app/video-capture/video-capture.component.html
@@ -5,4 +5,4 @@
 ></div>
 <br />
 Results:
-<div #results class="results"></div>
+<div class="results">{{resultText}}</div>
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.ts b/hello-world/angular/src/app/video-capture/video-capture.component.ts
index 6899107a..58472732 100644
--- a/hello-world/angular/src/app/video-capture/video-capture.component.ts
+++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts
@@ -14,7 +14,7 @@ const componentDestroyedErrorMsg = 'VideoCapture Component Destroyed';
 })
 export class VideoCaptureComponent {
   @ViewChild('cameraViewContainer') cameraViewContainer?: ElementRef<HTMLDivElement>;
-  @ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
+  resultText = "";
 
   resolveInit?: () => void;
   pInit: Promise<void> = new Promise((r) => {
@@ -52,10 +52,10 @@ export class VideoCaptureComponent {
         onDecodedBarcodesReceived: (result) => {
           if (!result.barcodeResultItems.length) return;
 
-          this.resultsContainer!.nativeElement.textContent = '';
+          this.resultText = '';
           console.log(result);
           for (let item of result.barcodeResultItems) {
-            this.resultsContainer!.nativeElement.textContent += `${item.formatString}: ${item.text}\n\n`;
+            this.resultText += `${item.formatString}: ${item.text}\n\n`;
           }
         },
       });
diff --git a/hello-world/next/components/ImageCapture/ImageCapture.css b/hello-world/next/components/ImageCapture/ImageCapture.css
index 03da581c..09fdc448 100644
--- a/hello-world/next/components/ImageCapture/ImageCapture.css
+++ b/hello-world/next/components/ImageCapture/ImageCapture.css
@@ -17,4 +17,5 @@
 .image-capture-container .results {
   margin-top: 20px;
   height: 100%;
+  white-space: pre-wrap;
 }
diff --git a/hello-world/next/components/ImageCapture/ImageCapture.tsx b/hello-world/next/components/ImageCapture/ImageCapture.tsx
index 03e52618..d8b5b097 100644
--- a/hello-world/next/components/ImageCapture/ImageCapture.tsx
+++ b/hello-world/next/components/ImageCapture/ImageCapture.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, MutableRefObject, useCallback } from "react";
+import React, { useRef, useEffect, MutableRefObject, useCallback, useState } from "react";
 import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
 import { EnumCapturedResultItemType } from "dynamsoft-core";
 import { BarcodeResultItem } from "dynamsoft-barcode-reader";
@@ -6,7 +6,7 @@ import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 import "./ImageCapture.css";
 
 function ImageCapture() {
-  const resultsContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const [resultText, setResultText] = useState("");
 
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
@@ -14,7 +14,7 @@ function ImageCapture() {
   const decodeImg = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     let files = [...(e.target.files as any as File[])];
     e.target.value = ""; // reset input
-    resultsContainer.current!.innerText = "";
+    let _resultText = "";
 
     try {
       // ensure cvRouter is created only once
@@ -22,24 +22,26 @@ function ImageCapture() {
       if (isDestroyed.current) return;
 
       for (let file of files) {
-        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-        const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+        // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+        const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst");
+        console.log(result);
         if (isDestroyed.current) return;
 
+        let _resultText = "";
         // Print file name if there's multiple files
         if (files.length > 1) {
-          resultsContainer.current!.innerText += `\n${file.name}:\n`;
+          _resultText += `\n${file.name}:\n`;
         }
         for (let _item of result.items) {
           if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
             continue; // check if captured result item is a barcode
           }
           let item = _item as BarcodeResultItem;
-          resultsContainer.current!.innerText += item.text + "\n"; // output the decoded barcode text
-          console.log(item.text);
+          _resultText += item.text + "\n"; // output the decoded barcode text
         }
         // If no items are found, display that no barcode was detected
-        if (!result.items.length) resultsContainer.current!.innerText = "No barcode found";
+        if (!result.items.length) _resultText = "No barcode found";
+        setResultText(_resultText);
       }
     } catch (ex: any) {
       let errMsg = ex.message || ex;
@@ -68,7 +70,7 @@ function ImageCapture() {
       <div className="input-container">
         <input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImg} />
       </div>
-      <div className="results" ref={resultsContainer}></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }
diff --git a/hello-world/next/components/VideoCapture/VideoCapture.tsx b/hello-world/next/components/VideoCapture/VideoCapture.tsx
index 5603af78..06f8ce48 100644
--- a/hello-world/next/components/VideoCapture/VideoCapture.tsx
+++ b/hello-world/next/components/VideoCapture/VideoCapture.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
 import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
@@ -9,7 +9,7 @@ const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 function VideoCapture() {
   const cameraViewContainer = useRef<HTMLDivElement>(null);
-  const resultsContainer = useRef<HTMLDivElement>(null);
+  const [resultsText, setResultText] = useState("");
 
   useEffect((): any => {
     let resolveInit: () => void;
@@ -48,11 +48,12 @@ function VideoCapture() {
           onDecodedBarcodesReceived: (result) => {
             if (!result.barcodeResultItems.length) return;
 
-            resultsContainer.current!.textContent = "";
+            let _resultText = "";
             console.log(result);
             for (let item of result.barcodeResultItems) {
-              resultsContainer.current!.textContent += `${item.formatString}: ${item.text}\n\n`;
+              _resultText += `${item.formatString}: ${item.text}\n\n`;
             }
+            setResultText(_resultText);
           },
         });
 
@@ -115,7 +116,7 @@ function VideoCapture() {
       ></div>
       <br />
       Results:
-      <div ref={resultsContainer} className="results"></div>
+      <div className="results">{resultsText}</div>
     </div>
   );
 }
diff --git a/hello-world/nuxt/components/ImageCapture.client.vue b/hello-world/nuxt/components/ImageCapture.client.vue
index a4d1be51..fd9e09da 100644
--- a/hello-world/nuxt/components/ImageCapture.client.vue
+++ b/hello-world/nuxt/components/ImageCapture.client.vue
@@ -5,7 +5,7 @@ import { EnumCapturedResultItemType } from "dynamsoft-core";
 import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 
-const resultContainer: Ref<HTMLDivElement | null> = ref(null);
+const resultText = ref("");
 
 let pCvRouter: Promise<CaptureVisionRouter>;
 let isDestroyed = false;
@@ -13,31 +13,31 @@ let isDestroyed = false;
 const captureImage = async (e: Event) => {
   let files = [...(e.target! as HTMLInputElement).files!];
   (e.target! as HTMLInputElement).value = ''; // reset input
-  resultContainer.value!.innerText = "";
+  resultText.value = "";
   try {
     // ensure cvRouter is created only once
     const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
     if (isDestroyed) return;
 
     for (let file of files) {
-      // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-      const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+      // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+      const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst");
+      console.log(result);
       if (isDestroyed) return;
 
       // Print file name if there's multiple files
       if (files.length > 1) {
-        resultContainer.value!.innerText += `\n${file.name}:\n`;
+        resultText.value += `\n${file.name}:\n`;
       }
       for (let _item of result.items) {
         if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
           continue;  // check if captured result item is a barcode
         }
         let item = _item as BarcodeResultItem;
-        resultContainer.value!.innerText += item.text + "\n";  // output the decoded barcode text
-        console.log(item.text);
+        resultText.value += item.text + "\n";  // output the decoded barcode text
       }
       // If no items are found, display that no barcode was detected
-      if (!result.items.length) resultContainer.value!.innerText += 'No barcode found\n';
+      if (!result.items.length) resultText.value += 'No barcode found\n';
     }
   } catch (ex: any) {
     let errMsg = ex.message || ex;
@@ -61,7 +61,7 @@ onBeforeUnmount(async () => {
     <div class="input-container">
       <input type="file" multiple @change="captureImage" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
     </div>
-    <div class="results" ref="resultContainer"></div>
+    <div class="results">{{resultText}}</div>
   </div>
 </template>
 
@@ -84,5 +84,6 @@ onBeforeUnmount(async () => {
 .image-capture-container .results {
   margin-top: 20px;
   height: 100%;
+  white-space: pre-wrap;
 }
 </style>
diff --git a/hello-world/nuxt/components/VideoCapture.client.vue b/hello-world/nuxt/components/VideoCapture.client.vue
index 70d22b30..aa09208a 100644
--- a/hello-world/nuxt/components/VideoCapture.client.vue
+++ b/hello-world/nuxt/components/VideoCapture.client.vue
@@ -8,7 +8,7 @@ import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 const cameraViewContainer: Ref<HTMLElement | null> = ref(null);
-const resultsContainer: Ref<HTMLElement | null> = ref(null);
+const resultText = ref("");
 
 let resolveInit: () => void;
 const pInit: Promise<void> = new Promise(r => { resolveInit = r });
@@ -40,10 +40,10 @@ onMounted(async () => {
       onDecodedBarcodesReceived: (result) => {
         if (!result.barcodeResultItems.length) return;
 
-        resultsContainer.value!.textContent = '';
+          resultText.value = '';
         console.log(result);
         for (let item of result.barcodeResultItems) {
-          resultsContainer.value!.textContent += `${item.formatString}: ${item.text}\n\n`;
+          resultText.value += `${item.formatString}: ${item.text}\n\n`;
         }
       }
     });
@@ -95,7 +95,7 @@ onBeforeUnmount(async () => {
     <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
-    <div ref="resultsContainer" class="results"></div>
+    <div class="results">{{ resultText }}</div>
   </div>
 </template>
 
diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css
index 03da581c..09fdc448 100644
--- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css
+++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css
@@ -17,4 +17,5 @@
 .image-capture-container .results {
   margin-top: 20px;
   height: 100%;
+  white-space: pre-wrap;
 }
diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx
index 19abc754..bb2fedc9 100644
--- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx
+++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, MutableRefObject, useCallback } from "react";
+import React, { useRef, useEffect, MutableRefObject, useCallback, useState } from "react";
 import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
 import { EnumCapturedResultItemType } from "dynamsoft-core";
 import { BarcodeResultItem } from "dynamsoft-barcode-reader";
@@ -6,7 +6,7 @@ import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 import "./ImageCapture.css";
 
 function ImageCapture() {
-  const resultsContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const [resultText, setResultText] = useState("");
 
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
@@ -14,32 +14,34 @@ function ImageCapture() {
   const captureImage = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     let files = [...(e.target.files as any as File[])];
     e.target.value = ""; // reset input
-    resultsContainer.current!.innerText = "";
+    setResultText("");
 
     try {
       // ensure cvRouter is created only once
       const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance());
       if (isDestroyed.current) return;
 
+      let _resultText = "";
       for (let file of files) {
-        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-        const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+        // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+        const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst");
+        console.log(result);
         if (isDestroyed.current) return;
 
         // Print file name if there's multiple files
         if (files.length > 1) {
-          resultsContainer.current!.innerText += `\n${file.name}:\n`;
+          _resultText += `\n${file.name}:\n`;
         }
         for (let _item of result.items) {
           if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
             continue; // check if captured result item is a barcode
           }
           let item = _item as BarcodeResultItem;
-          resultsContainer.current!.innerText += item.text + "\n"; // output the decoded barcode text
-          console.log(item.text);
+          _resultText += item.formatString + ": " + item.text + "\n"
         }
+        setResultText(_resultText);
         // If no items are found, display that no barcode was detected
-        if (!result.items.length) resultsContainer.current!.innerText += "No barcode found";
+        if (!result.items.length) setResultText(_resultText + "No barcode found");
       }
     } catch (ex: any) {
       let errMsg = ex.message || ex;
@@ -68,7 +70,7 @@ function ImageCapture() {
       <div className="input-container">
         <input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={captureImage} />
       </div>
-      <div className="results" ref={resultsContainer}></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }
diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx
index 88dfcd0a..aa5c70d7 100644
--- a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx
+++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
 import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
@@ -8,8 +8,8 @@ import "./VideoCapture.css";
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 function VideoCapture() {
+  const [resultText, setResultText] = useState("");
   const cameraViewContainer = useRef<HTMLDivElement>(null);
-  const resultsContainer = useRef<HTMLDivElement>(null);
 
   useEffect((): any => {
     let resolveInit: () => void;
@@ -48,11 +48,13 @@ function VideoCapture() {
           onDecodedBarcodesReceived: (result) => {
             if (!result.barcodeResultItems.length) return;
 
-            resultsContainer.current!.textContent = "";
+            let _resultText = "";
+            setResultText(_resultText);
             console.log(result);
             for (let item of result.barcodeResultItems) {
-              resultsContainer.current!.textContent += `${item.formatString}: ${item.text}\n\n`;
+              _resultText += `${item.formatString}: ${item.text}\n\n`;
             }
+            setResultText(_resultText);
           },
         });
 
@@ -106,7 +108,7 @@ function VideoCapture() {
       <div ref={cameraViewContainer} style={{ width: "100%", height: "70vh" }}></div>
       <br />
       Results:
-      <div ref={resultsContainer} className="results"></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }
diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx
index 4b5e25bc..6ece84b5 100644
--- a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx
+++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx
@@ -21,8 +21,9 @@ class ImageCapture extends React.Component {
       if (this.isDestroyed) return;
 
       for (let file of files) {
-        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-        const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+        // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+        const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst");
+        console.log(result);
         if (this.isDestroyed) return;
 
         // Print file name if there's multiple files
@@ -35,7 +36,6 @@ class ImageCapture extends React.Component {
           }
           let item = _item as BarcodeResultItem;
           this.resultsContainer.current!.innerText += item.text + "\n";
-          console.log(item.text);
         }
         // If no items are found, display that no barcode was detected
         if (!result.items.length) this.resultsContainer.current!.innerText += "No barcode found\n";
diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx
index e20c7c6d..cbd044cb 100644
--- a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx
+++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx
@@ -8,8 +8,10 @@ import "./VideoCapture.css";
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 class VideoCapture extends React.Component {
+  state = {
+    resultText: ""
+  };
   cameraViewContainer: React.RefObject<HTMLDivElement> = React.createRef();
-  resultsContainer: React.RefObject<HTMLDivElement> = React.createRef();
 
   resolveInit?: () => void;
   pInit: Promise<void> = new Promise((r) => (this.resolveInit = r));
@@ -45,12 +47,13 @@ class VideoCapture extends React.Component {
       this.cvRouter.addResultReceiver({
         onDecodedBarcodesReceived: (result) => {
           if (!result.barcodeResultItems.length) return;
-
-          this.resultsContainer.current!.textContent = "";
+          
+          let _resultText = "";
           console.log(result);
           for (let item of result.barcodeResultItems) {
-            this.resultsContainer.current!.textContent += `${item.formatString}: ${item.text}\n\n`;
+            _resultText += `${item.formatString}: ${item.text}\n\n`;
           }
+          this.setState({resultText: _resultText})
         },
       });
 
@@ -110,7 +113,7 @@ class VideoCapture extends React.Component {
         <div ref={this.cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
         <br />
         Results:
-        <div ref={this.resultsContainer} className="results"></div>
+        <div className="results">{this.state.resultText}</div>
       </div>
     );
   }
diff --git a/hello-world/svelte/src/components/ImageCapture.svelte b/hello-world/svelte/src/components/ImageCapture.svelte
index 1fbaf6c1..b3fb51e2 100644
--- a/hello-world/svelte/src/components/ImageCapture.svelte
+++ b/hello-world/svelte/src/components/ImageCapture.svelte
@@ -5,39 +5,38 @@
   import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
   import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 
-  let resultsContainer: HTMLDivElement;
-
   let pCvRouter: Promise<CaptureVisionRouter>;
   let isDestroyed = false;
+  let resultText = "";
 
   const captureImage = async (e: Event) => {
     let files = [...(e.target! as HTMLInputElement).files!];
     (e.target! as HTMLInputElement).value = ""; // reset input
-    resultsContainer.innerText = "";
+    resultText = "";
 
     try {
       const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
       if (isDestroyed) return;
 
       for (let file of files) {
-        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-        const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+        // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+        const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst");
+        console.log(result);
         if (isDestroyed) return;
 
         // Print file name if there's multiple files
         if (files.length > 1) {
-          resultsContainer.innerText += `\n${file.name}:\n`;
+          resultText += `\n${file.name}:\n`;
         }
         for (let _item of result.items) {
           if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
             continue; // check if captured result item is a barcode
           }
           let item = _item as BarcodeResultItem;
-          resultsContainer.innerText += item.text + "\n"; // output the decoded barcode text
-          console.log(item.text);
+          resultText += item.formatString + ": " + item.text + "\n"; // output the decoded barcode text
         }
         // If no items are found, display that no barcode was detected
-        if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
+        if (!result.items.length) resultText += "No barcode found\n";
       }
     } catch (ex: any) {
       let errMsg = ex.message || ex;
@@ -63,7 +62,7 @@
   <div class="input-container">
     <input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
   </div>
-  <div class="result" bind:this={resultsContainer}></div>
+  <div class="result">{resultText}</div>
 </div>
 
 <style>
@@ -92,5 +91,6 @@
 
   .image-capture-container .result {
     margin-top: 20px;
+    white-space: pre-wrap;
   }
 </style>
diff --git a/hello-world/svelte/src/components/VideoCapture.svelte b/hello-world/svelte/src/components/VideoCapture.svelte
index 0b171a41..f1014b1d 100644
--- a/hello-world/svelte/src/components/VideoCapture.svelte
+++ b/hello-world/svelte/src/components/VideoCapture.svelte
@@ -8,7 +8,7 @@
   const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
   let cameraViewContainer: HTMLDivElement;
-  let resultsContainer: HTMLDivElement;
+  let resultText = "";
 
   let resolveInit: () => void;
   const pInit: Promise<void> = new Promise((r) => {
@@ -47,10 +47,10 @@
           onDecodedBarcodesReceived: (result) => {
             if (!result.barcodeResultItems.length) return;
 
-            resultsContainer.textContent = "";
+            resultText = "";
             console.log(result);
             for (let item of result.barcodeResultItems) {
-              resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+              resultText += `${item.formatString}: ${item.text}\n\n`;
             }
           },
         });
@@ -103,9 +103,12 @@
 </script>
 
 <div>
-  <div bind:this={cameraViewContainer} style="width: 100%; height: 70vh; background: #eee;"></div>
+  <div
+    bind:this={cameraViewContainer}
+    style="width: 100%; height: 70vh; background: #eee;"
+  ></div>
   Results:<br />
-  <div bind:this={resultsContainer} class="results"></div>
+  <div class="results">{resultText}</div>
 </div>
 
 <style>
diff --git a/hello-world/vue/src/components/ImageCapture.vue b/hello-world/vue/src/components/ImageCapture.vue
index 25392c19..ba7f7299 100644
--- a/hello-world/vue/src/components/ImageCapture.vue
+++ b/hello-world/vue/src/components/ImageCapture.vue
@@ -1,43 +1,42 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, type Ref } from "vue";
+import { onBeforeUnmount, ref } from "vue";
 import "../dynamsoft.config";
 import { EnumCapturedResultItemType } from "dynamsoft-core";
 import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 
-const resultContainer: Ref<HTMLDivElement | null> = ref(null);
-
 let pCvRouter: Promise<CaptureVisionRouter>;
 let isDestroyed = false;
+let resultText = ref("");
 
 const captureImage = async (e: Event) => {
   let files = [...(e.target! as HTMLInputElement).files!];
   (e.target! as HTMLInputElement).value = ''; // reset input
-  resultContainer.value!.innerText = "";
+  resultText.value = "";
   try {
     // ensure cvRouter is created only once
     const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
     if (isDestroyed) return;
 
     for (let file of files) {
-      // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-      const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+      // Decode selected image with 'ReadBarcodes_ReadRateFirst' template.
+      const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst");
+      console.log(result);
       if (isDestroyed) return;
 
       // Print file name if there's multiple files
       if (files.length > 1) {
-        resultContainer.value!.innerText += `\n${file.name}:\n`;
+        resultText.value += `\n${file.name}:\n`;
       }
       for (let _item of result.items) {
         if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
           continue;  // check if captured result item is a barcode
         }
         let item = _item as BarcodeResultItem;
-        resultContainer.value!.innerText += item.text + "\n";  // output the decoded barcode text
-        console.log(item.text);
+        resultText.value += item.formatString + ": " + item.text + "\n";  // output the decoded barcode text
       }
       // If no items are found, display that no barcode was detected
-      if (!result.items.length) resultContainer.value!.innerText += 'No barcode found\n';
+      if (!result.items.length) resultText.value += 'No barcode found\n';
     }
   } catch (ex: any) {
     let errMsg = ex.message || ex;
@@ -61,7 +60,7 @@ onBeforeUnmount(async () => {
     <div class="input-container">
       <input type="file" multiple @change="captureImage" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
     </div>
-    <div class="results" ref="resultContainer"></div>
+    <div class="results">{{ resultText }}</div>
   </div>
 </template>
 
@@ -84,5 +83,6 @@ onBeforeUnmount(async () => {
 .image-capture-container .results {
   margin-top: 20px;
   height: 100%;
+  white-space: pre-wrap;
 }
 </style>
\ No newline at end of file
diff --git a/hello-world/vue/src/components/VideoCapture.vue b/hello-world/vue/src/components/VideoCapture.vue
index ed4eddf0..870faaea 100644
--- a/hello-world/vue/src/components/VideoCapture.vue
+++ b/hello-world/vue/src/components/VideoCapture.vue
@@ -8,7 +8,6 @@ import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 const cameraViewContainer: Ref<HTMLElement | null> = ref(null);
-const resultsContainer: Ref<HTMLElement | null> = ref(null);
 
 let resolveInit: () => void;
 const pInit: Promise<void> = new Promise(r => { resolveInit = r });
@@ -16,9 +15,9 @@ let isDestroyed = false;
 
 let cvRouter: CaptureVisionRouter;
 let cameraEnhancer: CameraEnhancer;
+let resultText = ref("");
 
 onMounted(async () => {
-
   try {
     // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
     const cameraView = await CameraView.createInstance();
@@ -40,10 +39,10 @@ onMounted(async () => {
       onDecodedBarcodesReceived: (result) => {
         if (!result.barcodeResultItems.length) return;
 
-        resultsContainer.value!.textContent = '';
+        resultText.value = '';
         console.log(result);
         for (let item of result.barcodeResultItems) {
-          resultsContainer.value!.textContent += `${item.formatString}: ${item.text}\n\n`;
+          resultText.value += `${item.formatString}: ${item.text}\n\n`;
         }
       }
     });
@@ -95,7 +94,7 @@ onBeforeUnmount(async () => {
     <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
-    <div ref="resultsContainer" class="results"></div>
+    <div class="results">{{ resultText }}</div>
   </div>
 </template>