Capacitor Haptics Plugin

Capacitor plugin to provide haptic feedback such as impacts, notifications, vibrations and custom haptic patterns.

Features

• 💥 Impact: Trigger impact haptic feedback with five different styles, including the modern Rigid and Soft styles.
• 🔔 Notification: Trigger notification haptic feedback for success, warning and error events.
• 🎯 Selection: Trigger selection haptic feedback for picker-style interactions.
• 🎼 Custom patterns: Play custom haptic patterns with per-event intensity and sharpness (Core Haptics on iOS, vibration effects on Android).
• 🤖 Android haptics: Perform semantic Android haptic feedback effects that respect the user's haptic feedback settings.
• 📳 Vibrate: Vibrate the device with a custom duration.
• 🔎 Availability check: Check if haptic feedback is available on the device.
• 🌐 Web support: Best-effort support for the Web using the Vibration API.
• 🤝 Compatibility: Works alongside the Shake, Silent Mode and Volume plugins.
• 📦 CocoaPods & SPM: Supports CocoaPods and Swift Package Manager for iOS.
• 🔁 Up-to-date: Always supports the latest Capacitor version.

Missing a feature? Just open an issue and we'll take a look!

Use Cases

The Haptics plugin is typically used to make an app feel more responsive and tactile, for example:

• Button and gesture feedback: Trigger impact feedback when user interface elements collide or a drag operation snaps into place.
• Success and error feedback: Use notification haptics to communicate that a task has succeeded, failed, or produced a warning.
• Pickers and selection controls: Give subtle selection feedback while the user scrolls through a picker.
• Games and rich interactions: Play custom haptic patterns with per-event intensity and sharpness for immersive experiences.
• Alerts: Vibrate the device with a custom duration to get the user's attention.

Compatibility

Installation

You can use our AI-Assisted Setup to install the plugin. Add the Capawesome Skills to your AI tool using the following command:

npx skills add capawesome-team/skills --skill capacitor-plugins

Then use the following prompt:

 Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-haptics` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

npm install @capawesome/capacitor-haptics
npx cap sync

Android

This plugin already declares the android.permission.VIBRATE permission in its manifest, so no additional configuration is required.

iOS

No additional configuration is required for this plugin.

Configuration

No configuration required for this plugin.

Usage

The following examples show how to check if haptic feedback is available, trigger impact and notification feedback, give selection feedback, play a custom haptic pattern, perform an Android haptic effect, and vibrate the device.

Check if haptic feedback is available

Check whether the device supports haptic feedback before using the other methods:

import { Haptics } from '@capawesome/capacitor-haptics';

const isAvailable = async () => {
  const { available } = await Haptics.isAvailable();
  return available;
};

Trigger impact feedback

Simulate a physical impact, for example when user interface elements collide or a drag operation snaps into place. Five different styles are available, including the modern Rigid and Soft styles:

import { Haptics, ImpactStyle } from '@capawesome/capacitor-haptics';

const impact = async () => {
  await Haptics.impact({ style: ImpactStyle.Medium });
};

Trigger notification feedback

Communicate that a task or action has succeeded, failed, or produced a warning:

import { Haptics, NotificationType } from '@capawesome/capacitor-haptics';

const notification = async () => {
  await Haptics.notification({ type: NotificationType.Success });
};

Give selection feedback

Give subtle feedback during picker-style interactions. Call selectionStart() when the interaction begins, selectionChanged() whenever the selection changes, and selectionEnd() when the interaction finishes:

import { Haptics } from '@capawesome/capacitor-haptics';

const selection = async () => {
  await Haptics.selectionStart();
  await Haptics.selectionChanged();
  await Haptics.selectionEnd();
};

Play a custom haptic pattern

Play a custom pattern composed of individual haptic events with per-event intensity and sharpness. On iOS, the pattern is played using Core Haptics; on Android, it is approximated using vibration effects:

import { Haptics } from '@capawesome/capacitor-haptics';

const playPattern = async () => {
  await Haptics.playPattern({
    events: [
      { time: 0, intensity: 1, sharpness: 0.8 },
      { time: 200, intensity: 0.6, sharpness: 0.4 },
      { time: 400, intensity: 0.8, duration: 500 },
    ],
  });
};

On iOS, parameter curves change the intensity or sharpness of the whole pattern over time, for example to ramp up a continuous event before a final tap:

import { HapticParameter, Haptics } from '@capawesome/capacitor-haptics';

const playRampUp = async () => {
  await Haptics.playPattern({
    events: [
      { time: 0, intensity: 1, sharpness: 0.3, duration: 1000 },
      { time: 1000, intensity: 1, sharpness: 0.9 },
    ],
    parameterCurves: [
      {
        parameter: HapticParameter.Intensity,
        controlPoints: [
          { time: 0, value: 0.1 },
          { time: 1000, value: 1 },
        ],
      },
    ],
  });
};

Play an Android composition

Play a composition of haptic primitives, for example the double click that Android uses for toggles. Only available on Android 12+:

import {
  AndroidHapticPrimitiveType,
  Haptics,
} from '@capawesome/capacitor-haptics';

const playToggleOn = async () => {
  await Haptics.playAndroidComposition({
    primitives: [
      { type: AndroidHapticPrimitiveType.Tick, scale: 0.5 },
      { type: AndroidHapticPrimitiveType.Click, delay: 50 },
    ],
  });
};

Perform an Android haptic effect

Perform a semantic Android haptic feedback effect that respects the user's haptic feedback settings. Only available on Android:

import { AndroidHapticFeedbackType, Haptics } from '@capawesome/capacitor-haptics';

const performAndroidHapticFeedback = async () => {
  await Haptics.performAndroidHapticFeedback({ type: AndroidHapticFeedbackType.Confirm });
};

Vibrate the device

Vibrate the device. The duration option is only available on Android and Web:

import { Haptics } from '@capawesome/capacitor-haptics';

const vibrate = async () => {
  await Haptics.vibrate({ duration: 500 });
};

API

• impact(...)
• isAvailable()
• notification(...)
• performAndroidHapticFeedback(...)
• playAndroidComposition(...)
• playPattern(...)
• selectionChanged()
• selectionEnd()
• selectionStart()
• vibrate(...)
• Interfaces
• Enums

impact(...)

impact(options?: ImpactOptions | undefined) => Promise<void>

Trigger an impact haptic feedback.

Use this to simulate a physical impact, for example when user interface elements collide or a drag operation snaps into place.

On Android, the impact style is mapped to a best-effort vibration effect.

Since: 0.1.0

isAvailable()

isAvailable() => Promise<IsAvailableResult>

Check if haptic feedback is available on the device.

On Android, this checks whether the device has a vibrator. On iOS, this checks whether the device supports haptic event playback. On the web, this checks whether the Vibration API is supported.

Returns: Promise<IsAvailableResult>

Since: 0.1.0

notification(...)

notification(options?: NotificationOptions | undefined) => Promise<void>

Trigger a notification haptic feedback.

Use this to communicate that a task or action has succeeded, failed, or produced a warning.

On Android, the notification type is mapped to a best-effort vibration effect.

Since: 0.1.0

performAndroidHapticFeedback(...)

performAndroidHapticFeedback(options: PerformAndroidHapticFeedbackOptions) => Promise<void>

Perform a predefined Android haptic feedback effect.

In contrast to the other methods, this method does not use the vibrator but the semantic haptic feedback constants of the Android view system. This respects the user's haptic feedback settings.

Only available on Android.

Since: 0.1.0

playAndroidComposition(...)

playAndroidComposition(options: PlayAndroidCompositionOptions) => Promise<void>

Play a composition of haptic primitives.

In contrast to playPattern(...), this method maps directly to the composition primitives of the Android vibrator system, for example to build the direction-aware double click that Android uses for toggles. The composition respects the system touch feedback setting on Android 13+.

A primitive the device does not support is played as Click.

Only available on Android 12+. This requires a device with haptic primitive support. Otherwise, the call rejects as unavailable.

Since: 0.2.0

playPattern(...)

playPattern(options: PlayPatternOptions) => Promise<void>

Play a custom haptic pattern composed of individual haptic events.

On iOS, the pattern is played using Core Haptics with full support for intensity and sharpness. This requires a device with haptic event playback support (for example an iPhone with a Taptic Engine). Otherwise, the call rejects as unavailable.

On Android, the pattern is played using vibration effects. Intensity is only respected on devices with amplitude control. On Android 12+, a pattern of transient events only is played as a composition of click primitives. On Android 13+, the pattern respects the system touch feedback setting.

On the web, the pattern is approximated using the Vibration API.

Since: 0.1.0

selectionChanged()

selectionChanged() => Promise<void>

Trigger a selection changed haptic feedback.

Call this method after selectionStart() whenever the selection changes.

On the web, this method does nothing.

Since: 0.1.0

selectionEnd()

selectionEnd() => Promise<void>

End a selection session.

Call this method when the user finishes a selection interaction.

On the web, this method does nothing.

Since: 0.1.0

selectionStart()

selectionStart() => Promise<void>

Start a selection session.

Call this method when the user starts a selection interaction, for example when a picker starts scrolling. It prepares the haptic hardware to reduce the latency of subsequent selectionChanged() calls.

On the web, this method does nothing.

Since: 0.1.0

vibrate(...)

vibrate(options?: VibrateOptions | undefined) => Promise<void>

Vibrate the device.

Since: 0.1.0

Interfaces

ImpactOptions

IsAvailableResult

NotificationOptions

PerformAndroidHapticFeedbackOptions

PlayAndroidCompositionOptions

AndroidHapticPrimitive

PlayPatternOptions

HapticEvent

HapticParameterCurve

HapticParameterCurveControlPoint

VibrateOptions

Enums

ImpactStyle

NotificationType

AndroidHapticFeedbackType

AndroidHapticPrimitiveType

HapticParameter

Migrating from @capacitor/haptics

This plugin is a drop-in replacement for the official @capacitor/haptics plugin with a few differences:

Attention: The default impact style changed from ImpactStyle.Heavy to ImpactStyle.Medium. If you rely on the old default, pass ImpactStyle.Heavy explicitly.

Platform behavior

The haptic capabilities of the platforms differ. This plugin maps every method to the best available platform API:

Custom haptic patterns are strongest on iOS, where Core Haptics supports per-event intensity and sharpness. On Android, patterns are approximated using vibration effect primitives (Android 12+ with supported hardware) or amplitude-controlled waveforms. On the web, patterns are approximated using the Vibration API, which only supports on/off timings.

FAQ

How is this plugin different from other similar plugins?

It covers the full range of haptic feedback through one fully typed API: impacts with five styles including the modern Rigid and Soft, notification and selection feedback, custom patterns with per-event intensity and sharpness via Core Haptics on iOS, semantic Android effects that respect the user's system settings, and an availability check — consistently across Android, iOS, and best-effort Web. It is actively maintained against the latest Capacitor and OS versions. If you only need a simple vibration, a minimal setup is fine; if you want rich, platform-aware haptics, this plugin is designed for exactly that.

How is this plugin different from the official Capacitor Haptics plugin?

This plugin is a drop-in replacement for the official @capacitor/haptics plugin with additional features: an isAvailable() method, semantic Android haptic effects via performAndroidHapticFeedback(...), custom haptic patterns via playPattern(...), and the modern Rigid and Soft impact styles. Note that the default impact style is ImpactStyle.Medium instead of ImpactStyle.Heavy, see Migrating from @capacitor/haptics.

Do I need to configure any permissions?

No, the plugin already declares the android.permission.VIBRATE permission in its own manifest, so no additional configuration is required on Android. On iOS and Web, no configuration is required either.

Why don't I feel any haptic feedback on my device?

First, use the isAvailable() method to check whether haptic feedback is available: on Android it checks whether the device has a vibrator, on iOS whether the device supports haptic event playback, and on the web whether the Vibration API is supported. Also keep in mind that on Android, the intensity of haptic events is only respected on devices with amplitude control, and that performAndroidHapticFeedback(...) respects the user's haptic feedback settings.

Are custom haptic patterns supported on all platforms?

Custom patterns are strongest on iOS, where Core Haptics supports per-event intensity and sharpness; this requires a device with haptic event playback support (for example an iPhone with a Taptic Engine), otherwise the call rejects as unavailable. On Android, patterns are approximated using vibration effect primitives or amplitude-controlled waveforms. On the web, patterns are approximated using the Vibration API, which only supports on/off timings.

What is the difference between vibrate and playPattern?

The vibrate(...) method triggers a single vibration with a custom duration, whereby the duration is only respected on Android and Web (on iOS, a system vibration with a fixed duration is played). The playPattern(...) method plays a sequence of individual haptic events, each with its own time, intensity, sharpness, and duration.

Can I use this plugin with Ionic, React, Vue or Angular?

Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.

Related Plugins

• Shake: Detect shake gestures, for example to respond with haptic feedback.
• Silent Mode: Detect whether the device is in silent mode.
• Volume: Control the volume and observe hardware volume button presses.

Newsletter

Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our Capawesome Newsletter.

Changelog

See CHANGELOG.md.

License

See LICENSE.