Keyboard Visualizer

Import

import { startKeyboardVisualizer } from "webotron/plugins/keyboard-visualizer";

Entry Point

• startKeyboardVisualizer(view, options?)

Usage

const keyboard = await startKeyboardVisualizer(view, {
  position: "bottom-left",
  accentColor: "#16a34a",
  maxTrailItems: 8,
});

await view.click("#editor");
await view.type("hello world");
await view.shortcut(["Ctrl+A", "Ctrl+C", "Ctrl+V"]);
await view.press("Escape");

await keyboard.stop();

Controller API

• setVisible(visible)
• clear()
• stop()

Overlay Options

Option	Type	Purpose
accentColor	string	Color for active key chips.
maxTrailItems	number	Maximum recent key/combo badges to keep visible.
position	"top-left" | "top-right" | "bottom-left" | "bottom-right"	Overlay anchor position.
hideTrailAfterMs	number	Milliseconds before transient badges fade out.

Message Source and Decoupling

The plugin is decoupled from input implementation details. It subscribes to host-side plugin messages (keyboard:action) emitted by input APIs (type, press, shortcut).

This means:

• You can enable or disable keyboard visualization without changing input code.
• The plugin can run alongside other visual plugins (for example mouse pointer visualizer) without direct coupling.