### Start Presentation Mode Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/os-and-desktop.mdx

An example of setting up a Mac for presentation mode at the start of a demo, including enabling caffeine, muting volume, enabling focus mode, hiding the menubar, and hiding the dock.

```APIDOC
## Presentation Mode Example

Here's a comprehensive example of how to set up your Mac for presentation mode at the start of a demo:

### JSON Example

```json
{
  "title": "Start Presentation Mode",
  "description": "Set up Mac for presenting",
  "steps": [
    {
      "action": "macos.enableCaffeine",
      "duration": 90
    },
    {
      "action": "macos.muteVolume"
    },
    {
      "action": "macos.enableFocusMode"
    },
    {
      "action": "macos.hideMenubar"
    },
    {
      "action": "macos.hideDock"
    },
    {
      "action": "setPresentationView"
    }
  ]
}
```
```

--------------------------------

### Install Dependencies

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/pwa/README.md

Installs project dependencies using npm. Run this command before starting development or building the project.

```bash
npm install
```

--------------------------------

### Start PowerPoint Add-in in Browser

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/powerpoint-addin/readme.md

Command to start the add-in and open it in a browser, useful for debugging or previewing.

```bash
npm start -- web --document
```

--------------------------------

### Example Demo Step: Open a File

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/mcp/README.md

An example JSON payload representing a demo step to open a specific file. This action is part of the Demo Time protocol.

```json
{
  "action": "open",
  "path": "src/content/docs/actions/file.mdx"
}
```

--------------------------------

### Positioning Examples (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Examples of specifying text positions using line and character numbers or keywords like 'start' and 'end'.

```yaml
position: "10" # Line 10
position: "10:20" # Lines 10 to 20
position: "10,5" # Start line 10, character 5
position: "10,5:20,10" # Start line 10, character 5
position: start # First line
position: end # Last line
```

--------------------------------

### Positioning Examples (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Examples of specifying text positions using line and character numbers or keywords like 'start' and 'end'.

```json
"position": "10" // Line 10
"position": "10:20" // Lines 10 to 20
"position": "10,5" // Start line 10, character 5
"position": "10,5:20,10" // Start line 10, character 5 to end line 20, character 10
"position": "start" // First line
"position": "end" // Last line
```

--------------------------------

### Start Development Server

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/pwa/README.md

Starts the development server for the PWA. The application will be accessible at http://localhost:3001.

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/contribute.mdx

Install all project dependencies using Yarn after cloning the repository.

```bash
yarn install
```

--------------------------------

### Example Placeholder Usage in File

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Illustrates how start and end placeholders should be defined within a file to mark the section for text replacement.

```javascript
// Start of demo1
const ext = 'Demo Time';
// End of demo1
```

--------------------------------

### Demo Time Configuration Schema (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/json-schema.mdx

Example of a valid Demo Time configuration file in YAML format. For YAML files, the schema is applied automatically via the "yaml.schemas" setting in VS Code, provided the "redhat.vscode-yaml" extension is installed.

```yaml
title: Demo
description: Demo description
version: 3
scenes: []
```

--------------------------------

### YAML Act File Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/settings.mdx

This is an example of a Demo Time act file in YAML format. It mirrors the JSON example, defining a demo with one scene and a 'create' move.

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

--------------------------------

### Preview Production Build

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/pwa/README.md

Starts a local server to preview the production build of the PWA. Useful for testing the optimized application before deployment.

```bash
npm run preview
```

--------------------------------

### Create and Open a File in a Scene (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/adding-moves.mdx

This YAML configuration achieves the same result as the JSON example: creating a 'sample.json' file with content and then opening it.

```yaml
title: Demo
description: Demo description
version: 3
scenes:
  - title: Create and open sample.json
    description: Create a sample.json file with some content.
    icons:
      start: file-code
      end: pass-filled
    moves:
      - action: create
        path: sample.json
        content: "{\n  \"firstName\": \"Elio\",\n  \"lastName\": \"Struyf\"\n}"
      - action: open
        path: sample.json
```

--------------------------------

### Start EngageTime Session (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/engagetime.mdx

Use the `startEngageTimeSession` action to initiate or open an EngageTime session. Ensure the `sessionId` is configured.

```yaml
action: startEngageTimeSession
```

--------------------------------

### MCP Server Setup for AI Integration

Source: https://context7.com/estruyf/vscode-demo-time/llms.txt

Configure the Model Context Protocol server to enable AI assistants to search Demo Time documentation. Run with npx.

```bash
# Run directly with npx
npx -y @demotime/mcp
```

```json
// .vscode/mcp.json — register in VS Code
{
  "servers": {
    "Demo Time": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@demotime/mcp"]
    }
  }
}
```

```typescript
// Tool: search
// Input: { query: string }  (min length 1)
// Returns: markdown-formatted documentation excerpts matching the query

// Example usage via MCP client:
const result = await mcpClient.callTool('search', { query: 'highlight code blur opacity' });
// Returns top 10 matching documentation sections as markdown
```

--------------------------------

### Install Slidev Demo Time Addon

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/integrations/slidev.mdx

Install the `slidev-addon-demotime` package using npm. This addon provides the necessary components to integrate Demo Time with Slidev.

```bash
npm install slidev-addon-demotime
```

--------------------------------

### Link to Trigger Next Demo Step

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/features/uri-handler.mdx

An example of an HTML link that uses the 'next' command to trigger the next demo step.

```html
<a href="vscode://eliostruyf.vscode-demo-time?command=next">
  Next
</a>
```

--------------------------------

### End Presentation Mode Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/os-and-desktop.mdx

An example of restoring Mac settings after a presentation, including disabling focus mode, showing the menubar, showing the dock, unmuting volume, and disabling caffeine.

```APIDOC
## End Presentation Mode Example

And to restore your Mac after the presentation:

### JSON Example

```json
{
  "title": "End Presentation Mode",
  "description": "Restore Mac settings",
  "moves": [
    {
      "action": "macos.disableFocusMode"
    },
    {
      "action": "macos.showMenubar"
    },
    {
      "action": "macos.showDock"
    },
    {
      "action": "macos.unmuteVolume"
    },
    {
      "action": "macos.disableCaffeine"
    },
    {
      "action": "unsetPresentationView"
    }
  ]
}
```
```

--------------------------------

### JSON Act File Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/settings.mdx

This is an example of a Demo Time act file in JSON format. It defines a simple demo with one scene and a 'create' move.

```json
{
  "$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"
        }
      ]
    }
  ]
}
```

--------------------------------

### Script Output Usage Example (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/terminal.mdx

Demonstrates how to execute a script, capture its single-line output using an `id`, and then use that output in a subsequent `create` action to populate a JSON file.

```json
{
    "title": "Script example",
    "description": "",
    "moves": [
        {
            "action": "executeScript",
            "id": "firstName",
            "path": "writeFirstName.mjs",
            "command": "node"
        },
        {
            "action": "create",
            "path": "sample.json",
            "content": "{\n  \"firstName\": \"{SCRIPT_firstName}\"\n}"
        },
        {
            "action": "open",
            "path": "sample.json"
        }
    ]
}
```

--------------------------------

### Demo Time Configuration Schema

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/json-schema.mdx

Example of a valid Demo Time configuration file in JSON format. Ensure the "$schema" property points to the correct schema URL.

```json
{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "Demo",
  "description": "Demo description",
  "version": 3,
  "scenes": []
}
```

--------------------------------

### Start EngageTime Session (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/engagetime.mdx

Use the `startEngageTimeSession` action to initiate or open an EngageTime session. Ensure the `sessionId` is configured.

```json
{
  "action": "startEngageTimeSession"
}
```

--------------------------------

### Copy and Paste Workflow Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/interactions.mdx

Demonstrates a workflow combining `copyToClipboard`, `executeVSCodeCommand`, and `pasteFromClipboard` to simulate a copy-paste operation within VS Code.

```json
[
  {
    "action": "copyToClipboard",
    "content": "welcome"
  },
  {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.showCommands"
  },
  {
    "action": "pasteFromClipboard"
  }
]
```

```yaml
- action: copyToClipboard
  content: welcome
- action: executeVSCodeCommand
  command: "workbench.action.showCommands"
- action: pasteFromClipboard
```

--------------------------------

### Start Development Watchers

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/contribute.mdx

Initiate the development watchers for the extension, webviews, and common modules. This command is essential for active development.

```bash
yarn vscode:dev
```

--------------------------------

### Script Output Usage Example (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/terminal.mdx

Demonstrates how to execute a script, capture its single-line output using an `id`, and then use that output in a subsequent `create` action to populate a JSON file.

```yaml
title: Script example
description: ""
moves:
  - action: executeScript
    id: firstName
    path: writeFirstName.mjs
    command: node
  - action: create
    path: sample.json
    content: "{\n  \"firstName\": \"{SCRIPT_firstName}\"\n}"
  - action: open
    path: sample.json
```

--------------------------------

### Run Demo Time MCP Server with npx

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/features/mcp-server.mdx

Execute the Demo Time MCP server directly using npx. This is a quick way to start the server for immediate use.

```bash
npx -y @demotime/mcp
```

--------------------------------

### Background Video Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/layouts/video.mdx

Configure a video to play as a background element by default. Ensure `muted` is true for background videos to prevent unexpected audio.

```md
---
layout: video
video: ".demo/assets/presentation-video.mp4"
---

# Welcome to Demo Time

This content appears over the video background.
```

--------------------------------

### Example Global Footer Template

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/layouts/header-footer.mdx

An example HTML file for a slide footer using Handlebars variables for name, email, and date. These variables are populated from the slide's front matter.

```html
<footer class="slide-footer">
  <span>{{name}}</span> | <span>{{email}}</span> | <span>{{date}}</span>
</footer>
```

--------------------------------

### Example Global Footer with Slide Placeholders

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/layouts/header-footer.mdx

An example HTML footer template that includes Handlebars placeholders for the current slide index (`{{crntSlideIdx}}`) and total slides (`{{totalSlides}}`), along with the date.

```html
<footer class="slide-footer">
  <span>Slide {{crntSlideIdx}} of {{totalSlides}}</span>
  <span class="muted"> | {{date}}</span>
</footer>
```

--------------------------------

### Open Keynote Action (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/external.mdx

Use the `openKeynote` action to open Apple Keynote directly from your demo. This action requires Keynote to be installed on your system.

```yaml
action: openKeynote
```

--------------------------------

### Example Frontmatter for Article

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/articles/example-article/index.md

Use this frontmatter structure for your article. Ensure all fields are correctly filled out, including your name and GitHub username for avatar display.

```markdown
---
title: 'Welcome to the Demo Time Articles!'
description: 'This is an example article to show how community members can contribute.'
slug: 'welcome-to-demo-time-articles'
date: 2025-07-25
author: 'Elio Struyf'
github: 'estruyf'
---
```

--------------------------------

### Create a Basic Slide

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/index.mdx

Define a single slide with front matter for theme and content. This is the simplest way to start creating slides.

```md
---
theme: default
---

# Title

Hello, **Demo Time**!

```

--------------------------------

### Open Keynote Action (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/external.mdx

Use the `openKeynote` action to open Apple Keynote directly from your demo. This action requires Keynote to be installed on your system.

```json
{
  "action": "openKeynote"
}
```

--------------------------------

### Get Demos Information

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/api.mdx

Retrieves information about all available demo files, the next demo in sequence, and the currently executing demo.

```APIDOC
## GET /api/demos

### Description
Returns all act files, the next demo, and the currently executing act file.

### Method
GET

### Endpoint
/api/demos

#### Response
```json
{
  "demoFiles": [
    {
      "filePath": "/absolute/path/to/demo.json",
      "demos": [
        { "id": "demo1", "title": "Demo 1" },
        { "id": "demo2", "title": "Demo 2" }
      ]
    }
  ],
  "nextDemo": { "id": "demo2", "title": "Demo 2" },
  "currentDemoFile": {
    "filePath": "/absolute/path/to/demo.json",
    "demo": [
      { "id": "demo1", "title": "Demo 1" }
    ]
  }
}
```

#### Response Description
- `demoFiles`: Array of act files, each with its file path and contained demos (id and title).
- `nextDemo`: The next demo to be executed (id and title), if available.
- `currentDemoFile`: The currently executing act file, with its file path and demos.
```

--------------------------------

### Link to Trigger Specific Demo Step by ID

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/features/uri-handler.mdx

An example of an HTML link that uses the 'runbyid' command to trigger a demo step with the ID 'demo1'.

```html
<a href="vscode://eliostruyf.vscode-demo-time?command=runbyid&id=demo1">
  Run step 1
</a>
```

--------------------------------

### Snippet File Example (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/snippet.mdx

A snippet file defines a sequence of actions. Use curly braces `{argument name}` to define variables that can be passed in from the snippet action.

```json
[
  {
    "action": "unselect"
  },
  {
    "action": "insert",
    "path": "{MAIN_FILE}",
    "contentPath": "{CONTENT_PATH}",
    "position": "{CONTENT_POSITION}"
  },
  {
    "action": "highlight",
    "path": "{MAIN_FILE}",
    "position": "{HIGHLIGHT_POSITION}"
  }
]
```

--------------------------------

### Snippet File Example (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/snippet.mdx

A snippet file defines a sequence of actions. Use curly braces `{argument name}` to define variables that can be passed in from the snippet action.

```yaml
- action: unselect
- action: insert
  path: "{MAIN_FILE}"
  contentPath: "{CONTENT_PATH}"
  position: "{CONTENT_POSITION}"
- action: highlight
  path: "{MAIN_FILE}"
  position: "{HIGHLIGHT_POSITION}"
```

--------------------------------

### Open PowerPoint Action (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/external.mdx

Use the `openPowerPoint` action to open Microsoft PowerPoint directly from your demo. This action requires PowerPoint to be installed and attempts to open the running instance.

```yaml
action: openPowerPoint
```

--------------------------------

### Two Columns Layout Example

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/layouts/two-columns.mdx

Use the `layout: two-columns` frontmatter to enable this layout. The `::right::` separator divides content into left and right columns.

```md
---
layout: two-columns
---

<!-- Content on the left -->

# Left

This shows on the left.

::right::

<!-- Content on the right -->

# Right

This shows on the right.

```

--------------------------------

### Example Demo Configuration (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/README.md

This JSON file defines a sample demo with multiple steps, including creating files, opening them, highlighting specific lines, and executing snippets with arguments. It serves as a template for creating your own demo configurations.

```json
{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "Sample demo",
  "description": "This is a sample demo configuration to show the capabilities of the extension.",
  "demos": [
    {
      "title": "Step 1",
      "description": "This is step 1",
      "steps": [
        {
          "action": "create",
          "path": "sample.json",
          "content": "{\n  \"firstName\": \"Elio\",\n  \"lastName\": \"Struyf\"\n}"
        },
        {
          "action": "open",
          "path": "sample.json"
        },
        {
          "action": "highlight",
          "path": "sample.json",
          "position": "2:3"
        }
      ]
    },
    {
      "title": "Step 2",
      "description": "This is step 2",
      "steps": [
        {
          "action": "snippet",
          "contentPath": "./snippets/insert_and_highlight.json",
          "args": {
            "MAIN_FILE": "sample.json",
            "CONTENT_PATH": "content.txt",
            "CONTENT_POSITION": "3",
            "HIGHLIGHT_POSITION": "4"
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### Start Presentation Mode (macOS)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/os-and-desktop.mdx

Sets up the Mac for presentation mode by enabling caffeine, muting volume, enabling focus mode, hiding the menubar and dock, and setting the presentation view. Supported on macOS.

```json
{
  "title": "Start Presentation Mode",
  "description": "Set up Mac for presenting",
  "steps": [
    {
      "action": "macos.enableCaffeine",
      "duration": 90
    },
    {
      "action": "macos.muteVolume"
    },
    {
      "action": "macos.enableFocusMode"
    },
    {
      "action": "macos.hideMenubar"
    },
    {
      "action": "macos.hideDock"
    },
    {
      "action": "setPresentationView"
    }
  ]
}
```

```yaml
title: Start Presentation Mode
description: Set up Mac for presenting
moves:
  - action: macos.enableCaffeine
    duration: 90
  - action: macos.muteVolume
  - action: macos.enableFocusMode
  - action: macos.hideMenubar
  - action: macos.hideDock
  - action: setPresentationView
```

--------------------------------

### Select Text via Placeholders (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Use this YAML configuration to select text by specifying start and end placeholders. An optional zoom level can be provided.

```yaml
# Via placeholders
action: selection
path: <relative path to the file>
startPlaceholder: <start placeholder>
endPlaceholder: <end placeholder>
zoom: <zoom level> # Optional
```

--------------------------------

### Open PowerPoint Action (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/external.mdx

Use the `openPowerPoint` action to open Microsoft PowerPoint directly from your demo. This action requires PowerPoint to be installed and attempts to open the running instance.

```json
{
  "action": "openPowerPoint"
}
```

--------------------------------

### macOS Presentation Setup

Source: https://context7.com/estruyf/vscode-demo-time/llms.txt

Configure macOS system features for a presentation, including focus mode, volume, Dock, and caffeine. Also hides desktop icons.

```json
{
  "title": "Presentation Setup",
  "version": 3,
  "scenes": [
    {
      "title": "macOS presentation mode",
      "moves": [
        { "action": "macos.enableFocusMode" },
        { "action": "macos.muteVolume" },
        { "action": "macos.hideDock" },
        { "action": "macos.enableCaffeine", "duration": 60 },
        { "action": "hideDesktopIcons" }
      ]
    },
    {
      "title": "Teardown",
      "moves": [
        { "action": "macos.disableFocusMode" },
        { "action": "macos.unmuteVolume" },
        { "action": "macos.showDock" },
        { "action": "macos.disableCaffeine" },
        { "action": "showDesktopIcons" }
      ]
    }
  ]
}
```

--------------------------------

### Start EngageTime Session

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/engagetime.mdx

Starts or opens an EngageTime session.

```APIDOC
## startEngageTimeSession

### Description
Starts or opens an EngageTime session.

### Method
POST

### Endpoint
/actions/engagetime/start

### Request Body
```json
{
  "action": "startEngageTimeSession"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### Complete Script Execution with Arguments (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/terminal.mdx

An example demonstrating how to execute a Node.js script with arguments and capture its output for use in a subsequent action. The `id` property is crucial for referencing the script's output.

```yaml
title: Script with arguments example
description: Passing arguments to a script
moves:
  - action: executeScript
    id: greeting
    path: greet.mjs
    command: node
    args:
      - Alice
      - "25"
  - action: create
    path: result.txt
    content: "{SCRIPT_greeting}"
```

--------------------------------

### Type in Command Palette

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/interactions.mdx

This sequence first opens the command palette, waits for a second, and then types 'welcome'. It's useful for automating command palette interactions.

```json
[
  {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.showCommands"
  },
  {
    "action": "waitForTimeout",
    "timeout": 1000
  },
  {
    "action": "typeText",
    "content": "welcome"
  }
]
```

```yaml
- action: executeVSCodeCommand
  command: "workbench.action.showCommands"
- action: waitForTimeout
  timeout: 1000
- action: typeText
  content: welcome
```

--------------------------------

### Complete Script Execution with Arguments (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/terminal.mdx

An example demonstrating how to execute a Node.js script with arguments and capture its output for use in a subsequent action. The `id` property is crucial for referencing the script's output.

```json
{
  "title": "Script with arguments example",
  "description": "Passing arguments to a script",
  "moves": [
    {
      "action": "executeScript",
      "id": "greeting",
      "path": "greet.mjs",
      "command": "node",
      "args": ["Alice", "25"]
    },
    {
      "action": "create",
      "path": "result.txt",
      "content": "{SCRIPT_greeting}"
    }
  ]
}
```

--------------------------------

### Start EngageTime Poll

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/engagetime.mdx

Starts a poll within an EngageTime session. Requires `pollId`.

```APIDOC
## startEngageTimePoll

### Description
Starts a poll that has been configured in your EngageTime session. Requires `pollId`.

### Method
POST

### Endpoint
/actions/engagetime/poll/start

### Parameters
#### Request Body
- **pollId** (string) - Required - The ID of the poll to start.

### Request Example
```json
{
  "action": "startEngageTimePoll",
  "pollId": "poll-1"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### Start New Copilot Chat

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Starts a new GitHub Copilot chat session.

```APIDOC
## Start a new Copilot chat

To start a new Copilot chat session, use the `newCopilotChat` action.

### Action

```json
{
  "action": "newCopilotChat"
}
```
```

--------------------------------

### Basic Intro Slide Layout

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/layouts/intro.mdx

Use the 'intro' layout for opening slides. Set the layout in the frontmatter and add your title and author.

```mdx
---
layout: intro
---

# Intro slides

&mdash; by Elio Struyf
```

--------------------------------

### Patch Actions Demo

Source: https://context7.com/estruyf/vscode-demo-time/llms.txt

Illustrates how to use `create` and `applyPatch` actions to manage file content using snapshots and patch files. This avoids manual line-by-line edits.

```json
{
  "title": "Patch Demo",
  "version": 3,
  "scenes": [
    {
      "title": "Restore file from snapshot",
      "moves": [
        {
          "action": "create",
          "path": "src/service.ts",
          "contentPath": ".demo/snapshots/service-base.ts"
        },
        { "action": "open", "path": "src/service.ts" }
      ]
    },
    {
      "title": "Apply patch",
      "moves": [
        {
          "action": "applyPatch",
          "path": "src/service.ts",
          "contentPath": ".demo/snapshots/service-base.ts",
          "patch": ".demo/patches/service-add-method.patch",
          "insertTypingMode": "line-by-line",
          "insertTypingSpeed": 80
        },
        { "action": "highlight", "path": "src/service.ts", "startPlaceholder": "// PATCH START", "endPlaceholder": "// PATCH END" }
      ]
    }
  ]
}
```

--------------------------------

### Install Playwright Chromium

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/export.mdx

The export feature requires the playwright-chromium package. Install it as a development dependency using npm.

```bash
npm install playwright-chromium -D
```

--------------------------------

### Configure Insert and Highlight Snippet

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/snippets/index.mdx

Configure the insert and highlight snippet by providing the necessary file paths and line numbers in the `args` object of your demo configuration.

```json
{
    "action": "snippet",
    "contentPath": "./snippets/insert_and_highlight.json",  // or .yaml
    "args": {
      "MAIN_FILE": "<relative path from workspace to the file to update>",
      "CONTENT_PATH": "<relative path to the file with the contents to insert>",
      "CONTENT_POSITION": "<line number>",
      "HIGHLIGHT_POSITION": "<line number>:<line number>"
    }
}
```

--------------------------------

### Start Custom Chat with Copilot

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Start a chat with a custom mode using the `customCopilotChat` action. Define the `mode` property to specify the chat mode. The `message` property is optional.

```json
{
  "action": "customCopilotChat",
  "mode": "Beast Mode 3.1"
}

{
  "action": "customCopilotChat",
  "mode": "Beast Mode 3.1",
  "message": "Write a function that returns 'Hello from Demo Time'."
}
```

```yaml
action: customCopilotChat
mode: "Beast Mode 3.1"
```

```yaml
action: customCopilotChat
mode: "Beast Mode 3.1"
message: "Write a function that returns 'Hello from Demo Time'."
```

--------------------------------

### Example: Hide Activity and Status Bars (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/setting.mdx

This example demonstrates how to hide the activity bar and status bar in VS Code by setting their respective properties to `false` or `hidden`.

```yaml
- action: setSetting
  setting:
    key: workbench.statusBar.visible
    value: false
- action: setSetting
  setting:
    key: workbench.activityBar.location
    value: hidden
```

--------------------------------

### Example: Hide Activity and Status Bars (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/setting.mdx

This example demonstrates how to hide the activity bar and status bar in VS Code by setting their respective properties to `false` or `hidden`.

```json
[
  {
    "action": "setSetting",
    "setting": {
      "key": "workbench.statusBar.visible",
      "value": false
    }
  },
  {
    "action": "setSetting",
    "setting": {
      "key": "workbench.activityBar.location",
      "value": "hidden"
    }
  }
]
```

--------------------------------

### Example Image Reference in Markdown

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/articles/example-article/index.md

Reference images within your article using their relative path. This example shows how to include an image named 'image.png' located in the same directory as the article.

```markdown
![Image](./image.png)
```

--------------------------------

### Create and Open a File in a Scene (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/adding-moves.mdx

This JSON configuration defines a scene that creates a file named 'sample.json' with specific content and then opens it in the editor.

```json
{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "Demo",
  "description": "Demo description",
  "version": 3,
  "scenes": [
    {
      "title": "Create and open sample.json",
      "description": "Create a sample.json file with some content.",
      "icons": {
        "start": "file-code",
        "end": "pass-filled"
      },
      "moves": [
        {
          "action": "create",
          "path": "sample.json",
          "content": "{\"firstName\": \"Elio\", \"lastName\": \"Struyf\"}"
        },
        {
          "action": "open",
          "path": "sample.json"
        }
      ]
    }
  ]
}
```

--------------------------------

### Draw an arrow with dt-arrow

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/slides/components/index.mdx

Use the `dt-arrow` component to draw arrows. Customize line color, width, and arrow head placement (start, end, or both). Coordinates define the start and end points.

```html
<dt-arrow 
  x1="0" 
  y1="100" 
  x2="480" 
  y2="100" 
  line-color="#15181f" 
  line-width="2" 
  arrow-head="both">
</dt-arrow>
```

--------------------------------

### Run Demo by ID with Optional Bring to Front

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/vscode-extension/assets/api/index.html

Use these URLs to run a specific demo by its ID. The `bringToFront` parameter is optional and brings the application to the front when set to true.

```url
{{API_URL}}/api/runById?id=demoId
```

```url
{{API_URL}}/api/runById?id=demoId&bringToFront=true
```

--------------------------------

### Get Notes

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/api.mdx

Retrieves the notes associated with the current slide or demo step.

```APIDOC
## GET /api/notes

### Description
Returns the notes of the current slide or move.

### Method
GET

### Endpoint
/api/notes

#### Response
```json
{
  "notes": "Your slide or step notes here..."
}
```

#### Response Description
- `notes`: The notes content of the current slide or step, if available.
```

--------------------------------

### Create File Using Stored State (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/vscode.mdx

Create a file named 'sample.json' and insert content that references a previously stored state value (e.g., '{STATE_resourceID}') using the `create` action.

```json
{
  "action": "create",
  "path": "sample.json",
  "content": "{
  \"firstName\": \"{STATE_resourceID}\"\n}"
}
```

--------------------------------

### Agent Copilot Chat

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Starts an agent chat with GitHub Copilot. The message is optional.

```APIDOC
## Start an agent chat with Copilot

To start an agent chat, use the `agentCopilotChat` action. The `message` property is optional.

### Action

```json
{
  "action": "agentCopilotChat"
}
```

### Action with Message

```json
{
  "action": "agentCopilotChat",
  "message": "Write a function that returns 'Hello from Demo Time'."
}
```
```

--------------------------------

### Edit Copilot Chat

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Starts an edit chat with GitHub Copilot. The message is optional.

```APIDOC
## Start an edit chat with Copilot

To start an edit chat, use the `editCopilotChat` action. The `message` property is optional.

### Action

```json
{
  "action": "editCopilotChat"
}
```

### Action with Message

```json
{
  "action": "editCopilotChat",
  "message": "Write a function that returns 'Hello from Demo Time'."
}
```
```

--------------------------------

### Get Screenshot

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/api.mdx

Returns a base64-encoded screenshot of the next slide or step, useful for previews.

```APIDOC
## GET /api/screenshot

### Description
Returns a screenshot of the next slide as a base64-encoded image.

### Method
GET

### Endpoint
/api/screenshot

#### Response
```json
{
  "screenshot": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
```

#### Response Description
- `screenshot`: Base64-encoded PNG image data of the next slide or step. Perfect for remote control PWA previews.
```

--------------------------------

### Example Demo Time Act File

Source: https://github.com/estruyf/vscode-demo-time/blob/main/apps/vscode-extension/README.md

This JSON file defines a demo sequence with multiple steps, including file creation, opening, highlighting, and using snippets. It serves as a configuration for the Demo Time extension.

```json
{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "Sample demo",
  "description": "This is a sample demo configuration to show the capabilities of the extension.",
  "version": 3,
  "scenes": [
    {
      "title": "Step 1",
      "description": "This is step 1",
      "moves": [
        {
          "action": "create",
          "path": "sample.json",
          "content": "{\n  \"firstName\": \"Elio\",\n  \"lastName\": \"Struyf\"\n}"
        },
        {
          "action": "open",
          "path": "sample.json"
        },
        {
          "action": "highlight",
          "path": "sample.json",
          "position": "2:3"
        }
      ]
    },
    {
      "title": "Step 2",
      "description": "This is step 2",
      "moves": [
        {
          "action": "snippet",
          "contentPath": "./snippets/insert_and_highlight.json",
          "args": {
            "MAIN_FILE": "sample.json",
            "CONTENT_PATH": "content.txt",
            "CONTENT_POSITION": "3",
            "HIGHLIGHT_POSITION": "4"
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### Custom Copilot Chat

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Starts a chat with a custom mode in GitHub Copilot. The message is optional.

```APIDOC
## Start a custom chat with Copilot

To start a chat with a custom mode, use the `customCopilotChat` action.

Define the `mode` property to specify the chat mode you want to use.

The `message` property is optional.

### Action with Mode

```json
{
  "action": "customCopilotChat",
  "mode": "Beast Mode 3.1"
}
```

### Action with Mode and Message

```json
{
  "action": "customCopilotChat",
  "mode": "Beast Mode 3.1",
  "message": "Write a function that returns 'Hello from Demo Time'."
}
```
```

--------------------------------

### Create File Action

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/file.mdx

Use the `create` action to create a new file. Provide the file path and optionally its content via the `content` argument or a `contentPath` argument for larger content.

```json
{
  "action": "create",
  "path": "<relative path to the file>",
  "content": "<content of the file> (optional)",
  "contentPath": "<relative path to the file (optional)"
}
```

```yaml
action: create
path: <relative path to the file>
content: <content of the file> # optional
contentPath: <relative path to the file> # optional
```

--------------------------------

### Image Preview Custom CSS

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/preview.mdx

Example CSS for customizing the image preview appearance using the `.preview_view` class.

```css
.preview_view {
     background-color: #000;
}

```

--------------------------------

### Execute Step by ID

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/references/api.mdx

Executes a specific step in a demo by its unique ID. Supports both GET and POST requests.

```APIDOC
## API /api/runById

### Description
This endpoint will execute a specific step by its ID in your demo.

#### GET request

### Method
GET

### Endpoint
/api/runById

### Parameters
#### Query Parameters
- **id** (string) - Required - The ID of the step you want to execute.
- **bringToFront** (boolean) - Optional - Bring the Visual Studio Code window to the front. Default is `false`.

#### POST request

### Method
POST

### Endpoint
/api/runById

### Parameters
#### Request Body
- **id** (string) - Required - The ID of the step you want to execute.
- **bringToFront** (boolean) - Optional - Bring the Visual Studio Code window to the front. Default is `false`.

### Request Example
```json
{
  "id": "<step id>",
  "bringToFront": "<bring the Visual Studio Code window to the front (optional) - default is false>"
}
```

### Headers
- `Content-Type: application/json`
```

--------------------------------

### Position Cursor in Editor (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Use 'positionCursor' to place the cursor at a specific line and character, or by using a start placeholder.

```yaml
# Via position
action: positionCursor
path: <relative path to the file>
position: <position>

# Via start placeholder
action: positionCursor
path: <relative path to the file>
startPlaceholder: <start placeholder>
```

--------------------------------

### Position Cursor in Editor (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Use 'positionCursor' to place the cursor at a specific line and character, or by using a start placeholder.

```json
// Via position
{
  "action": "positionCursor",
  "path": "<relative path to the file>",
  "position": "<position>"
}

// Via start placeholder
{
  "action": "positionCursor",
  "path": "<relative path to the file>",
  "startPlaceholder": "<start placeholder>",
}
```

--------------------------------

### Configure Keybindings for Demo Progression

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/tips/control-next-demo.mdx

Define custom keybindings in `keybindings.json` to control when the `demo-time.start` command is triggered. This allows for different navigation behaviors when viewing slides versus other code panels.

```json
[
  {
    "key": "right",
    "command": "demo-time.start",
    "when": "demo-time.presentation && activeWebviewPanelId == demoTime:preview"
  },
  {
    "key": "cmd+shift+right",
    "command": "demo-time.start",
    "when": "demo-time.presentation && activeWebviewPanelId != demoTime:preview"
  },
  {
    "key": "right",
    "command": "-demo-time.start",
    "when": "demo-time.presentation"
  }
]
```

--------------------------------

### Add Notes to Demo Configuration (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/features/using-notes.mdx

Configure your demo to include notes by specifying the relative path to the notes markdown file and an optional flag to show them on trigger.

```json
{
  "title": "<title>",
  "description": "<description>",
  "moves": [...],
  "notes": {
    "path": "<relative path to the file>",
    "showOnTrigger": "<show notes on trigger (optional) - default is false>"
  }
}
```

--------------------------------

### Start Agent Chat with Copilot

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Begin an agent chat with Copilot using the `agentCopilotChat` action. The `message` property is optional.

```json
{
  "action": "agentCopilotChat"
}

{
  "action": "agentCopilotChat",
  "message": "Write a function that returns 'Hello from Demo Time'."
}
```

```yaml
action: agentCopilotChat
```

```yaml
action: agentCopilotChat
message: "Write a function that returns 'Hello from Demo Time'."
```

--------------------------------

### Start Edit Chat with Copilot

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/copilot.mdx

Initiate an edit chat with Copilot using the `editCopilotChat` action. The `message` property is optional.

```json
{
  "action": "editCopilotChat"
}

{
  "action": "editCopilotChat",
  "message": "Write a function that returns 'Hello from Demo Time'."
}
```

```yaml
action: editCopilotChat
```

```yaml
action: editCopilotChat
message: "Write a function that returns 'Hello from Demo Time'."
```

--------------------------------

### Trigger Next Step in Demo Time via API

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/articles/demotime-browser-tabs/index.md

Use this URL with the `Launch` function in Power Apps to navigate to the next step in a Demo Time presentation and bring the window to the front.

```url
http://localhost:3710/api/next?bringToFront=true
```

--------------------------------

### Create File Using Stored State (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/vscode.mdx

Create a file named 'sample.json' and insert content that references a previously stored state value (e.g., '{STATE_resourceID}') using the `create` action.

```yaml
action: create
path: sample.json
content: |
  {
    "firstName": "{STATE_resourceID}"
  }
```

--------------------------------

### Placeholder Position Configuration (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Specify the start and end text markers for replacements in YAML format. The text between these placeholders will be replaced.

```yaml
startPlaceholder: // Start of demo1
endPlaceholder: // End of demo1
```

--------------------------------

### MCP Server — `@demotime/mcp`

Source: https://context7.com/estruyf/vscode-demo-time/llms.txt

Search Demo Time documentation using the Model Context Protocol, enabling AI assistants like GitHub Copilot to answer questions about the extension.

```APIDOC
## MCP Server — `@demotime/mcp`

Search Demo Time documentation using the Model Context Protocol, enabling AI assistants like GitHub Copilot to answer questions about the extension.

### Installation and Execution

Run directly with `npx`:

```bash
npx -y @demotime/mcp
```

Register the server in VS Code's settings (`.vscode/mcp.json`):

```json
{
  "servers": {
    "Demo Time": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@demotime/mcp"]
    }
  }
}
```

### Tools

The MCP server exposes a single `search` tool:

- **Tool**: `search`
- **Input**: `{ query: string }` (minimum length 1)
- **Returns**: `markdown`-formatted documentation excerpts matching the query.

#### Example Usage via MCP client:

```typescript
const result = await mcpClient.callTool('search', { query: 'highlight code blur opacity' });
// Returns top 10 matching documentation sections as markdown
```
```

--------------------------------

### Placeholder Position Configuration (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/text.mdx

Specify the start and end text markers for replacements in JSON format. The text between these placeholders will be replaced.

```jsonc
"startPlaceholder": "// Start of demo1"
"endPlaceholder": "// End of demo1"
```

--------------------------------

### Start EngageTime Poll (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/engagetime.mdx

Initiate a poll within an EngageTime session using `startEngageTimePoll`. Requires `pollId` and a configured `sessionId`.

```yaml
action: startEngageTimePoll
pollId: poll-1
```

--------------------------------

### Add Notes to Demo Configuration (YAML)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/features/using-notes.mdx

Configure your demo to include notes by specifying the relative path to the notes markdown file and an optional flag to show them on trigger.

```yaml
title: <title>
description: <description>
moves: [...]
notes:
  path: <relative path to the file>
  showOnTrigger: <show notes on trigger (optional) - default is false>
```

--------------------------------

### Start EngageTime Poll (JSON)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/docs/src/content/docs/actions/engagetime.mdx

Initiate a poll within an EngageTime session using `startEngageTimePoll`. Requires `pollId` and a configured `sessionId`.

```json
{
  "action": "startEngageTimePoll",
  "pollId": "poll-1"
}
```

--------------------------------

### Run Linting and Tests (Bash)

Source: https://github.com/estruyf/vscode-demo-time/blob/main/README.md

These commands are used to run linting and unit tests for the project. Linting helps maintain code quality, while tests ensure the functionality of the extension.

```bash
npm run lint
```

```bash
npm test
```