BugPin is a self-hosted, open-source visual bug reporting tool that lets teams capture annotated screenshots, collect diagnostic metadata, and triage bug reports from web applications running on their own servers.

What it is

BugPin is a TypeScript application, licensed under AGPL-3.0, that provides two halves of a bug reporting workflow: an embeddable widget that runs inside a web application, and an Admin Console that receives, triages, and forwards what the widget captures. The widget works with React, Vue, Angular, Svelte, or vanilla JavaScript, and can be added either with a single script tag or through the @arantic/bugpin-widget npm package for bundlers such as Vite and webpack. Reports arrive in the Admin Console, which supports multiple projects, each with its own API key, and ships with light and dark themes.

The concrete problem it solves is the manual loop that normally surrounds a bug report: a user takes a screenshot, describes what happened, and pastes both into a tracker by hand, usually losing the network responses and console errors that explain the failure. BugPin replaces that with an in-page widget that captures the screenshot, lets the reporter annotate it with pen, shapes, arrows, text, or a privacy blur, and automatically attaches failed network requests, console errors, and OS, browser, and device information. The result is a single structured report rather than an incomplete pasted description.

Key capabilities

• Widget embeds with a single script tag and works across React, Vue, Angular, Svelte, and vanilla JavaScript, or via the @arantic/bugpin-widget npm package.
• Shadow DOM isolation keeps widget styles out of the host site and host CSS out of the widget.
• Annotation tools include pen, shapes, arrows, text, and privacy blur.
• Automated metadata collection captures failed network requests (4xx, 5xx), console errors, and OS, browser, and device information.
• Offline support buffers reports locally and syncs them when the connection returns.
• Export diagnostics as Markdown, plain text, an AI prompt, or JSON, with section toggles and redactions.
• Multi-project management with separate API keys, GitHub Issues forwarding, and security options including domain whitelists, configurable rate limiting, HSTS, and secure headers.

Who uses it and how

• Teams that must keep bug report data on their own servers deploy the single container and route the widget at their own host.
• Organizations running several web applications use the multi-project model with a separate API key per project.
• Teams already working in GitHub forward reports into GitHub Issues instead of maintaining a separate queue.
• Products with users on unreliable connections rely on local buffering and later sync.
• International products use the widget and reporter emails in eight languages (English, German, French, Dutch, Spanish, Italian, Japanese, Simplified Chinese) with automatic detection and per-project language settings.

Getting started

Run the published image registry.arantic.cloud/bugpin/bugpin:latest through a docker-compose.yml file or a plain docker run with port 7300 published and a volume mounted at /data, then sign in to the Admin Console and change the default password. Front-end integration is either a script tag before the closing body tag or npm install @arantic/bugpin-widget followed by BugPin.init with an API key and a serverUrl.

How it compares

No competing products are named in the facts for this entry, so BugPin stands alone in this registry as a self-hosted visual bug reporting tool. Its distinguishing trait within that space is that the capture widget, the storage, and the triage console are all part of one AGPL-3.0 self-hosted package rather than a client that reports to someone else's servers.

When to use it — and when not to

A self-hoster must operate the container and persist the /data volume, and the default [email protected] credentials must be changed immediately after the first login. Teams that want no infrastructure to run, or that cannot accept AGPL-3.0 copyleft terms, should look elsewhere before adopting it. The project is also young and small, with 38 stars, 11 forks, and 7 open issues, so anyone depending on it should judge the maintainer's release cadence for themselves.

services:
  bugpin:
    image: registry.arantic.cloud/bugpin/bugpin:latest
    container_name: bugpin
    restart: unless-stopped
    ports:
      - '7300:7300'
    volumes:
      - ./data:/data

# Start BugPin
docker compose up -d

# Run BugPin container
docker run -d \
  --name bugpin \
  --restart unless-stopped \
  -p 7300:7300 \
  -v bugpin-data:/data \
  registry.arantic.cloud/bugpin/bugpin:latest

<!-- Start of BugPin Widget -->
<script src="http://localhost:7300/widget.js" data-api-key="YOUR_API_KEY"></script>
<!-- End of BugPin Widget -->

npm install @arantic/bugpin-widget

import BugPin from '@arantic/bugpin-widget';

await BugPin.init({
  apiKey: 'YOUR_API_KEY',
  serverUrl: 'http://localhost:7300',
});