New JS library, deprecate old one

crandmck · crandmck · commit 315253439a01 · 2025-09-16T16:12:05.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,8 @@
 /docs/js-sdk/examples/quickstart/*.ts
 /docs/js-sdk/examples/view-manifest/*.ts
 /docs/js-sdk/examples/view-manifest/*.html
+/docs/c2pa-js/*.md
+/docs/c2pa-js/docs/*.md
 /docs/c2patool/*.md
 /docs/c2patool/docs/*.md
 /docs/c2pa-node/*.md
diff --git a/docs/c2pa-js/.gitkeep b/docs/c2pa-js/.gitkeep
diff --git a/docs/js-sdk/deprecation-notice.md b/docs/js-sdk/deprecation-notice.md
@@ -0,0 +1,5 @@
+:::warning
+The legacy JavaScript library is deprecated and the repository has been renamed to [c2pa-js-legacy](https://github.com/contentauth/c2pa-js-legacy).  The new JavaScript web library is now in the <https://github.com/contentauth/c2pa-js> repository. The old package will no longer be updated or supported.
+
+If you're starting a new application, use the new library instead.
+:::
diff --git a/docs/js-sdk/getting-started/architecture.mdx b/docs/js-sdk/getting-started/architecture.mdx
@@ -5,6 +5,9 @@ hide_table_of_contents: true
 ---
 
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
 
 :::tip
 Zoom in by double-clicking or scrolling with your mouse or trackpad. Move the diagram by clicking and dragging.
diff --git a/docs/js-sdk/getting-started/overview.mdx b/docs/js-sdk/getting-started/overview.mdx
@@ -1,8 +1,12 @@
 ---
-id: overview
-title: JavaScript library
+id: old-js-overview
+title: Legacy JavaScript library
 ---
 
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
+
 The CAI JavaScript library (sometimes referred to as the "JavaScript SDK") enables client JavaScript applications to view and verify [C2PA](https://c2pa.org/) data. It performs only **read** operations on C2PA manifests, unlike the [Rust library](../../rust-sdk/), and the [prerelease libraries](../../other-langs) which can both read and write manifests.
 
 ## What you should already know
diff --git a/docs/js-sdk/getting-started/quick-start.mdx b/docs/js-sdk/getting-started/quick-start.mdx
@@ -5,6 +5,9 @@ title: Quick start
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
 
 ## Prerequisites
 
diff --git a/docs/js-sdk/guides/examples.mdx b/docs/js-sdk/guides/examples.mdx
@@ -3,23 +3,27 @@ id: examples
 title: JavaScript examples
 ---
 
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
+
 JavaScript examples are in **[contentauth/c2pa-js-examples](https://github.com/contentauth/c2pa-js-examples)**. The examples are mirrored from the [examples directory in the contentauth/c2pa-js repository](https://github.com/contentauth/c2pa-js/tree/main/examples).
 
 :::note
 As noted in the [overview](../getting-started/overview#technologies-that-the-library-uses), the JavaScript library uses a number of modern JavaScript technologies such as WebAssembly (Wasm) and Web Workers. To understand the JavaScript examples, you should be familiar with these technologies, [TypeScript](https://www.typescriptlang.org/) and at least one bundler tool such as [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), or [Vite](https://vitejs.dev/).
 :::
 
-Additionally, the JavaScript examples use TypeScript for type safety. 
+Additionally, the JavaScript examples use TypeScript for type safety.
 
 ## Examples
 
-| Example | Tooling | UI framework | Notes |
-|---------|------------------------|--------------|-------|
-| [esm-imports](https://github.com/contentauth/c2pa-js/tree/main/examples/esm-imports) | None | None | The simplest example using vanilla JavaScript (ECMAScript).|
-| [minimal-ts-webpack](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-webpack) |  [Webpack](https://webpack.js.org/) | None | Uses TypeScript. |
-| [minimal-ts-rollup](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-rollup) | [Rollup](https://rollupjs.org/)  | None | Uses TypeScript. |
-| [minimal-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-vite) | [Vite](https://vitejs.dev/)| None | Uses TypeScript.<br/>Includes multiple examples; see [below](#examples-in-minimal-ts-vite). |	
-| [react-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/react-ts-vite) | [Vite](https://vitejs.dev/) | [React](https://react.dev/) | Uses TypeScript. |
+| Example                                                                                            | Tooling                            | UI framework                | Notes                                                                                       |
+| -------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------- |
+| [esm-imports](https://github.com/contentauth/c2pa-js/tree/main/examples/esm-imports)               | None                               | None                        | The simplest example using vanilla JavaScript (ECMAScript).                                 |
+| [minimal-ts-webpack](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-webpack) | [Webpack](https://webpack.js.org/) | None                        | Uses TypeScript.                                                                            |
+| [minimal-ts-rollup](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-rollup)   | [Rollup](https://rollupjs.org/)    | None                        | Uses TypeScript.                                                                            |
+| [minimal-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/minimal-ts-vite)       | [Vite](https://vitejs.dev/)        | None                        | Uses TypeScript.<br/>Includes multiple examples; see [below](#examples-in-minimal-ts-vite). |
+| [react-ts-vite](https://github.com/contentauth/c2pa-js/tree/main/examples/react-ts-vite)           | [Vite](https://vitejs.dev/)        | [React](https://react.dev/) | Uses TypeScript.                                                                            |
 
 ### Minimal-ts-vite examples
 
@@ -29,5 +33,4 @@ The `minimal-ts-vite` example directory contains these examples:
 - cdn: Illustrates loading the JavaScript library from a content delivery network (CDN).
 - check-provenance: Illustrates how to determine whether asset files have provenance.
 - quick-start: Dumps the manifest store and active manifest to the JavaScript developer console.
-- web-components: Displays a test image with the Content Credentials pin, using c2pa-wc 
-
+- web-components: Displays a test image with the Content Credentials pin, using c2pa-wc
diff --git a/docs/js-sdk/guides/hosting.mdx b/docs/js-sdk/guides/hosting.mdx
@@ -3,6 +3,10 @@ id: hosting
 title: Hosting C2PA assets
 ---
 
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
+
 ## Cross-origin (CORS) support
 
 Processing images from a URL or DOM selector requires the
diff --git a/docs/js-sdk/guides/selectors.mdx b/docs/js-sdk/guides/selectors.mdx
@@ -3,6 +3,10 @@ id: selectors
 title: Selectors
 ---
 
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
+
 [Selectors](https://github.com/contentauth/c2pa-js/tree/main/packages/c2pa/src/selectors) are convenience functions that return useful data from manifest objects. The selector functions are:
 
 - [`selectEditsAndActivity`](../../js-sdk/api/c2pa.selecteditsandactivity) - Returns a formatted list of manifest edits and activity.
@@ -42,19 +46,19 @@ The result is an `editsAndActivity` object such as this:
     id: 'COLOR_ADJUSTMENTS',
     icon: 'https://cai-assertions.adobe.com/icons/color-palette-dark.svg',
     label: 'Color adjustments',
-    description: 'Changed tone, saturation, etc.'
+    description: 'Changed tone, saturation, etc.',
   },
   {
     id: 'IMPORT',
     icon: 'https://cai-assertions.adobe.com/icons/import-dark.svg',
     label: 'Imported assets',
-    description: 'Added images, videos, etc.'
+    description: 'Added images, videos, etc.',
   },
   {
     id: 'TRANSFORM',
     icon: 'https://cai-assertions.adobe.com/icons/group-dark.svg',
     label: 'Size and position adjustments',
-    description: 'Changed size, orientation, direction, or position'
-  }
-]
+    description: 'Changed size, orientation, direction, or position',
+  },
+];
 ```
diff --git a/docs/js-sdk/guides/validation.mdx b/docs/js-sdk/guides/validation.mdx
@@ -3,6 +3,10 @@ id: validation
 title: Validation & errors
 ---
 
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
+
 Part of processing an asset involves [validating the manifests](https://c2pa.org/specifications/specifications/1.4/specs/C2PA_Specification.html#_validation) that it contains. During validation, errors can occur in the active manifest and in ingredients.
 
 ## Validation errors in the active manifest
diff --git a/docs/js-sdk/guides/viewing-provenance.mdx b/docs/js-sdk/guides/viewing-provenance.mdx
@@ -3,6 +3,10 @@ id: viewing-manifest-data
 title: Viewing manifest data
 ---
 
+import Deprecation from '../deprecation-notice.md';
+
+<Deprecation name="deprecation" />
+
 ## Initializing the library
 
 The way that you import `wasmSrc` and `workerSrc` varies depending on the build system you use. For more information, see [Quick start](../getting-started/quick-start#bringing-in-the-library).
diff --git a/docs/js-sdk/js-landing.md b/docs/js-sdk/js-landing.md
@@ -0,0 +1,6 @@
+---
+id: js-landing
+title: JavaScript library
+---
+
+A new JavaScript library has been released.  You can continue to [install and use the old library](getting-started/quick-start.mdx) the same was as before (for example, with `npm install c2pa`) but you're encouraged to move to the new library.  The old library will continue to be available [along with its documentation](getting-started/overview.mdx).
diff --git a/docs/js-sdk/sidebars.js b/docs/js-sdk/sidebars.js
@@ -2,43 +2,68 @@ const api = require('./api/api-sidebar');
 
 const sidebars = {
   docs: [
-    {
-      type: 'doc',
-      label: 'Quick start',
-      id: 'js-sdk/getting-started/quick-start',
-    },
-    {
-      type: 'doc',
-      label: 'Examples',
-      id: 'js-sdk/guides/examples',
-    },
-    {
-      type: 'doc',
-      label: 'Architecture',
-      id: 'js-sdk/getting-started/architecture',
-    },
-    {
-      type: 'doc',
-      label: 'Hosting assets',
-      id: 'js-sdk/guides/hosting',
-    },
     {
       type: 'category',
-      label: 'Viewing manifest data',
-      link: { type: 'doc', id: 'js-sdk/guides/viewing-manifest-data' },
-      items: ['js-sdk/guides/selectors', 'js-sdk/guides/validation'],
-      collapsed: true,
+      label: 'New JavaScript library',
+      link: { type: 'doc', id: 'js-sdk/js-lib-v2' },
+      items: [
+        {
+          type: 'doc',
+          label: 'C2PA web library',
+          id: 'c2pa-js/readme',
+        },
+        {
+          type: 'link',
+          label: 'GitHub',
+          href: 'https://github.com/contentauth/c2pa-js',
+        },
+      ],
     },
     {
       type: 'category',
-      label: 'API documentation',
-      items: api('js-sdk/api'),
+      label: 'Legacy JavaScript library',
+      link: { type: 'doc', id: 'js-sdk/getting-started/old-js-overview' },
       collapsed: true,
-    },
-    {
-      type: 'link',
-      label: 'GitHub',
-      href: 'https://github.com/contentauth/c2pa-js',
+      items: [
+        {
+          type: 'doc',
+          label: 'Quick start',
+          id: 'js-sdk/getting-started/quick-start',
+        },
+        {
+          type: 'doc',
+          label: 'Examples',
+          id: 'js-sdk/guides/examples',
+        },
+        {
+          type: 'doc',
+          label: 'Architecture',
+          id: 'js-sdk/getting-started/architecture',
+        },
+        {
+          type: 'doc',
+          label: 'Hosting assets',
+          id: 'js-sdk/guides/hosting',
+        },
+        {
+          type: 'category',
+          label: 'Viewing manifest data',
+          link: { type: 'doc', id: 'js-sdk/guides/viewing-manifest-data' },
+          items: ['js-sdk/guides/selectors', 'js-sdk/guides/validation'],
+          collapsed: true,
+        },
+        {
+          type: 'category',
+          label: 'API documentation',
+          items: api('js-sdk/api'),
+          collapsed: true,
+        },
+        {
+          type: 'link',
+          label: 'GitHub',
+          href: 'https://github.com/contentauth/c2pa-js-legacy',
+        },
+      ],
     },
   ],
 };
diff --git a/docs/js-sdk/temp-new-sdk.md b/docs/js-sdk/temp-new-sdk.md
@@ -0,0 +1,12 @@
+---
+id: js-lib-v2
+title: New JavaScript library
+---
+
+There is a new [JavaScript web library](https://github.com/contentauth/c2pa-js/tree/main/packages/c2pa-web) for applications that run in a web browser environment.
+
+We are working on adding documentation.  Please bear with us!
+
+:::note
+The old JavaScript client library is deprecated, but its documentation is still available in the [Legacy JavaScript library documentation](old-js-overview).  You can continue to use it, but it will no longer be updated or supported.
+:::
diff --git a/scripts/fetch-readme.js b/scripts/fetch-readme.js
@@ -25,18 +25,18 @@ const readmes = [
       __dirname,
       '../docs/js-sdk/examples/view-manifest/index.html',
     ),
-    repo: 'contentauth/c2pa-js',
+    repo: 'contentauth/c2pa-js-legacy',
     path: 'examples/minimal-ts-vite/examples/active-manifest/index.html',
   },
   {
     dest: resolve(__dirname, '../docs/js-sdk/examples/view-manifest/main.ts'),
-    repo: 'contentauth/c2pa-js',
+    repo: 'contentauth/c2pa-js-legacy',
     path: 'examples/minimal-ts-vite/examples/active-manifest/main.ts',
   },
   // Vite Quickstart
   {
     dest: resolve(__dirname, '../docs/js-sdk/examples/quickstart/vite-main.ts'),
-    repo: 'contentauth/c2pa-js',
+    repo: 'contentauth/c2pa-js-legacy',
     path: 'examples/minimal-ts-vite/examples/cdn/main.ts',
   },
   // Rollup Quickstart
@@ -45,7 +45,7 @@ const readmes = [
       __dirname,
       '../docs/js-sdk/examples/quickstart/rollup-main.ts',
     ),
-    repo: 'contentauth/c2pa-js',
+    repo: 'contentauth/c2pa-js-legacy',
     path: 'examples/minimal-ts-rollup/src/main.ts',
   },
   // WebPack Quickstart
@@ -54,10 +54,15 @@ const readmes = [
       __dirname,
       '../docs/js-sdk/examples/quickstart/webpack-main.ts',
     ),
-    repo: 'contentauth/c2pa-js',
+    repo: 'contentauth/c2pa-js-legacy',
     path: 'examples/minimal-ts-webpack/src/index.ts',
   },
-
+  // New JavaScript SDK (9/16/2025)
+  {
+    dest: resolve(__dirname, '../docs/c2pa-js/readme.md'),
+    repo: 'contentauth/c2pa-js',
+    path: 'packages/c2pa-web/README.md',
+  },
   // c2patool
   {
     dest: resolve(__dirname, '../docs/c2patool/readme.md'),
diff --git a/sidebars.js b/sidebars.js
@@ -123,7 +123,7 @@ const sidebars = {
     {
       type: 'category',
       label: 'JavaScript library',
-      link: { type: 'doc', id: 'js-sdk/getting-started/overview' },
+      link: { type: 'doc', id: 'js-sdk/getting-started/old-js-overview' },
       collapsed: true,
       items: jsSdkSidebar.docs,
     },
