BETA: New Modules, Native Events & Editor Overhaul v1.5.0

⚠️ Beta Release

This is a beta release. Some modules have not been fully tested with live Kick events (field names may need adjustment). Twitch events have been verified with live testing.

---

New Modules (11)

Module	Description
🕐 Clock	Time, date, or stream uptime with auto-scaling text
🎞️ Spritesheet	Animated spritesheet player with configurable frame size and offset
👁️ Viewer Count	Combined Twitch + Kick viewer count via native events
🔔 Alert	Queued alert popups with animations, background image, text positioning
📊 Goal Bar	Full-height progress bar with configurable text position
⏱️ Countdown Timer	Start/stop/reset with auto-scaling text and end state
💎 Bit Collector	Glass fill + burst particles, auto-fills from Twitch cheers and Kick donations
📜 Event Ticker	Auto-scrolling marquee of stream events with auto-scaling
🚂 Hype Train	Level + progress bar from native Twitch events
📋 Poll Display	Live vote bars with auto-hide on poll end
📢 Shoutout Card	Template-based card with avatar, name, game positioning

Native Streamer.bot Events

Most modules now work without any custom C# actions — they subscribe directly to Streamer.bot's WebSocket events:

• Alerts fire automatically on follows, subs, cheers, raids, gift subs
• Event Ticker populates from all stream events
• Hype Train, Poll, Goal Bar, Viewer Count all use native events
• Bit Collector auto-fills from Twitch.Cheer and Kick.sGifted

Only Countdown, Bit Collector burst/reset, and Shoutout (!so command) need custom actions.

Editor Improvements

• Canvas render optimisation — changing settings no longer reloads video elements
• CSS editor text mode — now supports a raw text mode click the { } button on any CSS section
• Palette grid mode — compact 3-column icon grid (list view removed)
• Module icon images — modules can use image files instead of emoji icons
• Color picker RGBA — alpha slider with checkerboard preview and position cursors
• Gamepad property types — gamepadDevice and gamepadButton dropdowns
• autoSimulate — modules like Clock always run their simulation
• Panel scroll fix — properties panel scrolls correctly with absolute positioning
• Hide labels toggle — now actually works
• Canvas size in config — persists across installs (not localStorage)
• Selected Scene Memory — remember the selected scene from OBS using localStorage
• Crop support — Right click an element to enable Crop mode.
• Rotation support — Can now rotate any module inside the editor rotate handle added.

Gamepad Modules (3)

• 🎮 Steering Wheel — rotates based on gamepad axis
• 🔘 Gamepad Button — single button with idle/active images
• ✚ Gamepad D-Pad — directional input with 9 image slots

Other Fixes

• Module auto-registration: all scene modules added to Config.Modules automatically
• Installer PATH fix for directories with spaces
• Dynamic built-in modules list (no hardcoded names)
• UTF-8 charset meta tag for OBS emoji support
• WebSocket routing: custom messages checked before native events
• Chat Clipping: SVG rendering was off when using a drop shadow.

---

Gamepad Input Modules v1.4.2

Three new modules for displaying controller input on your stream overlay, all using the browser Gamepad API (works in OBS without focus).

🎮 Steering Wheel

• Displays a rotating wheel driven by any gamepad axis
• Supports custom wheel images or draws a default wheel graphic
• Configurable max rotation, rotation offset, deadzone, and axis invert
• "Show Axis Values" debug mode to identify the correct axis

🔘 Gamepad Button

• Displays a single controller button with idle/active image swap
• Falls back to a drawn circle with configurable colors if no images set
• Supports analog buttons (triggers) with gradual color fill

✚ Gamepad D-Pad

• Displays D-pad directional input with per-direction idle/active images
• 9 image slots: Up Idle, Up Active, Down Idle, Down Active, Left Idle, Left Active, Right Idle, Right Active, Center
• Supports both button-based and axis-based D-pad input modes
• Swaps between idle/active images on press (no dimming)

New Property Types

• gamepadDevice — dropdown of connected controllers, auto-detects on button press, saves controller name for display
• gamepadButton — dropdown of buttons from the selected controller
• Both show saved values on reload without requiring re-detection

Fixes

PNGTuber

• Now uses 4 images: Idle, Idle Blink, Active, Active Blink (no more overlay compositing)
• Removed the old single "Blink Image" overlay approach

Module Loading

• buildConfig now ensures ALL module types used in any scene are added to the Modules array (previously only handled image/video/webcam — pngtuber and others were missed)

Installer

• Fixed PATH registration failing when install directory contains spaces

Editor UI

• Properties panel now scrolls correctly when content overflows
• Gamepad/controller dropdowns no longer overflow the panel width
• build-cumods.js now auto-discovers modules from directory instead of a hardcoded list

Module Signing & Chat Fixes v1.4.1

Module Signing & Verification

CanvasUI now supports signed module packages (.cumod format) with a full Ed25519 certificate chain. This lets module developers prove authorship and lets users verify modules haven't been tampered with.

• Verified badges — signed modules show a green checkmark with the developer's name
• Certificate popup — hover over the badge to see developer details, organisation, website, and certificate dates
• Revocation support — compromised certificates can be revoked, fully disabling affected modules
• Version tracking — modules show an outdated badge when built for an older app version

Signing Your Modules

1. Open Settings → Modules → Generate Key & Signing Request
2. Submit your CSR via the GitHub issue template
3. Receive your signed certificate from the CA
4. Export modules with Sign with Key File to produce verified `.cumod` packages

Hardware security keys (YubiKey) are supported via the External Signature mode.

See the Developer Guide for full documentation.

---

Bug Fixes

Kick Emotes

• Fixed emotes not rendering when Streamer.bot sends duplicate position indices for repeated emotes
• Fixed concatenated emotes (no spaces between them) showing as plain text instead of images

Emote Aspect Ratio

• Emotes now render at their correct aspect ratio instead of being forced to a square
• Height is configurable via `EmoteHeight` in Chat settings — width scales automatically

Cross Platform & Chroma Support - v1.4.0

Cross-Platform Support

• macOS and Linux support — app now runs on all three platforms
• Platform-aware user data paths: macOS uses ~/Library/Application Support/, Linux uses ~/.config/
• Windows unchanged — user data stays in install directory
• Built-in modules synced from app bundle on every launch (macOS/Linux updates work correctly)
• Custom modules preserved across updates on all platforms
• Replaced PowerShell zip operations with adm-zip (pure JS, no platform dependencies)
• Added DMG (macOS) and AppImage/deb (Linux) build targets

Schema-Driven Properties

• Module properties panel now auto-generated from info.json "properties" field
• Supports: string, number, bool, color picker, select, range slider, media browser, audio/camera device dropdowns
• showWhen conditional visibility for dependent fields
• Removed all hardcoded per-module property methods
• Canvas re-renders live when properties change
• Scene Settings only shown when no module is selected

Webcam Chroma Key

• WebGL-accelerated green screen removal — GPU-powered chroma key shader using YCbCr color space
• Chroma key settings moved to per-instance properties (each webcam can have different settings)
• Color picker for key color, sliders for similarity/smoothness/spill
• Color picker auto-repositions to stay within viewport

Chat Improvements

• Hide messages by prefix — new hideMessageStartingWith setting filters bot commands (!, /, etc.)
• Fixed emote spacing and text rendering (no more excessive gaps between Twitch emotes)
• Fixed Kick emote text leaking as plain text

PNGTuber Fixes

• Fixed images not rendering in editor or OBS
• Proper URL resolution for editor context
• CORS handling for cross-origin images
• Shows actual idle image in editor preview

Other Fixes

• Fixed video module not looping
• Module manager auto-adds/removes modules from Config.Modules on install/uninstall
• Updated Streamer.bot import for Kick emote fix
• License changed from MIT to LGPL-3.0 (modules can use any license)
• Wiki updated with licensing, module manager, and new features

Drop It In v1.3.5

New: PNGTuber Module 🎭

• Audio-reactive PNG avatar that switches between idle/talking poses
• Monitors microphone in configurable frequency range (85-300Hz for voice)
• Volume threshold with hold time to prevent flickering
• Optional blink overlay at configurable intervals
• Bounce animation on talk
• All settings per-instance in the properties panel
• Media browser integration for image selection

New: Module Manager

• Settings → Modules tab for managing installed modules
• Install from .zip — validates manifest with SHA-256 file integrity checks
• Export — packages custom modules as .zip with manifest for sharing
• Uninstall — removes custom modules, cleans up scene references, auto-saves config
• Refresh Modules — hot-reload module classes without restarting
• Open Modules Folder — quick access to the modules directory
• Palette visibility — checkbox to show/hide modules from the palette without removing them
• Module reload system (unloads classes, removes scripts, re-registers fresh)
• Installer preserves custom modules during updates (backup/restore)
• Dynamic settings button in properties (no more hardcoded module list)
• Settings tab divider between system and module settings

Polish & Precision v1.3.5

v1.3.5 — Polish & Precision

Editor Improvements

• Arrow key movement — move selected modules with arrow keys (5px default, 20px with Shift, 1px with Alt)
• In-app Help panel — press F1 or click ❓ Help in the toolbar for keyboard shortcuts, editor guide, getting started, and troubleshooting
• Canvas resize fix — canvas now properly resizes when sidebar panels are pinned/unpinned
• No more play buttons on images — static modules no longer show unnecessary simulation controls

Chat Module Fixes

• Message overflow fixed — all 4 combinations of NewMessages (above/below) + Position (top/bottom) now work correctly with allowClipping disabled
• Emote persistence — emotes in chat messages are preserved across page reloads
• Chat simulation — play button auto-spawns test messages for previewing in the editor

Media Library

• Fixed OS drag-drop — files dragged from Windows Explorer now correctly copy to the media folder
• Subdirectory delete — delete button now works in subdirectories
• Folder delete — folders can now be deleted from the media panel
• Cleaner breadcrumbs — removed

Modular by Design v1.3.4

Module Simulation System Overhaul

• Simulation logic moved out of the editor and into modules themselves
• Modules now expose window[name] = { _main, _simulator } with an editorRegister() method
• Editor dynamically loads and registers simulators per placed instance
• Proper cleanup on module delete, scene switch, and re-render
• New editorClass field in info.json — any new module can provide its own editor preview and simulation without touching editor code
• Developer Guide updated with the new module authoring pattern

Chat Module Fixes

• CSS gradient rendering — uses SVG foreignObject to let the browser render backgrounds natively (pixel-perfect multi-layer gradients)
• Border styles — ridge, groove, and other complex border-styles now render correctly via the same CSS capture approach
• Badge alignment — badges vertically centered with text, respects padding when badges are larger than font
• NameOnNewLine — new setting to display username on a separate line above the message
• allowClipping — when disabled, partially-visible messages are hidden entirely instead of being visually clipped
• hideBots moved into ChatBoxes section for better organisation
• Removed obsolete settings: BeforeCanvas, MessageArea, platforms (YouTube/Twitch colors)
• Fixed async rendering cache timing (data URLs for near-synchronous loading)

Editor Improvements

• Canvas Settings dropdown — replaces inline width/height inputs with a clean dropdown menu
• Lock to Canvas — new toggle that constrains both move and resize to canvas bounds (fixes resize escaping the canvas)
• Layer visibility toggle — eye icon on each layer to show/hide modules without deleting them; hidden layers are dimmed with strikethrough
• Settings panel fix — module tabs now always appear when opening settings from the properties panel button
• Dynamic settings tabs — modules with hasSettings automatically get a settings tab
• Schema labels & tooltips — all settings fields now have explicit labels and hover tooltips

Media Library

• Fixed OS file drag-drop — files dragged from Windows Explorer now correctly copy to the media folder (uses Electron's webUtils.getPathForFile for sandboxed mode)

Documentation

• README updated with correct project structure
• Developer Guide wiki added: module creation, schema system, draw signatures, WebSocket format

CanvasUI Stream Manager v1.3.3

New Features

• Webcam multi-instance — Multiple webcam modules per scene, each with its own device, mirror, and mask settings
• Audio Visualiser multi-instance — Multiple audio visualiser placements per scene with per-instance settings (device, direction, mirrored, bar width, spacing)
• Audio Visualiser live simulation — Play button loads the real module with live microphone data instead of fake bars
• Conditional schema fields (showWhen) — Schema types can now show/hide based on sibling values (e.g. gradient stops only visible when mode is "gradient")
• Gradient editor in TypeRenderer — New gradient type renders a preview bar + full stop editor with color pickers and position sliders
• Audio device dropdown — Audio Visualiser device setting renders as a dropdown of available devices instead of a text input
• Per-instance properties — Webcam and Audio Visualiser settings moved from global config to module properties panel

Fixes

• TypeRenderer now renders schema-defined properties even if they don't exist in the config yet (creates defaults)
• Removed hardcoded mode visibility logic (replaced with generic showWhen system)
• Audio visualiser colors section: levels hidden when mode=gradient, gradient hidden when mode=levels
• Webcam simulator reads from per-instance mod.settings instead of global config
• Webcam preview label shows per-instance device name

Release - Read to use beta version

A major update bringing a modular architecture, canvas-based chat, webcam support, and a cleaner config system.

Highlights

🧩 Module Discovery System — Modules now live in their own directories with info.json manifests. Drop a folder into www/modules/ to add custom modules.

💬 Canvas-Based Chat — Chat completely rewritten to render directly to canvas. Supports linear gradients (multiple layers), text-shadow, drop-shadow, borders, fit-content width, and right-alignment.

📷 Webcam Module — New module for live camera feeds. Supports device selection, mirror, circle/rounded masks. Works with virtual cameras like XSplit VCam.

🎬 Scene System Overhaul — Draw order now follows config order. Multi-instance support for images and videos. Custom IDs preserved on save.

What's New

Modules

• New webcam module with device picker and mask options
• Modules restructured into www/modules/{name}/ directories
• modules.json manifest maps module names to their info files
• info.json defines metadata, settings schema, and entrypoint
• allowMultiple flag controls whether duplicates are allowed per scene

Editor

• Dynamic palette built from module discovery (no hardcoded items)
• Scene duplication (⧉ button)
• Scene rename via double-click
• Live chat preview with 💬 test message and 🗑 clear buttons
• Image modules now render in Play All mode
• WebSocket Admin tool (📡) for sending raw messages to overlay
• Layer names simplified to icon + ID
• Custom module IDs saved correctly to config

Chat

• Full canvas rewrite — no DOM elements
• Multiple stacked linear-gradient backgrounds
• text-shadow and drop-shadow (filter) support
• font-size, border-width, fit-content width, right-alignment
• localStorage message persistence
• Removed: split/separated chat mode, chat.css

Config

• All _type / _item_type metadata moved to module info.json schema fields
• Config is now pure data — no metadata keys
• Build uses config.example.js as release config (no personal data leaks)
• Build reads version from package.json (no more hardcoded override)

Installer

• Preserves www/media/ and www/config.js during updates/reinstalls
• PATH manipulation retained for CLI access

Fixes

• Removed debug logging from audio visualiser and media panel
• Fixed scene tab double-click rename (click/dblclick conflict)
• Fixed draw order (scene config order = z-order)
• OBS URL always includes ?allowaudio=true
• Electron camera permissions auto-granted
• --disable-features=MediaFoundationVideoCapture for shared virtual camera access

Upgrade Notes

• If upgrading from v1.2.x, your existing config.js will work — the system falls back to _type in config if no schema is found in info.json
• The www/modules/ directory structure has changed — old flat .js files are now in subdirectories
• chat.css has been removed (chat is fully canvas-based now)