Screenplay

A multiplayer canvas for AI-built prototypes.

Localhost runs on one machine. Branches don't sit side by side. Screen recordings aren't a substitute for review. Screenplay puts every direction on a shared canvas, with state and cursors synced.

What changed

Real code adds capability. It also breaks parts of the design loop.

  • Collaboration

    Localhost and agent chats aren't shared. Two designers working on the same prototype can't see each other's screens or read each other's transcripts. Screenplay puts the prototype in a shared room — same artboards, same sandbox, same agent.

  • Going broad

    Agents work one direction at a time. Comparing alternatives means juggling branches that don't sit next to each other. In Screenplay, each artboard is its own branch in its own sandbox, side by side on the canvas.

  • Communication

    Screen recordings aren't a substitute for design review. Screenplay lays every screen and every state on an infinite canvas. Comments anchor to elements, and changing state updates every viewer in the room.

How it works

Prompt, branch, and review without leaving the canvas.

  1. 01Build with the agent

    Each artboard runs a coding agent inside its own sandbox. The loop is the same as Cursor or Claude Code, with the canvas one click away.

  2. 02Branch side by side

    Each artboard is its own branch in its own sandbox. Compare directions on the canvas instead of toggling between tabs.

  3. 03Bring the team in

    Share the link. Reviewers see the same artboards, the same agent transcript, and your cursor. Comments anchor to elements.

  4. 04Refine and commit

    Expose values as knobs, refine them live, and the agent writes the chosen values back into the code as new defaults.

Two packages

Open source, framework-agnostic, MIT licensed.

@screenplay.space/knobs

Adjust values without re-prompting the agent.

Ask the agent once to expose a value as a knob — spacing, copy, a color — and you or a reviewer can change it live. The real component re-renders, multiplayer, with real state.

  • Live, not approximated
  • Synced across viewers
  • Added by the agent on demand
  • Commit a value back to code
@screenplay.space/state

Every viewer sees the same state at the same time.

Forms, toggles, selections, route params, the active step — share any value with one hook and it becomes multiplayer. Backed by Yjs, conflict-free, and persisted per artboard.

  • Anything stateful can be shared
  • Conflict-free (CRDTs)
  • Persists per artboard
  • Works with Zustand, Jotai, Redux

Install: npm i @screenplay.space/knobs·npm i @screenplay.space/state

Bring the design loop back.

Point Screenplay at your repo and the next prototype you build is one link away from a real review.