https://github.com/mean-weasel/bugdrop
In-app feedback → GitHub Issues. Screenshots, annotations, the works.
https://github.com/mean-weasel/bugdrop
bug-reporting feedback-widget github-app in-app-feedback
Last synced: 18 days ago
JSON representation
In-app feedback → GitHub Issues. Screenshots, annotations, the works.
- Host: GitHub
- URL: https://github.com/mean-weasel/bugdrop
- Owner: mean-weasel
- License: mit
- Created: 2025-12-19T20:30:11.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-06-05T13:13:24.000Z (20 days ago)
- Last Synced: 2026-06-05T15:06:55.861Z (20 days ago)
- Topics: bug-reporting, feedback-widget, github-app, in-app-feedback
- Language: TypeScript
- Homepage: https://bugdrop.dev/
- Size: 1.38 MB
- Stars: 28
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# BugDrop 🐛
[](https://github.com/mean-weasel/bugdrop/actions/workflows/ci.yml)
[](./CHANGELOG.md)
[](./SECURITY.md)
[](https://bugdrop-widget-test.vercel.app)
[](https://github.com/marketplace/bugdrop-in-app-feedback-to-github-issues)
[](https://www.producthunt.com/products/bugdrop-2?utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-bugdrop-2)
In-app feedback → GitHub Issues. Screenshots, annotations, the works.
Featured on Product Hunt and ranked #6 Product of the Day on May 9, 2026.
## Quick Start
> Works with both public and private repositories!
**1. Install the GitHub App** on your repository:
https://github.com/marketplace/bugdrop-in-app-feedback-to-github-issues
**2. Add the script** to your website:
```html
```
That's it! Users can now click the bug button to submit feedback as GitHub Issues.
> **Important:** Do not add `async` or `defer` to the script tag — the widget needs synchronous loading to read its configuration.
> **CSP note:** If your site uses a Content Security Policy, add `https://bugdrop.neonwatty.workers.dev` to your `script-src` directive to enable the widget.
> **Branch protection:** BugDrop works with repos that have branch protection rules (required PRs, merge queues). Screenshots are stored on a dedicated `bugdrop-screenshots` branch that is auto-created on first use — no manual setup needed.
> **Security note:** BugDrop is not a spam or malware filtering service. Treat feedback and screenshots as unauthenticated user-generated content. Exclude `bugdrop-screenshots` from CI/deploy workflows, and self-host behind your own WAF/CAPTCHA/content controls for stricter environments.
## Features
- 🔒 **Privacy masking** — tag sensitive elements with `data-bugdrop-mask` and BugDrop visually covers them in supported screenshot modes before submission. Passwords and credit-card inputs are masked automatically.
## Widget Options
| Attribute | Values | Default |
| ------------------------------- | ---------------------------------------------------- | ---------------- |
| `data-repo` | `owner/repo` | **required** |
| `data-theme` | `light`, `dark`, `auto` | `auto` |
| `data-position` | `bottom-right`, `bottom-left` | `bottom-right` |
| `data-color` | Accent color for buttons/highlights (e.g. `#FF6B35`) | `#14b8a6` (teal) |
| `data-label` | Any string | `Feedback` |
| `data-category-labels` | JSON mapping for self-hosted category labels | built-in labels |
| `data-button` | `true`, `false` | `true` |
| `data-element-context-max-area` | Viewport-area multiplier for Select Element context | `0` |
See [full documentation](https://bugdrop.dev/docs/configuration) for all options including styling, submitter info, and dismissible button.
## Documentation
- [Full Documentation](https://bugdrop.dev/docs)
- [GitHub Marketplace](https://github.com/marketplace/bugdrop-in-app-feedback-to-github-issues)
- [Configuration](https://bugdrop.dev/docs/configuration)
- [Styling](https://bugdrop.dev/docs/styling)
- [JavaScript API](https://bugdrop.dev/docs/javascript-api)
- [Version Pinning](https://bugdrop.dev/docs/version-pinning)
- [CI Testing](https://bugdrop.dev/docs/ci-testing)
- [Security & Rate Limiting](https://bugdrop.dev/docs/security)
- [Self-Hosting](https://bugdrop.dev/docs/self-hosting)
- [FAQ](https://bugdrop.dev/docs/faq)
## How It Works
```
User clicks bug button → Widget captures screenshot → Worker authenticates via GitHub App → Issue created in your repo
```
1. **Widget** loads in a Shadow DOM (isolated from your page styles)
2. **Screenshot** captured client-side using html-to-image
3. **Worker** (Cloudflare) exchanges GitHub App credentials for an installation token
4. **GitHub API** creates the issue with the screenshot stored in `.bugdrop/` on a dedicated `bugdrop-screenshots` branch (auto-created on first use)
## Live Demo
Try it on [WienerMatch](https://bugdrop-widget-test.vercel.app) — click the bug button in the bottom right corner.
## License
MIT