Test the Pointer Events API
Probe pressure, tilt, twist, contact area, pointerType, and isPrimary on stylus, pen, mouse, and touch. Visualises pressure as a live circle.
How to probe Pointer Events
Pointer Events unify mouse, touch, and stylus into a single event model. This tester surfaces every property you can read.
- 01
Use the pad
Move, click, or press a pen on the dashed area to fire events.
Inputs are treated as UTF-8 throughout the pipeline and validated client-side as you type — nothing dispatches until the value is well-formed.
inpututf-8client-sidevalidatedpad · textactive · setpointerdown
loaded · parsedclient-side - 02
Watch pressure
Stylus pressure scales the visualization circle from 6 to 86 pixels.
Each toggle re-computes through a memoised hook, so flipping options never resets your input and the UI stays snappy on large inputs.
pressureoptionslivememoisedtogglesp · memoised0.5 · livescaled circle
options set · memoisedlive - 03
Read tilt and twist
Stylus tiltX, tiltY, and twist update in real time.
Randomness — where used — comes from
crypto.getRandomValues, neverMath.random. Heavy work sits inuseMemo.styluscomputeinstantlocaldeterministictilt · instantx/y · computedtiltX: 12°
computed · instantinstant - 04
Copy snapshot
Grab the current readout as tab-separated text.
Copy writes through
navigator.clipboardand downloads use aBlob— zero network traffic. Same input plus same options always yield the same bytes.copydownloadzero-networkreproducibleok · copiedtxt · copiedCopied
shipped · ready to shipsuccess
Pro tips for everyday utilities
Reach for crypto.getRandomValues
Cryptographically random for IDs, tokens, salts. Math.random is for animation and games, not security.
Mock data with seeds
Faker-style libraries can be seeded so tests are reproducible. Embed the seed in the fixture file.
Reference cards beat memory
Cheatsheets for Vim, Git, Docker, Linux signals are faster than man pages when you’re mid-flow.
Browser APIs vary
Touch events, gamepads, and clipboard differ across vendors. Feature-detect before use.
Persist in the right place
localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data.
When to test Pointer Events
Drawing apps, stylus apps, multi-input UX.
Drawing apps
Verify pressure-sensitivity curves on real stylus hardware. Random values come from crypto.getRandomValues — cryptographically secure for tokens, salts, and session IDs. Math.random is deterministic enough for animations but predictable enough to be a security bug.
CSPRNG-backedPen UX QA
Confirm tiltX, tiltY, and twist for sloped brushes and calligraphy. Pair with hashids, ULID, or UUID v7 when you need both random and sortable — useful for primary keys, public-facing IDs, and event log ordering without a sequence column.
reproducibleSurface pen testing
Quickly check pen vs. mouse behavior in a single event model. Output is deterministic given the same seed, so fixtures and tests stay reproducible across CI runs and contributor machines. Embed the seed in the fixture file for full replay.
snappyCoalesced events
Spot-check coarse vs. fine pointers for performance tuning. Heavy work runs through useMemo so the UI stays snappy on large inputs. Same input + same options yields identical bytes — the kind of stability snapshot tests rely on.
feature-detectedLive debugging
Sanity check pointerType detection during a session. Storage tools persist to the right backend: localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data. Pick the right shelf and quota worries disappear.
deterministicCross-browser parity
Compare pressure scales between Chromium, Safari, and Firefox. Browser feature detection: clipboard, fullscreen, gamepad, and Web Bluetooth APIs gracefully fall back when unavailable. No surprise white screens on Safari or older Firefox.
production-readyFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.