BugHerd → Mushi Mushi

Hours Low risk

BugHerd’s signature feature is pixel-pin annotations: clients click on a part of a web page to attach a comment to that exact element. Mushi Mushi gives similar element-level context: in the web widget the reporter can pick an element, and the report records its tag, id / class, XPath and position, next to a screenshot they can mark up.

Mushi Mushi doesn’t replicate BugHerd’s Kanban task board. If your client-feedback workflow depends on the Kanban view, plan for a workflow change as well as a tool change.

Why switch

Open source. Mushi Mushi’s SDKs are MIT; its server and admin console are AGPLv3.
Self-host. Mushi Mushi runs on your own infrastructure.
AI triage. Mushi Mushi categorises and prioritises reports automatically, which helps when client feedback is noisy.
Developer context. Reports carry console and network logs, so a developer can often reproduce the bug without asking the client.

API mapping

BugHerd	Mushi Mushi
`<script src="bugherd.com/sidebarv2.js?apikey=...">`	`<script>` mounting `Mushi.init({ projectId, apiKey })`
Sidebar widget (always visible)	The Mushi Mushi launcher (by default a floating button on desktop, an edge tab on phones), opens on click
Element click → annotation	User opens the widget → picks an element, marks up the screenshot
`window.BugHerdConfig = { reporter: { email } }`	`mushi.setUser({ id, email, name })`
Project task board	Mushi Mushi admin console, Reports page
Hiding sensitive content from screenshots	Add `data-mushi-redact` to the element (or list selectors in `privacy.redactSelectors`)

Before / After


<!-- BEFORE — BugHerd -->
<script type="text/javascript">
  (function(d,t) {
    var bh = d.createElement(t); bh.async = true;
    bh.type = 'text/javascript';
    bh.src = 'https://www.bugherd.com/sidebarv2.js?apikey=YOUR_API_KEY';
    var s = d.getElementsByTagName(t)[0]; s.parentNode.insertBefore(bh, s);
  })(document, 'script');
</script>


<!-- AFTER — Mushi (web) -->
<script type="module">
  import { Mushi } from 'https://esm.sh/@mushi-mushi/web'
  const mushi = Mushi.init({
    projectId: 'YOUR_PROJECT_ID',
    apiKey:    'YOUR_PUBLIC_KEY',
  })  // default launcher: floating button on desktop, edge tab on phones
  // later, once you know the client: mushi.setUser({ id, email, name })
</script>

For React / Vue / Svelte / Next, use the framework-specific SDK instead.

Migration checklist

8 required steps

Step 01
Create a Mushi Mushi project
Step 02
Install or script-tag Mushi Mushi
Step 03
Add Mushi Mushi alongside BugHerd
Step 04
Mark sensitive elements with data-mushi-redact
Step 05
Wire client identity (mushi.setUser)
Step 06
Tell clients about the new widget
Step 07
Submit a test report from a real page
Step 08
Remove the BugHerd script + revoke the API key

Feature parity

Capability	BugHerd	Mushi Mushi
User-triggered report	✅	✅
Screenshot capture	✅	✅
Element context	✅ (pixel pin)	✅ (picked element: tag, id / class, XPath, position)
Console + network capture	not checked	✅
Sidebar / always-visible	✅	❌ (floating button)
Project Kanban board	✅	❌ (report inbox + filters)
Client guest accounts	✅	❌ (anonymous reports OK; named clients via `setUser`)
Visual annotations on screenshot	✅	✅ (highlight, blur, arrow; web)
Self-host	not checked	✅
AI triage	not checked	✅

If pinning comments to exact spots on the page is central to your client workflow, BugHerd is built around that and may suit you better.