Skip to main content

JavaScript library

The CAI JavaScript library (sometimes referred to as the "JavaScript SDK") enables client JavaScript applications to view and verify C2PA data. It performs only read operations on C2PA manifests, unlike the Rust library, and the prerelease libraries which can both read and write manifests.

What you should already know​

info

The JavaScript library is intended for experienced JavaScript developers. It uses a number of modern JavaScript technologies, as detailed below. To use the library, you should be familiar with these technologies, and at least one popular build and bundler tool such as Webpack, Rollup, or Vite.

Technologies that the library uses​

The JavaScript library uses several modern browser technologies, including:

Overview​

The JavaScript library is a monorepo containing the following packages intended for client use:

  • c2pa is the main package used for loading and verifying manifests. This package runs all of the processing logic on the client using a WebAssembly module and exposes a TypeScript-compatible API for easy integration.
  • c2pa-wc provides UI components designed with input from the C2PA UX working group. It enables users to get up and running with standard UI patterns quickly and easily in any front-end environment.
  • @contentauth/react provides a hooks interface for React components to quickly get manifest and thumbnail data in your React app.

To learn how to use these libraries, see the Quick start.

Additionally, the library includes the following supporting packages that are not intended for separate use:

  • @cai/toolkit contains the WebAssembly module, data binding functions, and related build tools. The c2pa package consumes this library under the hood. The WebAssembly module handles manifest parsing and validation.
  • @cai/detector provides a high-performance binary scanner to quickly detect if C2PA manifest data exists in a file. The c2pa package also consumes this library.

Features​

Key features of the JavaScript library include:

  • Developer friendly: Full TypeScript support and robust debugging support using the debug library make integration easy.
  • Performance: The processing code of the library uses a high-performance WebAssembly binary. Additionally, the library offloads processing tasks to a configurable Web Worker pool to enable parallelization and avoid blocking a web application's main thread.
  • Lazy loading and processing: Since images can be quite large, the library inspects the start of an asset file for C2PA manifest data before requesting the entire file, if the server supports it. The library will download the rest of the asset only if it finds the metadata marker. Additionally, it delays loading the WebAssembly binary until it makes the first processing request.
  • Adherence to the C2PA specification: The library strives to maintain compliance with the C2PA specification as much as possible, and the web components follow the C2PA user experience guidance recommendations.
  • Security and encryption: The library handles all validation via the Web Crypto API and passes any validation errors back to the client. It supports all ECDSA and RSASSA-PSS algorithms listed in the C2PA specification.
    caution

    The JavaScript library does not currently support Ed25519 signatures.

  • Framework-agnostic: The UI components are Web Components that use the Lit library. Because of this, you can use them in React, Vue, Angular, Svelte, or even vanilla JavaScript.

Browser support​

The JavaScript library uses several modern browser technologies. Because of these requirements, the library is not supported on any version of Internet Explorer and on a few less-used mobile browsers. The chart below from caniuse.com summarizes the browsers and versions that support the library.

CAI JavaScript library browser support

info

This chart is accurate as of September, 2023. For the most up-to-date browser support information, see caniuse.com.

Debugging​

The JavaScript library uses the debug-js library to get debug-level information under the c2pa namespace.

To view debug messages in the console, use your browser's inspector, go to the Console tab, and enter:

localStorage.debug = 'c2pa:*';

The debuging information includes millisecond timing differences so you can get an idea of how long different events take.

note

Debug calls and statements are stripped out of minified production builds to reduce file size.

To turn off debugging, enter:

localStorage.debug = false;