@commentlayer/sdk

Vanilla TypeScript SDK for adding CommentLayer to any website or prototype.

It supports:

• Comment layer: Figma-style pins, threads, replies, and resolved state.
• Guided layer: participant name, optional screeners, tasks, done/stuck, and follow-up questions.
• Shadow DOM UI isolation.
• Script tag or npm import.

Install

npm install @commentlayer/sdk

npm usage

import { initCommentLayer } from "@commentlayer/sdk";

initCommentLayer({
  sessionToken: "pub_xxx",
  apiBaseUrl: "https://your-commentlayer-app.com"
});

Use a side-panel guided runner:

initCommentLayer({
  sessionToken: "pub_xxx",
  apiBaseUrl: "https://your-commentlayer-app.com",
  guidedPlacement: "panel"
});

Script tag usage

<script
  src="https://your-commentlayer-app.com/sdk/commentlayer.iife.js"
  data-session-token="pub_xxx"
  async
></script>

Side-panel guided runner:

<script
  src="https://your-commentlayer-app.com/sdk/commentlayer.iife.js"
  data-session-token="pub_xxx"
  data-guided-placement="panel"
  async
></script>

Options

type CommentLayerOptions = {
  sessionToken: string;
  apiBaseUrl?: string;
  guidedPlacement?: "overlay" | "panel";
};

Build

npm run build

The package emits:

• dist/index.js for ESM
• dist/index.cjs for CommonJS
• dist/index.d.ts for TypeScript
• dist/commentlayer.iife.js for script tags/CDNs