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
• polygons – Polygon drawing support

The core plugins are ready to use in the full version without extra script tags or imports. Loading one of them alongside the full version throws DUPLICATE_PLUGIN.

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. The full version only needs plugins it does not already include, such as sound-advanced:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pi.js with Plugins</title>
</head>
<body>
	<!-- Load Pi.js -->
	<script src="js/pijs/pi.min.js"></script>
	
	<!-- Load plugins (auto-register themselves) -->
	<script src="js/pijs/plugins/sound-advanced/sound-advanced.min.js"></script>

	<script>
		$.ready( () => {
			$.screen( "300x200" );
			$.print( "Press any key" );

			// Use the plugin commands
			$.onKey( "any", "down", () => {
				$.sfx( "coin" );
			} );
		} );
	</script>
</body>
</html>

Using Plugins with ES Modules

For modern JavaScript projects using ES modules, import Pi.js first and then the ESM build of each plugin:

import $ from "./pijs/pi.esm.min.js";

// Plugins will automatically register
import "./pijs/plugins/sound-advanced/sound-advanced.esm.min.js";

$.ready( () => {
	$.screen( "300x200" );
	$.print( "Press any key" );
	$.onKey( "any", "down", () => {
		$.sfx( "coin" );
	} );
} );

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="https://cdn.jsdelivr.net/npm/pijs-web@2/dist/pi.lite.min.js"></script>
	
	<!-- Load only the plugins you need -->
	<script src="https://cdn.jsdelivr.net/npm/pijs-web@2/dist/plugins/keyboard/keyboard.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/pijs-web@2/dist/plugins/pointer/pointer.min.js"></script>
	
	<script>
		$.ready( () => {
			$.screen( "300x200" );
			
			// Use the loaded plugin commands
			$.onKey( "any", "down", ( key ) => {
				$.print( `You pressed: ${key.code}` );
			} );
		} );
	</script>
</body>
</html>

Available Plugins

In addition to the core plugins, Pi.js includes one plugin that is not part of either build:

• sound-advanced – Synthesis, bus effects, sound-effect presets, instruments, and recording. It extends the sound plugin, so load it after the full version, or after the lite version and the sound plugin

The onscreen-keyboard, print-table, and pens plugins were removed in Pi.js v2.3.0.

All plugins are automatically built when you build Pi.js, and are available in ESM and IIFE formats, both minified and unminified, in plugins/<plugin-name>/ next to the Pi.js files.

Plugin Downloads