Stagehand

Example 1: Basic stage and scene interaction

This is Stagehand at its simplest. You don't need to name your stages and scenes: Stagehand detects sibling elements without a stage name as being part of the same stage.

Example output

(Click on the Stagehand icon in the upper left to toggle the toolbar)

Source code

<div data-stage data-scene>
  Hey! I'm part of Stage 1, Scene 1.
</div>

<div data-stage data-scene>
  Heyo! I'm part of Stage 1, Scene 2.
</div>

<div>
  I'm not part of a stage.
</div>

<div data-stage data-scene>
  Hullo. I'm part of Stage 2, Scene 1.
</div>

<div data-stage data-scene>
  Greetings. I'm part of Stage 2, Scene 2.
</div>