What is DeadButton?

DeadButton helps you instantly find unused buttons, links, and UI elements in your web app. It visually highlights which parts of your interface are never clicked, so you can confidently clean up your product and make it simpler for everyone.

Why does this matter?

• Most apps collect clutter over time—old buttons, forgotten links, unused features.
• DeadButton shows you what’s safe to delete, with no setup, no dashboards, and no privacy worries.

How to Use DeadButton

DeadButton is designed to be as simple as possible. You enable it once in your dev or staging environment, then use your app as usual. DeadButton highlights unused UI directly on your page—no dashboards, no backend, no config.

1. Use via CDN (easiest)

Add this to your app (dev or staging only):

<script src="https://unpkg.com/deadbutton/dist/deadbutton.min.js"></script>
<script>
  DeadButton.enable();
</script>

2. Use via npm (for modern projects)

Install:

npm install deadbutton

Import and enable:

import { DeadButton } from "deadbutton";

if (process.env.NODE_ENV !== "production") {
  DeadButton.enable();
}

What happens after enabling?

• Use your app normally—click buttons, navigate, test features.
• DeadButton highlights clickable elements:
  • 🔴 Red: never clicked
  • 🟡 Yellow: low usage
  • 🟢 Green: frequently used
• A summary panel appears (bottom-right) showing dead/low-usage elements and top delete candidates.

Exporting data: Click "Export Report" in the panel to download a JSON file of usage stats. Attach this to Jira, PRs, or docs as needed.

Disable or reset:

DeadButton.disable(); // Hide overlay
DeadButton.reset();   // Clear collected data
DeadButton.report();  // Get raw data

...existing code...

• Safe for dev/staging (don’t run in prod!)

Secondary goals:

• Tiny bundle size
• Works with any framework
• Easy to rip out if you change your mind
• Easy to understand (read the code, audit it, hack it)

4. How DeadButton Works

DeadButton operates in four steps:

1. Detects clickable elements in the DOM
2. Observes click interactions via event delegation
3. Aggregates interaction counts locally in the browser
4. Visually annotates elements based on usage

All processing happens client-side.

No data is transmitted externally unless an optional backend is explicitly added by the user.

How DeadButton Is Intended to Be Used

DeadButton is not an end-user feature and is not meant to be operated manually via the browser console.

It is an internal product hygiene tool designed for development, QA, and product teams to evaluate UI relevance during normal application usage.

Important: DeadButton Is Passive by Design

Once enabled, DeadButton runs silently in the background.

There is no UI to “operate” and no workflow to learn.

Users of the product (including PMs and QA) do not interact with DeadButton directly. They simply use the application as they normally would.

DeadButton observes aggregate interaction patterns and annotates the UI accordingly.

Typical Team Workflow

Step 1: Enable DeadButton Once (Developer)

A developer enables DeadButton in development or staging environments.

This is typically done once during setup:

if (process.env.NODE_ENV !== "production") {
  DeadButton.enable();
}

No further interaction is required.

Step 2: Use the Application Normally (QA / PM)

Product managers, designers, and QA engineers use the application as they normally would:

• Navigate flows
• Click buttons
• Test features
• Review screens

No special actions are required.

DeadButton passively records anonymous interaction signals.

Step 3: Visual Review (Decision Point)

At any point, the UI itself communicates the result:

What is DeadButton?

DeadButton helps you instantly find unused buttons, links, and UI elements in your web app. It visually highlights which parts of your interface are never clicked, so you can confidently clean up your product and make it simpler for everyone.

Why does this matter?

• Most apps collect clutter over time—old buttons, forgotten links, unused features.
• DeadButton shows you what’s safe to delete, with no setup, no dashboards, and no privacy worries.

How to Use DeadButton

DeadButton is designed to be as simple as possible. You enable it once in your dev or staging environment, then use your app as usual. DeadButton highlights unused UI directly on your page—no dashboards, no backend, no config.

1. Use via CDN (easiest)

Add this to your app (dev or staging only):

<script src="https://unpkg.com/deadbutton/dist/deadbutton.min.js"></script>
<script>
  DeadButton.enable();
</script>

2. Use via npm (for modern projects)

Install:

npm install deadbutton

Import and enable:

import { DeadButton } from "deadbutton";

if (process.env.NODE_ENV !== "production") {
  DeadButton.enable();
}

What happens after enabling?

• Use your app normally—click buttons, navigate, test features.
• DeadButton highlights clickable elements:
  • 🔴 Red: never clicked
  • 🟡 Yellow: low usage
  • 🟢 Green: frequently used
• A summary panel appears (bottom-right) showing dead/low-usage elements and top delete candidates.

Exporting data: Click "Export Report" in the panel to download a JSON file of usage stats. Attach this to Jira, PRs, or docs as needed.

Disable or reset:

DeadButton.disable(); // Hide overlay
DeadButton.reset();   // Clear collected data
DeadButton.report();  // Get raw data

What is DeadButton for?

Use it for:

• Cleaning up unused UI
• Validating old buttons/links
• Reducing UI clutter
• Supporting delete decisions

Not for:

• Production analytics
• Funnels/conversions
• Tracking real users

DeadButton is for dev/staging only.

See it in Action

Live Demo on Netlify

The score is expressed as a percentage.

This score is intended as guidance, not an automated decision.

12. API Reference

DeadButton.enable()

Starts tracking interactions and renders the overlay.

DeadButton.disable()

Stops tracking and removes all visual annotations.

DeadButton.reset()

Clears all locally stored interaction data.

DeadButton.report()

Returns a structured JSON report containing interaction statistics for all detected elements.

13. Chrome DevTools Extension

DeadButton can optionally be used via a Chrome DevTools extension.

Features:

• Toggle DeadButton without modifying application code
• View a list of dead and low-usage elements
• Export interaction reports

The extension does not inject code into production builds.

14. Performance Characteristics

DeadButton is designed to have minimal impact on runtime performance.

• Single delegated click listener
• Lightweight DOM traversal
• No polling
• No network requests

Bundle size is intentionally kept small to avoid impacting page load.

15. Browser Compatibility

DeadButton supports all modern evergreen browsers:

• Chrome
• Edge
• Firefox
• Safari

Internet Explorer is not supported.

16. Development and Build

Clone the repository.

git clone https://github.com/nileshkr17/DeadButton.git
cd DeadButton

Install dependencies.

npm install

Build the project.

npm run build

Run the demo.

npm run demo

17. Roadmap

Planned future enhancements include:

• Detection of unused modals
• Detection of unused tabs and dropdown options
• Exportable reports (JSON and CSV)
• Optional backend aggregation for teams
• CI integration for UI regression checks

No timelines are guaranteed.

18. Contributing

Contributing

PRs, issues, and ideas are super welcome! If you love deleting dead UI, you’re in the right place.

Guidelines:

• Keep changes focused and simple
• No analytics, no tracking, no config bloat
• Make it work everywhere
• Explain your intent (tell us why!)

All PRs should have a short note about what you’re fixing or improving. We love clean code and good vibes.

Made with care by devs who hate clutter.

19. License

DeadButton is released under the MIT License.

See the LICENSE file for details.