Configuring Pindrop.js

Pass options to Pindrop.init()

typescript
const pindrop = Pindrop.init({
  user?: { name: string }         // Pre-set user name (skips name prompt)
  zIndex?: number                  // Base z-index (default: 10000)
  theme?: 'auto' | 'light' | 'dark' // Theme (default: 'auto')
  readOnly?: boolean               // Disable commenting (default: false)
  position?: 'left' | 'right'     // Sidebar side (default: 'right')
  storageKey?: string              // localStorage key prefix (default: 'pindrop')
  adapter?: PindropAdapter         // Custom storage backend
  getScope?: (el: Element) => unknown  // Returns scope metadata for clicked element
  isScopeActive?: (scope: unknown) => boolean // Whether a scope is currently visible
})

Options

user

Pre-populates the author name. If omitted, Pindrop prompts the user on their first comment.

zIndex

Base z-index for the overlay. Increase if your page has high z-index elements that cover the toolbar.

theme

  • 'auto' — follows OS dark/light preference
  • 'light' — always light
  • 'dark' — always dark

readOnly

When true, existing pins are visible but no new pins can be created. Useful for sharing review sessions.

adapter

See Adapters for the full interface and a Supabase example.

getScope / isScopeActive

Used to scope comments to specific views or routes in a single-page app. Return a scope identifier from getScope, then return true from isScopeActive when that scope is currently rendered.

typescript
Pindrop.init({
  getScope: (el) => el.closest('[data-view]')?.dataset.view ?? null,
  isScopeActive: (scope) => document.querySelector(`[data-view="${scope}"]`) !== null,
})

Last updated March 28, 2026