Developer Preview

Stage DSL

A declarative, JSX-based domain-specific language for describing stage lighting scenes. Write code that compiles to real-time collaborative 3D scenes.

What is Stage DSL?

Stage DSL is a custom JSX runtime that lets you describe stage lighting scenes using familiar React-like syntax. Instead of rendering to the DOM, it compiles to entity data structures that power VENU.studio's real-time collaborative 3D engine.

Think of it as Infrastructure as Code for stage design — version-controllable, composable, and human-readable scene definitions that can be edited by AI assistants, shared between projects, and integrated into automation workflows.

scene.tsx

<Scene name="Festival Main Stage">
  {/* Stage structure */}
  <Primitive 
    type="cube" 
    name="Stage Deck" 
    position={[0, -0.1, 0]}
    dimensions={{ width: 16, height: 0.2, depth: 12 }}
  />
  
  {/* Overhead truss with fixtures */}
  <TrussRig 
    name="Front Truss" 
    position={[0, 8, -4]} 
    series="F34"
  >
    <TrussElement catalogId="f34200" />
    <TrussElement catalogId="f34200" />
    <TrussElement catalogId="f34200" />
    
    <FixtureRepeater count={6} bar="bottom-center">
      <Fixture slug="robe-bmfl-spot" dmxAddress="auto" />
    </FixtureRepeater>
  </TrussRig>

  {/* Stage zones for documentation */}
  <StageZone 
    type="stage" 
    vertices={[[-8, -6], [8, -6], [8, 6], [-8, 6]]} 
  />
  
  {/* Guide plane for positioning */}
  <GuidePlane type="ground" visible={true} opacity={0.3} />
</Scene>

Core Components

<Scene>

The root container for all scene objects. Every Stage DSL file starts with a Scene component.

<Fixture>

Stage lighting fixtures referenced by library slug. Supports DMX addressing, mode selection, and truss attachment configuration.

<TrussRig>

Truss systems built from catalog pieces. Supports inline construction with TrussElement children or references to library items.

<FixtureRepeater>

Distribute multiple fixtures along a truss. Supports count-based, spacing-based, position-based, and structural point placement modes.

<Primitive>

Basic 3D shapes (cube, sphere, cylinder, cone, torus, plane, bar) for stage structures, platforms, and visual markers.

<CadModel>

Import external CAD files (OBJ, GLTF, 3DS) for venue models, custom props, and detailed scenic elements.

<StageZone>

Define stage areas (stage, audience, wings-sl, wings-sr) for documentation and area-based lighting calculations.

<Group>

Organize scene objects hierarchically. Children inherit parent transforms and can be manipulated as a unit.

Key Features

AI-Native Design

Text-based format that AI assistants can read, understand, and modify. Describe your scene in natural language and let the AI write the code.

Real-Time Collaboration

Compiles to a CRDT-backed entity system. Changes sync instantly across all connected users with conflict-free merging.

Version Control Ready

Plain text JSX files that work with Git. Track changes, branch for variations, and merge designs like you merge code.

Live 3D Preview

Real-time compilation with instant 3D visualization. See your changes as you type with interactive number scrubbing.

Library Integration

Reference fixtures and truss configurations from your organization's library. Autocomplete and validation ensure correct usage.

Composable Patterns

Build reusable scene fragments. Save truss configurations to your library and reference them across projects.

Transform System

Every component supports a consistent set of transform props. Positions are in meters, and the deg() helper makes rotation intuitive.

transforms.tsx

{/* Position: [x, y, z] in meters */}
<Fixture 
  slug="robe-bmfl-spot" 
  position={[2.5, 6, -3]}  // 2.5m right, 6m up, 3m upstage
/>

{/* Rotation: [x, y, z] in radians - use deg() for degrees */}
<Primitive 
  type="cube" 
  rotation={[deg(0), deg(45), deg(0)]}  // Rotated 45° on Y axis
/>

{/* Scale: [x, y, z] multipliers */}
<CadModel 
  src="/models/speaker.glb" 
  scale={[1.5, 1.5, 1.5]}  // 150% size
/>

{/* Groups inherit transforms */}
<Group name="Stage Left Wash" position={[-5, 0, 0]}>
  {/* All children positioned relative to group */}
  <Fixture slug="led-par" position={[0, 4, 0]} />  // Actually at [-5, 4, 0]
  <Fixture slug="led-par" position={[0, 4, 2]} />  // Actually at [-5, 4, 2]
</Group>

Fixture Distribution

The <FixtureRepeater> component supports multiple distribution modes for placing fixtures along truss systems.

Count Mode— Exactly N fixtures evenly distributed

<FixtureRepeater count={6} bar="bottom-center">
  <Fixture slug="robe-bmfl-spot" dmxAddress="auto" />
</FixtureRepeater>

Spacing Mode— Fixed distance between fixtures

<FixtureRepeater spacing={1.5} startOffset={0.5} endOffset={0.5}>
  <Fixture slug="led-par" dmxAddress="1/1" />
</FixtureRepeater>

Positions Mode— Explicit positions along truss

<FixtureRepeater positions={[0.5, 2.0, 3.5, 5.5]}>
  <Fixture slug="moving-head" />
</FixtureRepeater>

At Mode— At structural points (joints, centers, ends)

<FixtureRepeater at="joints" offset={0.15}>
  <Fixture slug="beam-light" />
</FixtureRepeater>

What's Coming

Custom Components

Define reusable scene fragments as custom components. Package common configurations and share across your organization.

Parametric Templates

Scene templates with configurable parameters. Adjust dimensions, fixture counts, and layouts through props.

Constraint System

Define spatial relationships and constraints. Keep fixtures aligned, maintain spacing ratios, and snap to grid.

Animation & Cueing

Define fixture movements, color changes, and cue states within the DSL. Preview looks before export.

CLI Tooling

Validate, compile, and export scenes from the command line. Integrate into CI/CD pipelines for automated documentation.

Try Stage DSL Today

Stage DSL is available in VENU.studio's Scene Code Editor. Request early access to start designing with code.

Request Early Access