Mixpanel
Self-serve product analytics for tracking user behavior, funnels, cohorts, and retention
Clarity
Privacy‑first, high‑performance behavioral analytics for modern web
Clarity is a TypeScript library that captures user interactions and DOM changes across browsers, delivering fast, privacy‑focused session replay and heatmaps to help teams improve product experience.
Overview
Overview
Clarity provides developers with a lightweight, TypeScript‑based instrumentation layer that records user clicks, scrolls, keystrokes, and DOM mutations on any modern browser. The data is streamed to a server‑side decoder, which reconstructs the session into a pixel‑perfect replay, enabling heatmaps and detailed interaction analysis.
Audience & Deployment
Designed for product and engineering teams that need deep visibility into user behavior while honoring privacy regulations, Clarity can be integrated into any web project with a few script tags. After adding the clarity-js bundle, developers deploy the clarity-decode service on their own infrastructure to transform raw telemetry, then use clarity-visualize to render sessions in a browser. The optional clarity-devtools extension offers live capture for debugging. Because the same code powers Microsoft’s hosted analytics service, users benefit from a proven, high‑performance foundation without relying on a third‑party SaaS platform.
Highlights
Built‑in privacy masking with configurable options
Low‑overhead instrumentation for minimal performance impact
Pixel‑perfect session replay and heatmap visualizations
Chromium‑based DevTools extension for live capture
Pros
- Strong privacy controls protect sensitive content
- Minimal runtime overhead preserves page performance
- Same codebase as Microsoft’s production analytics solution
- Comprehensive visualization tools for replay and heatmaps
Considerations
- Requires a server component to decode and store data
- DevTools extension works only in Chromium‑based browsers
- No built‑in backend; users must provide storage and processing
- Custom masking configuration may have a learning curve
Managed products teams compare with
When teams consider Clarity, these hosted platforms usually appear on the same shortlist.
Looking for a hosted option? These are the services engineering teams benchmark against before choosing open source.
Fit guide
Great for
- Product teams needing privacy‑compliant user behavior insights
- Developers preferring a TypeScript SDK with full source access
- Organizations that already have data pipelines for analytics
- Teams requiring session replay across desktop and mobile devices
Not ideal when
- Projects lacking server resources to run the decode service
- Users looking for an out‑of‑the‑box hosted SaaS solution
- Scenarios that demand deep funnel or cohort analysis beyond interaction data
- Low‑tech stacks without Node.js or TypeScript support
How teams use it
Identify UI bottlenecks
Reveal where users hesitate or abandon, enabling UI refinements that boost conversion rates.
Validate new feature adoption
Track interaction patterns to confirm that a released feature is being used as intended.
Monitor mobile experience
Capture touch gestures and layout shifts on mobile browsers to improve responsiveness and usability.
Compliance‑driven analytics
Leverage built‑in masking to collect actionable insights while meeting GDPR, CCPA, and other privacy regulations.
Tech snapshot
TypeScript94%
HTML4%
JavaScript1%
Shell1%
CSS1%
Frequently asked questions
How does Clarity protect user privacy?
Sensitive page content is automatically masked before transmission, and developers can configure additional masking rules to control exactly what data is collected.
Which browsers are supported?
Clarity works on all modern browsers that support standard DOM APIs, including Chrome, Edge, Firefox, Safari, and mobile browsers.
Do I need a backend service?
Yes, the `clarity-decode` component runs on your server to transform raw telemetry into replayable sessions. You can store the processed data in any database you choose.
What is the performance impact on my site?
The library is optimized for low overhead, typically adding less than 1 % CPU usage and negligible network bandwidth.
Is there a hosted version of Clarity?
Microsoft offers a hosted service at clarity.microsoft.com, but the open‑source library lets you run the entire stack on your own infrastructure.
Project at a glance
Active- Stars
- 2,574
- Watchers
- 2,574
- Forks
- 261
LicenseMIT
Repo age5 years old
Last commit3 days ago
Primary languageTypeScript
Last synced yesterday