# Mobile Document Scanner - Angular, React, and Vue

These samples demonstrate how to use the `DocumentScanner` API from the [Dynamsoft Mobile Document Scanner SDK](/index.md) in Angular, React (with hooks), and Vue apps to capture and correct a document with the camera. The samples live in the repository under [`samples/frameworks/`](https://github.com/Dynamsoft/document-scanner-javascript/tree/main/samples/frameworks).

## Features

- Easy integration with pre-built UI
- Captures and auto-corrects a document from the camera
- Displays the corrected document image
- Self-hosts the Dynamsoft Capture Vision engine, runtime data, and camera UI
- **Angular**: Renders `DocumentScanner` inside an Angular component (Angular CLI stack)
- **React**: Renders `DocumentScanner` inside a React component
- **Vue**: Renders `DocumentScanner` inside a Vue component

## Quick Start

> [!WARNING]
> Mobile Document Scanner JS requires a valid license key to operate. Please see the [licensing documentation](/guide/index.md#license) to sign up for a free trial or a full license.

### 1. Install Dependencies

Navigate to the root directory of one of the framework samples:

```shell
npm install
```

### 2. Serve the Application

```shell
npm run dev
```

Then open the URL presented in the console to view the sample app. Replace `"YOUR_LICENSE_KEY_HERE"` in the component source with your license key.

### 3. Build for Production

```shell
npm run build
```

You can preview the production build for React and Vue by additionally running:

```shell
npm run preview
```

## User Guide

Read the official documentation to learn how to use and configure the Mobile Document Scanner:

- [general user guide](/guide/index.md)
- [self-hosting resources](/guide/index.md#self-host-resources)

## Support

If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=mdsSampleReadme).