---
Source: https://docs.microblink.com/blinkid/sdk/web/quickstart
Title: Quickstart
Description: Step-by-step guide to integrate BlinkID Web SDK for identity document scanning in browsers
---

# Quickstart

## Install as a dependency

```bash
npm install @microblink/blinkid
```

Or use another package manager, such as `yarn` or `pnpm`:

- `pnpm add @microblink/blinkid`
- `yarn add @microblink/blinkid`

## Get a license key

You also need a license key.
Go to our [developer portal](https://developer.microblink.com/license/new):

- Product: **BlinkID**
- Platform: **In-browser**
- Domain: localhost if you're just testing, otherwise the domain where your app is hosted

This license key needs to be available to the SDK.

```js

const blinkid = await createBlinkId({
  licenseKey: "your license key"
});
```

The best way to expose the license key is through an .env file.
For example, if using Vite as the bundler, you could set `VITE_LICENSE_KEY` as the variable name:

```bash
echo 'VITE_LICENSE_KEY=<your license key here>' > .env.local
```

(Or use another, more appropriate .env file, [depending on the environment](https://vite.dev/guide/env-and-mode#env-files).)

And then integrate like so:

```js

const blinkid = await createBlinkId({
  licenseKey: import.meta.env.VITE_LICENSE_KEY,
});
```

### Integrate into your app

The above is a minimal example of how to import and initialize scanning in your app.

You could, for example, show the extracted information in the console (taken from the [blinkid-simple](https://github.com/microblink/web-sdks/tree/main/apps/examples/blinkid-simple) demo app):


```js
blinkid.addOnResultCallback((result) => {
  console.log("Result:", result);
  void blinkid.destroy();
});
```

## Host resources

### Move manually

In order to integrate the SDK code for web scanning, you need to serve the WebAssembly binary to your app under `/resources`.
The contents must be those in `node_modules/@microblink/blinkid/dist/resources/`.
Therefore, after building the project, copy the resource files into your app.

For example:

```bash
# This creates a `dist` directory with the built app
vite build

# Copy the resources into the app
cp -r node_modules/@microblink/blinkid/dist/resources dist/

# Run the preview
vite preview
```

### Automate with the bundler

Alternatively, you could automate this process by configuring a plugin in your configuration file.
See the [example app configuration](https://github.com/microblink/web-sdks/blob/main/apps/examples/blinkid-simple/vite.config.ts):

```ts {8-17}

  return {
    build: {
      sourcemap: config.mode === "development",
      target: "es2022",
    },
    plugins: [
      {
        name: "move-resources",
        buildStart: async () => {
          if (ranOnce) {
            return;
          }
          moveResources("@microblink/blinkid");
          ranOnce = true;
        },
      },
      // Add resource-specific headers
      resourceHeadersPlugin,
      // Generates certificates for https
      mkcert(),
    ],
    server: serverOptions,
    preview: serverOptions,
  };
});
```

Some other requirements related to hosting resources:

- Must be served in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
- For multithreaded builds, your site must be [cross-origin isolated](https://web.dev/articles/why-coop-coep):

  ```
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  ```

  That means that you must set the `wasmVariant` parameter to `advanced-threads` when initializing the SDK.
  See more in the [Hosting resources](/blinkid/sdk/web/resources) article.

## Example apps

We offer several example apps in our [Github repo](https://github.com/microblink/web-sdks) to showcase several different use cases:

- **[blinkid-simple](https://github.com/microblink/web-sdks/tree/main/apps/examples/blinkid-simple)**:
  Minimal integration with default UI.
- **[blinkid-core-api](https://github.com/microblink/web-sdks/tree/main/apps/examples/blinkid-core-api)**:
  Low-level usage of the core API.
- **[blinkid-advanced-setup](https://github.com/microblink/web-sdks/tree/main/apps/examples/blinkid-advanced-setup)**:
  Custom UI and advanced configuration.
- **[blinkid-preload](https://github.com/microblink/web-sdks/tree/main/apps/examples/blinkid-preload)**:
  Preloading resources for faster startup.

Since the main repo is a monorepo, here are the instructions on how to build it, together with these apps.

### Clone the project

Start by cloning the entire repository:

```bash
git clone https://github.com/microblink/web-sdks
```

### Required versions

The required Node version is 22 (LTS), and the recommended way to play with this repository is by using `nvm`:

```bash
nvm install --lts
nvm use --lts
```

(Starting with version 7.4, the Node 22 requirement is relaxed.)

### Install dependencies

This repo uses `pnpm` in its build scripts, so install it:

```bash
npm install -g pnpm
```

Then, in the root of the repo, run:

```bash
pnpm install
pnpm build
```

:::info[Windows users]

If you're using Powershell, run the build as an administrator to enable the creation of symbolic links, otherwise you'll unnecessarily copy files, instead of symlinking them.

:::

### Run an example app

Navigate to `apps/examples`, and then to one of the example apps, such as `blinkid-simple`.

```bash
cd apps/examples/blinkid-simple
```

Add you license key to the .env file, as described [above](#get-a-license-key).

Then, start the app:

```bash
pnpm dev
```


Last updated on Apr 29, 2026