@palm-tree/react

npm install @palm-tree/react

import { IssueReporter } from "@palm-tree/react";

<IssueReporter
  apiUrl="https://palm-tree.langstack.org/api"
  projectId="proj_2d8f910ab"
  sensitiveSelector="[data-palm-tree-sensitive]"
  captureWarning="Screenshots can contain information visible on this page."
/>

Use the optional authToken prop for a short-lived, project-scoped reporter token created by your trusted backend. See the repository README for the complete props and local example.

Users can capture the visible viewport or paste a PNG, JPEG, or WebP image into the initial report dialog. One image of up to 5 MiB can be attached; a new paste or capture replaces the previous attachment.

sensitiveSelector blocks element selection inside matching regions and omits those regions from screenshots. It defaults to Palm Tree sensitivity markers, form fields, editable content, Monaco, and Excalidraw. Mark an application region with data-palm-tree-sensitive when it can contain private user data. Pasted images are not automatically redacted.

The generated preview shows tags as GitHub labels. Users can add or remove tags before creating the issue; their reviewed selection is saved and submitted with the title and description.