Skip to content
Demo Time

Interaction actions

Interaction actions allow you to simulate user interactions in your demos. You can copy content to clipboard, paste from clipboard, type text, and press keys to create realistic demo scenarios.

Copy content to clipboard

Copy text or file content to your clipboard using the copyToClipboard action.

Copy a string to the clipboard

Use the content property to copy a specific string:

{
  "action": "copyToClipboard",
  "content": "Hello from Demo Time!"
}

Copy file content to the clipboard

Use the contentPath property to copy the contents of a file:

{
  "action": "copyToClipboard",
  "contentPath": ".demo/vscode/copy-test.txt"
}

Copy content with variables

You can use state variables in the clipboard content. First, set a state value, then reference it in the content property:

[
  {
    "action": "setState",
    "state": {
      "key": "TEST_STATE",
      "value": "DEMO TIME"
    }
  },
  {
    "action": "copyToClipboard",
    "content": "Clipboard with state value: {STATE_TEST_STATE}"
  }
]

The {STATE_TEST_STATE} variable will be replaced with the value you set in the state.

Paste from clipboard

Paste content from the clipboard using the pasteFromClipboard action. This action will paste whatever content is currently in your clipboard at the current cursor position.

{
  "action": "pasteFromClipboard"
}

Example: Copy and paste workflow

You can combine clipboard actions to create a copy-paste workflow:

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

Type text

Simulate typing text using the typeText action. This action will type the specified content character by character, making it appear as if someone is actually typing.

{
  "action": "typeText",
  "content": "Hello, this is typed text!"
}

Control typing speed

You can control the typing speed by adding the insertTypingSpeed property. The value is in milliseconds between each character:

{
  "action": "typeText",
  "content": "This is typed slowly...",
  "insertTypingSpeed": 250
}

Example: Type in command palette

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

Press Enter

Simulate pressing the Enter key using the pressEnter action. This is useful for confirming commands, submitting forms, or moving to the next line.

{
  "action": "pressEnter"
}

Example: Type and execute command

You can combine typing and pressing Enter to execute commands:

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

Press Tab

Simulate pressing the Tab key using the pressTab action. This is useful for navigating between fields, indenting code, or moving focus.

{
  "action": "pressTab"
}

Press Arrow Keys

Navigate using arrow keys with the pressArrowLeft, pressArrowRight, pressArrowUp, and pressArrowDown actions. These are useful for cursor movement, menu navigation, or list selection.

[
  {
    "action": "pressArrowLeft"
  },
  {
    "action": "pressArrowRight"
  },
  {
    "action": "pressArrowUp"
  },
  {
    "action": "pressArrowDown"
  }
]

Example: Navigate through autocomplete suggestions

You can use arrow keys to navigate through VS Code’s autocomplete suggestions:

[
  {
    "action": "typeText",
    "content": "console."
  },
  {
    "action": "waitForTimeout",
    "timeout": 500
  },
  {
    "action": "pressArrowDown"
  },
  {
    "action": "pressArrowDown"
  },
  {
    "action": "pressEnter"
  }
]

Press Escape

Simulate pressing the Escape key using the pressEscape action. This is useful for closing dialogs, exiting modes, or canceling operations.

{
  "action": "pressEscape"
}

Press Backspace and Delete

Use pressBackspace and pressDelete actions to remove characters. Backspace deletes the character before the cursor, while Delete removes the character after the cursor.

[
  {
    "action": "pressBackspace"
  },
  {
    "action": "pressDelete"
  }
]