# MRZ Scanner Demo Walkthrough This walkthrough breaks down a simpler version of the [MRZ Scanner Demo](https://www.dynamsoft.com/mrz-scanner/docs/web/codegallery/demo/index.md), with the same home and result UI but without the demo's branded landing page, desktop-to-mobile QR-code handoff, or theming layer. It's the easiest entry point if you want to mirror the demo's structure in your own project. The walkthrough assumes you've already installed the SDK and have its runtime assets reachable from your page — see the [User Guide](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner.md) for the npm install and `public/`-folder setup. > [!IMPORTANT] > **To get a styled result view that looks like the demo**, copy [`samples/demo/css/index.css`](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/samples/demo/css/index.css) and [`samples/demo/css/result.css`](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/samples/demo/css/result.css) from the [demo source](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/demo) into a `css/` folder in your project before you start. The HTML below uses the class names those stylesheets expect and references them with `` tags in ``. **Skip this step and the result view will render unstyled.** The markup will still work, but it won't look like the demo. ## Step 1: Set Up the App Structure Create a file named `index.html` at the project root with the following structure. The page has two top-level sections (`#home-section` for the start screen and `#result-section` for the result view), and loads the SDK bundle from the `dynamsoft-mrz-scanner` folder served at `/`: ```html Dynamsoft MRZ Scanner

MRZ Scanner

``` Once `mrz-scanner.bundle.js` is loaded, it exposes a global `Dynamsoft` namespace that holds the `MRZScanner` constructor, the `EnumDocumentSide` enum, and other helpers used below. ## Step 2: Initialize the Scanner Inside the `

MRZ Scanner

``` ## Next Steps - For the full demo source (branded landing page, QR-code handoff, info-menu dropdown, and full theming), see [`samples/demo/`](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/demo) in the GitHub repository. - For the production npm + `public/` setup that backs this walkthrough, see the [User Guide](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner.md). - To customize the scanner UI, theme, and behavior, see the [Customization Guide](https://www.dynamsoft.com/mrz-scanner/docs/web/guides/mrz-scanner-customization.md).