streamdeck-react

Build React-based Stream Deck plugins with hooks and manifest generation.

3|Updated Mar 1, 2026

Search Tags:#react #plugin #vite #adapter #renderer #streamdeck #takumi

Ready to run

npx skills add https://github.com/fcannizzaro/streamdeck-react --skill streamdeck-react

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: streamdeck-react
Source: https://github.com/fcannizzaro/streamdeck-react/tree/main/skills/streamdeck-react
Command: npx skills add https://github.com/fcannizzaro/streamdeck-react --skill streamdeck-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing and maintaining Stream Deck plugins with React is complex due to rendering, state synchronization, and hardware backend integration. The skill provides a complete React renderer, hooks, and scaffolding to build isolated action roots that render to hardware surfaces.

Core Features & Use Cases

React-driven rendering for keys, dials, and touch screens with a Takumi-based rasterizer.
Automatic plugin manifest generation and per-action hooks for settings, events, and coordinator support.
Starter templates and scaffolding to bootstrap new plugins with a minimal, production-ready setup.

Quick Start

Install the scaffolding and start a new plugin project using the provided CLI to quickly bootstrap a Stream Deck React plugin.

Frequently Asked Questions about streamdeck-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build Stream Deck plugins with React?▼

React-based Stream Deck plugins are built using a complete renderer that maps components to hardware surfaces. The skill provides an adapter, action hooks, and manifest generation to manage full lifecycle and state synchronization automatically.

Can I render React components directly on Stream Deck keys and touch screens?▼

React components render directly on Stream Deck keys, dials, and touch screens using a Takumi-based rasterizer. This handles isolated action roots and renders them directly to the hardware backend surfaces.

What is the best way to scaffold a new Stream Deck plugin using Vite?▼

The best way to scaffold a Stream Deck plugin is using the provided CLI starter templates. This bootstraps a minimal, production-ready Vite setup with lazy native bindings and a complete workflow from development to manifest generation.

Does this Stream Deck adapter support automatic plugin manifest generation?▼

Yes, the Stream Deck adapter supports automatic plugin manifest generation. It also provides per-action hooks for settings, events, and coordinator support to streamline the hardware integration and state management workflow.

How does state synchronization work when rendering React on hardware surfaces?▼

State synchronization when rendering React on hardware surfaces is managed through per-action hooks and a specialized adapter. This ensures React component lifecycle updates correctly reflect across Stream Deck keys, dials, and touch screens.