OPEN SOURCE · SELF-OWNED BEHAVIOR ANALYTICS

Find the friction.
Keep the evidence.

A small React collector. A thoughtful inspection desk.
Understand where people get stuck, with data that stays in your database.

Open the live demo Add to your app →
npm install react-clickmap @react-clickmap/dashboardMIT licensed. No required vendor backend.
React 18 + 19Next.js App RouterYour PostgresPortable evidence
WORKING DEMO / NO ACCOUNT NEEDED

From a click to a clearer decision.

24 synthetic sessions. Illustrative signals, not real visitors.

FIELDNOTES

A little space for
your next big idea.

Save the research. Gather your team.
Make something worth sharing.

THE STUDIO PLAN$12 / month
  • Unlimited notes and collections
  • A shared space for your team
  • Simple, beautiful exports

Compare plans ↗

This sample text looks clickable but has no action. Click it to create a dead-click signal.
Clickmap Studio / Local evidence

Inspection desk

See the interaction. Understand the limits. Keep your data.

Synthetic sample
0Captured event records
0Observed sessions
0Dead-click signals
0Rage-click signals

Your first event starts here.

Adjust filters or enable capture, interact with the page, then refresh. Check consent and browser privacy signals if nothing arrives.

Read this evidence correctly
  • Sessions count captured interactions, not all visitors.
  • Scroll reach uses session + route + layout maxima, not distinct pageviews.
  • Dead/rage clicks are heuristic signals, not verified failures.
  • Exports may contain application-provided path/target names; review before sharing.
  • Small sample: fewer than 30 observed sessions. No causal conclusions.

Overlay coordinates describe the captured layout. Filter to one revision and device; an overlay cannot reconstruct a different page.

Payload and setup diagnostics

Project: demo · Collector → adapter → cohort → evidence. No data leaves this component except through your adapter or an export you request.

{
  "status": "No event received",
  "checks": [
    "Provider enabled",
    "Consent granted when required",
    "DNT/GPC not active",
    "Adapter endpoint reachable"
  ]
}
Portable evidence · schema v1
Review application paths and selectors before sharing.

ONE COMPLETE WORKFLOW

Not another dashboard
you forget to open.

Inspect the interface where it lives. Give your designer, developer, and coding agent the same bounded evidence.

  1. 01

    Connect your app

    Add a provider and an adapter. Preview exactly what gets collected and verify your first event.

  2. 02

    Ask a narrower question

    Choose a page, device, and layout revision. Inspect stable element targets and scroll reach with explicit denominators.

  3. 03

    Take the evidence with you

    Export JSON, Markdown, CSV, or an overlay image. Run local reports from your terminal. No model subscription required.

SMALL BY DESIGN

Your app.
Your boundaries.

The collector, Studio, and server tools are separate. Use an in-memory demo, your own endpoint, or a database adapter. Authentication and retention stay under your control.

Explore the architecture →
<ClickmapProvider
  adapter={yourAdapter}
  projectId="your-app"
  layoutId="pricing-v2"
  consentRequired
  hasConsent={consent}
>
  <YourApp />
</ClickmapProvider>

// Behind your admin authorization:
<ClickmapStudio
  adapter={authorizedAdapter}
  projectId="your-app"
/>

Useful signals. Honest limits.

A heatmap is a clue, not a conclusion. Clickmap labels observed sessions, heuristic frustration signals, and incomplete samples. No cookie-free compliance promises. No “AI increased conversions” claims. Just tools you can inspect, understand, and improve.

Read the measurement guide →