Touch Strip Layout Reference

Fresh

Source

Elgato Stream Deck SDK - Touch Strip Layout

Overview

Custom touch strip layouts for Stream Deck + devices. Each action renders one quarter of the touch strip at 200 x 100 px.

INFO

Individual actions cannot render the entire strip, but coordinated plugins can simulate full-strip rendering.

Layout Definition

Layouts can be defined as JSON files distributed with the plugin or as programmatic objects.

{
  "$schema": "https://schemas.elgato.com/streamdeck/plugins/layout.json",
  "id": "my-custom-layout",
  "items": []
}

Item Types

Bar

Horizontal progress-style bar with customizable fill.

Subtype	ID	Description
Rectangle	0	Standard bar
DoubleRectangle	1	Split bar
Trapezoid	2	Tapered bar
DoubleTrapezoid	3	Split tapered
Groove	4	Inset channel

GBar

Similar to Bar but includes a triangle indicator beneath showing position.

Pixmap

Displays images from:

• Local file paths
• Base64-encoded strings
• SVG data

Text

Configurable text rendering with:

• Alignment (left, center, right)
• Color and font properties
• Overflow handling: clip, ellipsis, fade

Title Integration

Setting a text item's key to "title" enables Property Inspector font customization and setTitle() method integration.

Universal Item Properties

Property	Type	Description	Mutable
key	string	Unique identifier	No
rect	array	[x, y, width, height] within 200x100 canvas	No
type	string	Item classification	No
enabled	boolean	Visibility toggle (default: true)	Yes
opacity	number	0-1 in 0.1 increments	Yes
zOrder	number	Layering (0-700 range)	Yes
background	string	Named colors, hex, or gradients	Yes

Range Definition

Bar and GBar items support custom value ranges:

{
  "key": "volume",
  "type": "bar",
  "rect": [10, 40, 180, 20],
  "range": {
    "min": 0,
    "max": 100
  }
}