Install the SDK

AppNotes has a browser runtime and a thin React adapter. Both support explicit local and connected modes. Image capture is packaged with the SDK; you do not install a separate renderer or write a capture function.

Framework-neutral JavaScript

npm i @plannotator/appnotes

yarn add @plannotator/appnotes

pnpm add @plannotator/appnotes

bun add @plannotator/appnotes

import { createAppNotes } from "@plannotator/appnotes";

const appNotes = createAppNotes({ mode: "local" });
await appNotes.mount();

For connected mode, register the Site first and supply its ID:

const appNotes = createAppNotes({
  mode: "connected",
  siteId: "ansite_01K00000000000000000000000",
});

await appNotes.mount();

React

npm i @plannotator/appnotes @plannotator/appnotes-react

yarn add @plannotator/appnotes @plannotator/appnotes-react

pnpm add @plannotator/appnotes @plannotator/appnotes-react

bun add @plannotator/appnotes @plannotator/appnotes-react

import { AppNotesLocal } from "@plannotator/appnotes-react";

export function App() {
  return <AppNotesLocal />;
}

import { AppNotesConnected } from "@plannotator/appnotes-react";

export function App() {
  return <AppNotesConnected siteId="ansite_01K00000000000000000000000" />;
}

Runtime behavior

• Local mode identifies no user and stores notes and images only in the current browser. It does not contact the AppNotes service.
• Connected mode requires an exact Site ID and a short-lived launch credential.
• Connected mode never reads or uploads local notes.
• The UI is isolated in Shadow DOM so the host application’s CSS does not become an integration contract.
• Removing or disabling the integration removes the annotation UI without changing the host application’s content.

Automatic images

When a reviewer selects an element, AppNotes prepares an image automatically. The SDK loads its packaged SnapDOM renderer only when needed. Normal visitors to a connected Site do not trigger image capture.

The default Selected area image includes the visible target and nearby context. Visible page captures the current viewport, not the entire scrollable page. The reviewer can remove the image or save a comment when capture is unavailable.

Capture reconstructs the DOM and styles. It is not a browser screenshot and does not guarantee exact pixels. See image behavior and limitations.

To disable capture for an installation, set capture: "off". This applies to local and connected modes:

const appNotes = createAppNotes({
  mode: "connected",
  siteId: "ansite_01K00000000000000000000000",
  capture: "off",
});

await appNotes.mount();

The React adapters accept the same option:

<AppNotesConnected
  siteId="ansite_01K00000000000000000000000"
  capture="off"
/>

For a CDN installation, add data-appnotes-capture="off" to the AppNotes script element. Keep the complete distribution, including its lazy capture assets, when you copy or serve the SDK yourself. Pin all assets to the same release.

Disabling capture does not disable comments or their element context. Mark sensitive regions separately as described in Security and privacy.

Content Security Policy

Use a package-manager installation when your app has a build pipeline. For CDN installs, pin an exact version and allow its origin in script-src. Connected mode also needs the AppNotes API origin in connect-src.

Capture can load SDK assets and fetch page fonts and images again, including in local mode. These requests follow CSP and CORS. AppNotes does not use a proxy to bypass blocked resources or send credentials to other origins.

Image reconstruction uses data images; previews use blob URLs. A policy that blocks these can prevent capture or preview display. Blocked fonts or images can reduce fidelity. Test with your deployed policy; do not remove security restrictions just to enable capture. Comments remain usable without an image.