Touch Controls
Reimagined.
A minimalist, zero-dependency virtual joystick library for the modern web. Precision, Haptics, and Multi-touch support out of the box.
Lightweight
Under 5KB gzipped. Zero dependencies. Drop it into any project and it just works.
Haptic Feedback
Built-in support for the Vibration API, providing tactile feedback for zones and boundaries.
Customizable
Control every aspect: sizes, colors, deadzones, sensitivity, shapes, and behavior modes.
How to Use
Installation
Clone the repository or download the source files directly.
git clone https://github.com/blaxezcode/Virtual-Joystick.git
Basic Usage
Import the library and initialize it on a container element.
import VirtualJoystick from "./src/virtual-joystick.js"; const container = document.getElementById("joystick-zone"); const joystick = new VirtualJoystick(container, { width: 150, height: 150, color: "#ffffff", handleColor: "#000000", onChange: (data) => { console.log(data.delta.x, data.delta.y); } });
Advanced Options
Customize behavior with advanced settings.
const joystick = new VirtualJoystick(container, { mode: "dynamic", // Stick appears where you touch maxMoveRadius: 75, // Limit handle movement range lockAxis: "x", // Lock movement to X axis haptics: true, // Enable vibration feedback });