BeatKhana Development

Overlay editor

Canvas, layers, data bindings, components, media, map cards and every major inspector family.

Documents and canvas

Open Scenes & components to create, rename, import, export or delete documents, then open a scene in the editor. Canvas zoom changes only the editor view. Document width/height define the render resolution. Nodes have parent, type, name, position, size, rotation, scale, origin, opacity, z-index, visibility and lock state.

Editor actions include select, drag, resize, duplicate, bring to front, send to back, delete, align to canvas and reorder in the layer tree. Parent containers establish hierarchy and inherited binding context.

Component catalogue

Built-ins cover background/image/shape, static and data text, team/player/match/division/bracket names, score/accuracy/misses/bad-cuts/mistakes/combo, song metadata, team score, score display, replay counter, tug-of-war, progress, song/map cards, map pool and picks/bans grids, video/Twitch/WebRTC/replay/map-preview players, bracket, match summary, upcoming/previous matches, countdown, casters, winners, container and custom data components.

Custom variants include team card, player panel, accuracy graph, picks/bans timeline, flow overview, aggregate overview, player/team statistics, prize pool and BeatKhana match box.

Appearance

Configure border width/style/color/radius, blend mode, blur, shadow, opacity, colors and background. Text adds family, size, weight, color, stroke, alignment, transform and number animation (flow, fast, sudden). Layout uses exact pixels—test at native output size.

Data binding

Team/player binding can use a fixed index or inherited context. Map binding can use inherited card/repeater context, fixed pool index, current TA map, pick/ban action index, next picked map or lightshow current song. Containers can repeat active players, a bound team's players, teams, maps or actions. Reusable component instances select a component document as their source.

Media

Video sources include uploaded asset, external URL/player area, WebRTC, HLS/LLHLS and Twitch, with fill/fit, autoplay, loop, controls and mute options. Image data can bind to an asset, player avatar/flag, team image, map cover, map winner, replay caller, actioner, tournament logo or tournament background.

Map preview/replay players expose playback source, start point, light rendering, saber visibility, performance preset, anti-aliasing, bloom and environment colors. Broadcast rendering can be GPU-heavy; use the optimized preset first and test on the production machine.

Map and score presentation

Map card families include BeatKhana Classic/Broadcast/Flow/Poster/Compact, BSTS Default/Flow/Overview and BSWC 2023–2026. Configure size, side colors, background/text/muted/tiebreak colors and relevant map details. Team-point and replay-icon displays configure icon assets and left-to-right/right-to-left filling.

Safe editing

Use reusable components for repeated team/player cards. Avoid dependency cycles. Lock finished backgrounds, name layers semantically, test missing data and long names, keep a fallback scene, and export a .bk.scene package before a substantial live-event change.

On this page