Installation

Requirements

• Node.js 20+
• React 18 or 19
• TypeScript 5+ if your plugin is written in TypeScript
• A standard Stream Deck plugin project with a manifest.json

Install the Library

npm install @fcannizzaro/streamdeck-react react

@fcannizzaro/streamdeck-react ships the Stream Deck SDK integration and Takumi renderer bindings as package dependencies, so a basic plugin does not need extra runtime packages just to render keys.

Add a Bundler

The sample plugins use Rollup together with the helpers exported from @fcannizzaro/streamdeck-react/rollup:

npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json rollup-plugin-esbuild

What Gets Installed

• react-reconciler powers the custom React renderer.
• @elgato/streamdeck handles the Stream Deck SDK connection.
• @takumi-rs/core and @takumi-rs/helpers render your JSX tree to hardware-ready images.

Fonts

You must provide at least one font file to createPlugin().

• Supported formats: .ttf, .otf, .woff
• Not supported: .woff2
• Source: local file loaded as Buffer or ArrayBuffer

import { readFile } from 'node:fs/promises';

const font = {
  name: 'Inter',
  data: await readFile(new URL('../fonts/Inter-Regular.ttf', import.meta.url)),
  weight: 400,
  style: 'normal' as const,
};

See Font Management for the full shape and loading strategy.

Next Steps