lochie · quaid-perkins · Mar 4, 2026 · Mar 10, 2026
diff --git a/SKILL.md b/SKILL.md
@@ -59,6 +59,16 @@ const haptic = useWebHaptics();
 </template>
 ```
 
+SolidJS:
+
+```tsx
+import { useWebHaptics } from "web-haptics/solid";
+
+const haptic = useWebHaptics();
+
+<button onClick={() => haptic.trigger()}>Tap me</button>;
+```
+
 Svelte:
 
 ```svelte

diff --git a/apps/solid-example/CHANGELOG.md b/apps/solid-example/CHANGELOG.md
@@ -0,0 +1,37 @@
+# solid-example
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [91cefb2]
+- Updated dependencies
+  - web-haptics@0.0.6
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - web-haptics@0.0.5
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - web-haptics@0.0.4
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - web-haptics@0.0.3
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - web-haptics@0.0.2
diff --git a/apps/solid-example/index.html b/apps/solid-example/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WebHaptics SolidJS Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/solid-example/package.json b/apps/solid-example/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "solid-example",
+  "private": true,
+  "version": "0.0.6",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.11",
+    "web-haptics": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}
diff --git a/apps/solid-example/src/App.tsx b/apps/solid-example/src/App.tsx
@@ -0,0 +1,19 @@
+import { useWebHaptics } from "web-haptics/solid";
+
+export default function App() {
+  const { trigger } = useWebHaptics();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        "justify-content": "center",
+        "align-items": "center",
+        height: "100vh",
+        "font-size": "2rem",
+      }}
+    >
+      <button onClick={() => trigger()}>Tap me</button>
+    </div>
+  );
+}
diff --git a/apps/solid-example/src/main.tsx b/apps/solid-example/src/main.tsx
@@ -0,0 +1,6 @@
+import { render } from 'solid-js/web';
+import App from "./App";
+
+const root = document.getElementById('root');
+
+render(() => <App />, root!);
diff --git a/apps/solid-example/tsconfig.json b/apps/solid-example/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/apps/solid-example/vite.config.ts b/apps/solid-example/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solid()],
+});
diff --git a/packages/web-haptics/README.md b/packages/web-haptics/README.md
@@ -34,6 +34,18 @@ const { trigger } = useWebHaptics();
 </template>
 ```
 
+## SolidJS
+
+```tsx
+import { useWebHaptics } from "web-haptics/solid";
+
+function App() {
+  const { trigger } = useWebHaptics();
+
+  return <button onClick={() => trigger("success")}>Tap me</button>;
+}
+```
+
 ## Svelte
 
 ```svelte

diff --git a/packages/web-haptics/package.json b/packages/web-haptics/package.json
@@ -30,6 +30,11 @@
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.js"
     },
+    "./solid": {
+      "types": "./dist/solid/index.d.ts",
+      "import": "./dist/solid/index.mjs",
+      "require": "./dist/solid/index.js"
+    },
     "./svelte": {
       "types": "./dist/svelte/index.d.ts",
       "import": "./dist/svelte/index.mjs",
@@ -55,6 +60,7 @@
     "mobile",
     "react",
     "vue",
+    "solidjs",
     "svelte",
     "typescript"
   ],
@@ -73,6 +79,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "vue": ">=3",
+    "solid-js": ">=1",
     "svelte": ">=4"
   },
   "peerDependenciesMeta": {
@@ -85,6 +92,9 @@
     "vue": {
       "optional": true
     },
+    "solid-js": {
+      "optional": true
+    },
     "svelte": {
       "optional": true
     }
@@ -105,6 +115,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "solid-js": "^1.9.11",
     "svelte": "^4.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",

diff --git a/packages/web-haptics/src/solid/index.ts b/packages/web-haptics/src/solid/index.ts
@@ -0,0 +1 @@
+export { useWebHaptics } from "./useWebHaptics";
diff --git a/packages/web-haptics/src/solid/types.ts b/packages/web-haptics/src/solid/types.ts
@@ -0,0 +1,8 @@
+export type {
+  Vibration,
+  HapticPattern,
+  HapticPreset,
+  HapticInput,
+  TriggerOptions,
+  WebHapticsOptions,
+} from "../lib/web-haptics/types";
diff --git a/packages/web-haptics/src/solid/useWebHaptics.ts b/packages/web-haptics/src/solid/useWebHaptics.ts
@@ -0,0 +1,47 @@
+import { createEffect, on, onCleanup, onMount } from "solid-js";
+import { WebHaptics } from "../lib/web-haptics";
+import type {
+  HapticInput,
+  TriggerOptions,
+  WebHapticsOptions,
+} from "../lib/web-haptics/types";
+
+export function useWebHaptics(options?: WebHapticsOptions) {
+  let instance: WebHaptics | null = null;
+
+  onMount(() => {
+    instance = new WebHaptics(options);
+  });
+
+  onCleanup(() => {
+    instance?.destroy();
+    instance = null;
+  });
+
+  createEffect(
+    on(
+      () => options?.debug,
+      (debug) => {
+        instance?.setDebug(debug ?? false);
+      },
+      { defer: true },
+    ),
+  );
+
+  createEffect(
+    on(
+      () => options?.showSwitch,
+      (showSwitch) => {
+        instance?.setShowSwitch(showSwitch ?? false);
+      },
+      { defer: true },
+    ),
+  );
+
+  const trigger = (input?: HapticInput, options?: TriggerOptions) =>
+    instance?.trigger(input, options);
+  const cancel = () => instance?.cancel();
+  const isSupported = WebHaptics.isSupported;
+
+  return { trigger, cancel, isSupported };
+}
diff --git a/packages/web-haptics/tsup.config.ts b/packages/web-haptics/tsup.config.ts
@@ -38,6 +38,19 @@ export default defineConfig((options) => {
       minify: !options.watch,
       banner: { js: '"use client";' },
     },
+    // SolidJS
+    {
+      entry: {
+        "solid/index": "src/solid/index.ts",
+      },
+      format: ["cjs", "esm"],
+      dts: true,
+      target: "es2022",
+      treeshake: true,
+      external: ["solid-js"],
+      esbuildPlugins: [aliasCorePlugin],
+      minify: !options.watch,
+    },
     // Vue
     {
       entry: {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useWebHaptics } from "./useWebHaptics";