Plugins

Pi.js Plugins

Pi.js features a powerful plugin system that extends the library’s functionality. Plugins add new commands and features without modifying the core code, allowing you to customize Pi.js for your specific needs.

Click here for plugin downloads

What are Plugins?

Plugins are modular extensions that add new commands to the Pi.js API. They work seamlessly with both build formats:

  • ESM (ES Modules) – for modern JavaScript projects
  • IIFE (Immediately Invoked Function Expression) – for traditional <script> tag usage

Core Plugins

Pi.js comes with several core plugins that are included in the full version:

  • gamepad – Gamepad controller support for handling gamepad input
  • keyboard – Keyboard input handling and key event management
  • pointer – Mouse and touch pointer input support
  • sound – Audio playback and sound management

If you’re using the lite version of Pi.js, you can pick and choose which plugins you want to include. Simply load the plugins you need alongside the lite build.

Using Plugins in the Browser

The simplest way to use plugins in the browser with <script> tags:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pi.js with Plugins</title>
</head>
<body>
	<!-- Load Pi.js -->
	<script src="build/pi.min.js"></script>
	
	<!-- Load plugins (auto-register themselves) -->
	<script src="build/plugins/example-plugin/example-plugin.min.js"></script>
	<script src="build/plugins/print-table/print-table.min.js"></script>
	<script src="build/plugins/onscreen-keyboard/onscreen-keyboard.min.js"></script>
	
	<script>
		$.ready( () => {
			$.screen( "300x200" );
			$.drawRandomCircle( 150, 100, 50 );
		} );
	</script>
</body>
</html>

Using Plugins with ES Modules

For modern JavaScript projects using ES modules:

import pi from "./build/pi.esm.min.js";

// Plugins will automatically register
import gamepadPlugin from "./build/plugins/example-plugin/example-plugin.min.js";
import keyboardPlugin from "./build/plugins/print-table/print-table.min.js";
import pointerPlugin from "./build/plugins/onscreen-keyboard/onscreen-keyboard.min.js";

pi.ready( () => {
	pi.screen( "300x200" );
	pi.drawRandomCircle( 150, 100, 50 );
} );

Lite Version with Selected Plugins

If you’re using the lite version, you can include only the plugins you need:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pi.js Lite with Selected Plugins</title>
</head>
<body>
	<!-- Load Pi.js Lite -->
	<script src="build/pi.lite.min.js"></script>
	
	<!-- Load only the plugins you need -->
	<script src="build/plugins/keyboard/keyboard.min.js"></script>
	<script src="build/plugins/pointer/pointer.min.js"></script>
	
	<script>
		$.ready( () => {
			$.screen( "300x200" );
			
			// Use the loaded plugin commands
			$.onKeyPress( ( key ) => {
				console.log( "Key:", key );
			} );
		} );
	</script>
</body>
</html>

Available Plugins

In addition to the core plugins, Pi.js includes several other useful plugins:

  • onscreen-keyboard – Virtual on-screen keyboard
  • pens – Advanced drawing tools and shapes – Not implemented, coming soon
  • print-table – Table printing utilities

All plugins are automatically built when you build Pi.js, and are available in both minified and unminified versions in each plugin’s dist/ directory.

Plugin Downloads

gamepad

keyboard

pointer

sound