Skip to main content

​
WebHaptics

WebHaptics is a lightweight, zero-dependency library that brings native-feeling haptic feedback to mobile web applications. Built with modern web standards, it provides an intuitive API for React, Vue, Svelte, and vanilla JavaScript.

​
Why WebHaptics?

Zero Dependencies

Pure JavaScript implementation with no external dependencies

Framework Support

First-class support for React, Vue, and Svelte

11 Built-in Presets

Pre-configured patterns for common interactions

PWM Intensity

Advanced intensity modulation for precise control

​
Key Features

​
Built-in Haptic Presets

WebHaptics includes 11 carefully crafted presets inspired by iOS haptic feedback:
  • Notification: success, warning, error
  • Impact: light, medium, heavy, soft, rigid
  • Selection: selection
  • Custom: nudge, buzz

​
PWM Intensity Modulation

Unlike basic vibration APIs, WebHaptics uses pulse-width modulation (PWM) to simulate variable intensity levels, creating more nuanced haptic experiences.

​
Framework-Agnostic Core

Use the same haptic patterns across different frameworks: 
// React
import { useWebHaptics } from 'web-haptics/react';

// Vue
import { useWebHaptics } from 'web-haptics/vue';

// Svelte
import { createWebHaptics } from 'web-haptics/svelte';

// Vanilla
import { WebHaptics } from 'web-haptics';

​
Quick Example

import { useWebHaptics } from 'web-haptics/react';

function App() {
  const { trigger } = useWebHaptics();

  return (
    <button onClick={() => trigger('success')}>
      Tap me
    </button>
  );
}

​
Get Started

Installation

Install WebHaptics in your project

Quick Start

Build your first haptic interaction

API Reference

Explore the complete API

Framework Guides

View framework-specific guides

​
Browser Support

WebHaptics uses the Vibration API, which is supported on:
  • Android Chrome, Firefox, Edge
  • Mobile Safari (iOS 13+)
Desktop browsers generally don’t support haptic feedback. Use isSupported to check availability.

​
TypeScript Support

WebHaptics is written in TypeScript and includes comprehensive type definitions for all exports.

Build docs developers (and LLMs) love

Get started for freeTalk to us