Demo Time

The Remote Control PWA provides the following features for managing presentations remotely:

• Live screenshot preview: View a preview of the next slide or step.
• Navigation: Advance to the next step/slide or go to the previous one.
• Step Overview: See a list of all steps within the current demo.
• Real-time synchronization: All controls are synced in real-time with the main presentation.
• PWA Support: The interface is installable on supported browsers for a native-like experience.

The Demo Time MCP server, provided via the @demotime/mcp package, implements the Model Context Protocol (MCP). This allows AI assistants and MCP-compatible clients to interact with your Demo Time documentation and slides using natural language.

Key capabilities include:

• Searching through Demo Time documentation using natural language queries.
• Automating Demo Time actions, such as opening files or running specific steps.
• Integrating directly with AI tools that support the MCP standard.

Demo Time supports both JSON and YAML formats for act files. You can set the default format using the demoTime.defaultFileType setting.

{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "My Demo",
  "description": "A sample demo",
  "version": 3,
  "scenes": [
    {
      "title": "Step 1",
      "moves": [
        {
          "action": "create",
          "path": "test.txt",
          "content": "Hello World"
        }
      ]
    }
  ]
}

title: My Demo
description: A sample demo
version: 3
scenes:
  - title: Step 1
    moves:
      - action: create
        path: test.txt
        content: Hello World

Demo Time uses standard VS Code configuration patterns:

• Settings: User and workspace-specific settings are defined in package.json under contributes.configuration.
• Validation: JSON schemas are provided for demo and slide files to enable IntelliSense and validation within VS Code.

The Overview dashboard provides several monitoring and navigation capabilities:

Monitoring

• Scene list: View a table or grid of scenes including their title, description, and status (enabled/disabled).
• Slide counts: See the number of slides per scene and the total slides in the current group.
• Current session: If a presentation is active, the dashboard highlights the currently playing scene and slide.

Actions and Shortcuts

You can perform the following actions via toolbar buttons in the dashboard:

• Scene Control: Start a scene or open the presenter view.
• Navigation: Run a scene move-by-move or jump directly to a specific slide.
• Configuration: Open the act configuration editor for quick edits.
• Execution: Run a scene by its ID.

Demo Time uses a hierarchical theatrical structure to organize complex demos into manageable, narrative-driven presentations. This hierarchy allows you to move from the big picture down to individual atomic actions.

The hierarchy follows this order:

1. Play: The entire demo project (the .demo folder).
2. Act: A single demo file (YAML or JSON) focusing on a specific topic.
3. Scene: A logical section within an Act that groups related moves.
4. Move: The smallest unit of automation; a single action (e.g., opening a file, typing text, or highlighting code) that executes within a Scene.

To ensure smooth animations in the animated layout, follow these guidelines:

• Supported Elements: Only path, line, polyline, polygon, rect, circle, and ellipse elements are drawn with the stroke animation. Other elements (like groups or images) are revealed instantly.
• Animation Order: Paths are animated in the order they appear in the SVG document.
• Text Animation: Text elements are animated with the typewriter effect if textTypeWriterEffect is enabled.
• Directive Placement: Place <!-- speed: N --> and <!-- pause: ... --> comments directly before the element where the behavior should change.

All EngageTime actions require a sessionId to identify which session to control. You must define this at the root of your act file under the engageTime key.

You can configure this via the Act Editor UI in the Act file Settings section, or directly in your YAML code.

title: EngageTime
description: Test out the EngageTime interaction
version: 3
engageTime:
  sessionId: 4fn3gy
scenes:
  - id: demo-mevoasl4-rp3l
    title: Start a session
    moves:
      - action: startEngageTimeSession

The setState action allows you to store key/value pairs in the extension state. This state persists during the demo but is reset when the extension starts up or when all demos are reset.

To access a stored value in subsequent actions, use the {STATE_<key>} syntax.

Example: Storing and using clipboard content

1. Store clipboard content: Use setState with the value {DT_CLIPBOARD}.
2. Retrieve content: Reference it in another action (e.g., a create action) using {STATE_resourceID}.

// 1. Store clipboard content
{
  "action": "setState",
  "state": {
    "key": "resourceID",
    "value": "{DT_CLIPBOARD}"
  }
}

// 2. Use the stored value in a later action
{
  "action": "create",
  "path": "sample.json",
  "content": "{\n  \"firstName\": \"{STATE_resourceID}\"\n}"
}