### Execute Terminal Command - Basic Example

Source: https://demotime.show/actions/terminal/

A simple example demonstrating how to execute a basic command, 'echo 'Hello, world!'', in the terminal.

```json
{
  "action": "executeTerminalCommand",
  "command": "echo 'Hello, world!'"
}
```

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

### Demo Time Content Insertion Example (YAML)

Source: https://demotime.show/tips/adding-content/

An example YAML configuration for Demo Time, demonstrating how to insert content into a file. It mirrors the JSON structure with action, path, position, and content fields.

```yaml
action: insert
path: "src/content/docs/tips/adding-content.mdx"
position: end
content: "Learn how to add content to a file in Demo Time."
```

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

### Custom Theme CSS Example

Source: https://demotime.show/slides/themes/custom/

An example CSS file demonstrating how to style the body background and text color, and customize heading styles within an intro class.

```CSS
body {
  background: black;
  color: white;
}
.intro {
  h1 {
    font-size: 2em;
    font-style: italic;
  }
}
```

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

### Terminal Actions Configuration Example

Source: https://demotime.show/actions/terminal/

An example JSON configuration file for defining terminal actions within Demo Time. This schema allows specifying commands, arguments, and execution contexts.

```json
[
  {
    "name": "Open the terminal",
    "command": "workbench.action.terminal.new"
  },
  {
    "name": "Execute a terminal command",
    "command": "workbench.action.terminal.sendText",
    "args": {
      "text": "echo Hello World\n"
    }
  },
  {
    "name": "Execute a script in the background",
    "command": "workbench.action.terminal.sendText",
    "args": {
      "text": "node ./scripts/my-script.js &\n"
    }
  },
  {
    "name": "Close a terminal",
    "command": "workbench.action.terminal.kill"
  }
]
```

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

### Demo Time Configuration Example (YAML)

Source: https://demotime.show/references/json-schema/

An example of a Demo Time configuration file written in YAML format. It mirrors the structure of the JSON schema, defining the demo's title, description, version, and an empty array for demos.

```yaml
title: Demo
description: Demo description
version: 2
demos: []
```

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

### Script Execution Workflow Example

Source: https://demotime.show/actions/terminal/

Demonstrates a workflow where a script's output is captured and used to dynamically create a JSON file, which is then opened.

```APIDOC
WorkflowExample:
  title: string
  description?: string
  steps: Array<Action>

  description: Defines a sequence of actions to perform.
  example:
    title: "Script example"
    description: ""
    steps:
      - 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"

  notes:
    - This example shows how to execute a Node.js script ('writeFirstName.mjs') to get a first name.
    - The output ('Elio') is stored under the ID 'firstName'.
    - This output is then embedded into a new JSON file ('sample.json') using the STATE_firstName placeholder.
    - Finally, the created 'sample.json' file is opened.
```

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

### Demo Time Content Insertion Example (JSON)

Source: https://demotime.show/tips/adding-content/

An example JSON configuration for Demo Time, specifying an action to insert content into a Markdown file. It includes the target path, position, and the content to be inserted.

```json
{
  "action": "insert",
  "path": "src/content/docs/tips/adding-content.mdx",
  "position": "end",
  "content": "Learn how to add content to a file in Demo Time."
}
```

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

### Demo Time Snippet Action for Insert/Highlight

Source: https://demotime.show/snippets/

Example JSON configuration for the `demo.json` file, demonstrating how to invoke the 'insert_and_highlight' snippet. It maps placeholder variables to actual paths and line numbers.

```json
{
  "action": "snippet",
  "contentPath": "./snippets/insert_and_highlight.json",
  "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>"
  }
}
```

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

### Creating Markdown Slides

Source: https://demotime.show/slides/

Examples of creating presentation slides using Markdown files. Slides can be separated by '---' and front matter properties like theme can be applied.

```markdown
---
theme: default
---
# Title
Hello, **Demo Time**!
```

```markdown
---
theme: default
---
# Slide 1 Title
Content for the first slide.
---
# Slide 2 Title
Content for the second slide.
```

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

### VS Code Command: Start Presentation Mode

Source: https://demotime.show/presentation-mode/

This entry describes a VS Code command provided by the Demo Time extension. It allows users to enter a presentation mode for their demos.

```APIDOC
Command: Demo Time: Start Presentation Mode

Description:
  Enters presentation mode for Demo Time, allowing navigation through demos using keyboard shortcuts or presenter/clicker devices.

Usage:
  - Click the "projector" icon in the Demo Time panel view.
  - Or, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and type "Demo Time: Start Presentation Mode".

Notes:
  - When multiple demo files are available, a selection prompt will appear to choose the starting demo.
  - A record icon will appear in the status bar to indicate that presentation mode is active.
  - Navigation is typically done with the right arrow key (→) or the right button on a presenter/clicker.

Related Commands:
  - Demo Time: Stop Presentation Mode
  - Preferences: Open Keyboard Shortcuts (for customizing navigation keybindings)
```

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

### Demo Time Snippet Integration (YAML)

Source: https://demotime.show/actions/snippet/

Example configuration in YAML format for the Demo Time extension, showing how to reference external snippet files and pass arguments to customize insertion and highlighting within documentation.

```yaml
action: snippet
contentPath: ./snippets/insert_and_highlight.json
args:
  MAIN_FILE: sample.json
  CONTENT_PATH: content.txt
  CONTENT_POSITION: "3"
  HIGHLIGHT_POSITION: "4"
```

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

### JavaScript Script Example

Source: https://demotime.show/actions/terminal/

A simple Node.js script that logs a name to the console, intended to be executed by the `executeScript` action.

```javascript
console.log('Elio');
```

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

### Install Slidev Demo Time Addon

Source: https://demotime.show/integrations/slidev/

Install the necessary npm package for integrating Demo Time with Slidev. This addon enables the functionality to trigger demos from Slidev slides.

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

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

### Demo Time Snippet Integration (JSON)

Source: https://demotime.show/actions/snippet/

Example configuration in JSON format for the Demo Time extension, demonstrating how to reference and use external snippet files with arguments for dynamic content insertion and highlighting.

```json
{
  "action": "snippet",
  "contentPath": "./snippets/insert_and_highlight.json",
  "args": {
    "MAIN_FILE": "sample.json",
    "CONTENT_PATH": "content.txt",
    "CONTENT_POSITION": "3",
    "HIGHLIGHT_POSITION": "4"
  }
}
```

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

### Trigger Demo Time via URI Handler

Source: https://demotime.show/features/uri-handler/

Demonstrates how to trigger Demo Time actions (like moving to the next step or running a specific step) using the `vscode://` URI handler. Includes HTML link examples.

```APIDOC
URI Handler for Demo Time:

Allows triggering demos and actions via the `vscode://eliostruyf.vscode-demo-time` URI.

**Commands:**

1.  **`next`**: Moves to the next demo step.
    *   **URI**: `vscode://eliostruyf.vscode-demo-time?command=next`
    *   **Example Usage**: `<a href="vscode://eliostruyf.vscode-demo-time?command=next">Next Step</a>`

2.  **`runbyid`**: Runs a specific demo step by its defined ID.
    *   **URI**: `vscode://eliostruyf.vscode-demo-time?command=runbyid&id=<demo id>`
    *   **Parameters**: 
        - `id`: The unique identifier of the demo step to run.
    *   **Example Usage**: `<a href="vscode://eliostruyf.vscode-demo-time?command=runbyid&id=demo1">Run Step 1</a>`

**Note**: The `id` parameter must correspond to an ID defined within your demo configuration.
```

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

### Demo Time Keybinding Rules

Source: https://demotime.show/tips/control-next-demo/

These rules define how specific key combinations trigger the Demo Time extension's start command, differentiating behavior based on the active VS Code panel. They are typically configured in VS Code's `keybindings.json`.

```json
[
  {
    "key": "right",
    "command": "demo-time.start",
    "when": "activeWebviewPanelId == \"demoTime:preview\""
  },
  {
    "key": "cmd+shift+right",
    "command": "demo-time.start",
    "when": "activeWebviewPanelId != \"demoTime:preview\""
  },
  {
    "key": "right",
    "command": "workbench.action.navigateRight",
    "when": "editorTextFocus && !demoTime.isDemoActive"
  }
]
```

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

### Demo Time Configuration - YAML with Icons

Source: https://demotime.show/adding-demos/

A YAML configuration for a demo that includes an 'icons' object for specifying start and end icons. Icon names should correspond to those available in the Visual Studio Code API.

```yaml
title: <title>
description: <description>
version: 2
icons:
  start: <name of the icon (optional)>
  end: <name of the icon (optional)>
steps: []
```

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

### Minimal Theme Slide Title Example

Source: https://demotime.show/slides/themes/minimal/

Example of a slide title within the 'minimal' theme context. The theme applies specific styling, such as a background, to the slide title.

```markdown
# Slide title
```

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

### Create and Open Sample JSON File Demo

Source: https://demotime.show/adding-demos/

This snippet demonstrates a demo configuration that creates a 'sample.json' file with specific content and then opens it in the editor. It outlines the structure for defining demo steps.

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

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

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

### Install Playwright Chromium Dependency

Source: https://demotime.show/slides/export/

A command to install the `playwright-chromium` package as a development dependency using npm. This package is required for the Demo Time export feature to function correctly.

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

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

### VS Code Keybindings for Demo Time Presentation Control

Source: https://demotime.show/tips/control-next-demo/

Configure custom keyboard shortcuts to control the `demo-time.start` command based on the active webview panel during presentations. This allows for context-aware navigation between demo steps, differentiating between slide views and code views.

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

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

### Slide Title Example

Source: https://demotime.show/slides/themes/unnamed/

Markdown snippet demonstrating how to set a slide title within the context of a theme configuration.

```markdown
# Slide title
```

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

### Step Indicator Component Styling

Source: https://demotime.show/references/api/

CSS for creating a numbered step indicator list, including bullet styling, guide lines, and text alignment.

```css
.sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
```

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

### Demo Time Configuration: ContentPath and Insertion Delay

Source: https://demotime.show/tips/adding-content/

Demonstrates how to use the 'contentPath' property to include content from external files and how to control the typing speed for line insertions in Demo Time steps. The 'insertTypingSpeed' property can be set globally or per step.

```json
{
  "action": "insert",
  "path": "src/content/docs/tips/adding-content.mdx",
  "position": "end",
  "contentPath": "multiple-lines.md",
  "insertTypingSpeed": 25
}
```

```yaml
action: insert
path: "src/content/docs/tips/adding-content.mdx"
position: end
contentPath: "multiple-lines.md"
insertTypingSpeed: 25
```

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

### Trigger Demo from Slidev Slide

Source: https://demotime.show/integrations/slidev/

Use the specified syntax within a Slidev markdown slide to trigger a demo. This example shows how to set the number of clicks before a demo is activated.

```markdown
---
clicks: 1
---
```

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

### Demo Time API Endpoints

Source: https://demotime.show/references/api/

Documentation for the Demo Time extension's API, enabling programmatic control over demo execution. It details how to enable the API and the functionality of the `/api/next` and `/api/runById` endpoints.

```APIDOC
API
===

The extension provides an API which you can use to control the extension.

You can enable the API by setting the `demoTime.api.enabled` setting to `true`.

Once the API is enabled, it will run on the port defined in the `demoTime.api.port` setting.

API URL: `http://localhost:3710/api/next`

Once enabled, it shows the API and its port number in the status bar of Visual Studio Code.

API endpoints
-------------

### `/api/next`

This endpoint will execute the next step in the demo.

*   Method: `GET`
*   Query parameters:
    *   `bringToFront`: Bring the Visual Studio Code window to the front. Default is `false`.

Caution

To make use of the `bringToFront` parameter, you need to make sure the `code` command is available in your system’s PATH. If you have not yet installed the `code` command, you can do so by executing the `Shell Command: Install 'code' command in PATH` command from the command palette in Visual Studio Code.

### `/api/runById`

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

You can call this endpoint via a `GET` or `POST` request.

#### GET request

*   Method: `GET`
*   Query parameters:
    *   `id`: The ID of the step you want to execute.
    *   `bringToFront`: Bring the Visual Studio Code window to the front. Default is `false`.

#### POST request

*   Method: `POST`
    
*   Body:
    
        {
          "id": "<step id>",
          "bringToFront": "<bring the Visual Studio Code window to the front (optional) - default is false>"
        }
    
*   Headers:
    
    *   `Content-Type: application/json`
```

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

### APIDOC: Text Deletion Actions

Source: https://demotime.show/actions/text/

Provides functionality to delete text from the editor. Supports deletion by specifying a file path and position, or by using start and end placeholder markers.

```APIDOC
Delete Text:
  Description: Deletes text content from the editor.
  Methods:
    - Via Position:
        action: delete
        parameters:
          path: string (required) - Relative path to the file.
          position: string (required) - The specific position from where to delete.
    - Via Placeholders:
        action: delete
        parameters:
          path: string (required) - Relative path to the file.
          startPlaceholder: string (required) - The starting placeholder marker.
          endPlaceholder: string (required) - The ending placeholder marker.
  Examples:
    JSON (Position):
      {
        "action": "delete",
        "path": "<relative path to the file>",
        "position": "<position>"
      }
    JSON (Placeholders):
      {
        "action": "delete",
        "path": "<relative path to the file>",
        "startPlaceholder": "<start placeholder>",
        "endPlaceholder": "<end placeholder>"
      }
    YAML (Position):
      action: delete
      path: <relative path to the file>
      position: <position>
    YAML (Placeholders):
      action: delete
      path: <relative path to the file>
      startPlaceholder: <start placeholder>
      endPlaceholder: <end placeholder>
```

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

### Position Cursor in Editor

Source: https://demotime.show/actions/text/

Allows the cursor to be positioned at a specific location within the editor. This can be done using a direct position coordinate or by referencing a start placeholder within the file.

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

{
  "action": "positionCursor",
  "path": "<relative path to the file>",
  "startPlaceholder": "<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>
```

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

### Demo Time API Integration Settings

Source: https://demotime.show/references/settings/

Enable and configure the extension's API for external control, specifying the port on which the API should run.

```APIDOC
demoTime.api.enabled:
  Description: Enable the API to control the extension.
  Default: `false`

demoTime.api.port:
  Description: The port on which the API should run.
  Default: `3710`
```

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

### Quantum Theme Frontmatter and Usage

Source: https://demotime.show/slides/themes/quantum/

Example of frontmatter configuration to apply the Quantum theme to a slide, followed by a basic slide title structure. The theme is noted to have a background on the slide title.

```yaml
---
theme: quantum
---
# Slide title
```

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

### Demo Time File Formats

Source: https://demotime.show/references/settings/

Demonstrates the structure for demo files supported by Demo Time, shown in both JSON and YAML formats. These files define the demo title, description, version, and individual demo steps.

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

```yaml
title: My Demo
description: A sample demo
version: 2
demos:
  - title: Step 1
    steps:
      - action: create
        path: test.txt
        content: Hello World
```

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

### Insert and Highlight Code Snippet Configuration

Source: https://demotime.show/snippets/

JSON configuration for a Demo Time snippet that inserts content into a specified file and then highlights a range of lines. It uses placeholders for file paths, content, and line numbers.

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

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

### Demo Time Arrow Component

Source: https://demotime.show/slides/components/

The `dt-arrow` component draws an arrow with customizable properties. It requires start and end coordinates, line color, line width, and arrow head type.

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

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

### Show Slide Snippet Configuration

Source: https://demotime.show/snippets/

JSON configuration for a Demo Time snippet that prepares the VS Code environment for showing a slide by closing UI elements and hiding status bars, then opens a browser with a specified URL.

```json
[
  {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.closeSidebar"
  },
  {
    "action": "executeVSCodeCommand",
    "command": "workbench.action.closePanel"
  },
  {
    "action": "setSetting",
    "setting": {
      "key": "workbench.statusBar.visible",
      "value": false
    }
  },
  {
    "action": "setSetting",
    "setting": {
      "key": "workbench.activityBar.location",
      "value": "hidden"
    }
  },
  {
    "action": "executeVSCodeCommand",
    "command": "simpleBrowser.show",
    "args": "{SLIDES_URL}"
  }
]
```

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

### APIDOC: Text Writing Actions

Source: https://demotime.show/actions/text/

Enables writing text content into the editor. Supports writing at the current active position, a specific file position, or using start placeholders for targeted insertion.

```APIDOC
Write Text:
  Description: Writes text content to the editor.
  Methods:
    - To Current Active Position:
        action: write
        parameters:
          content: string (required) - The text content to write.
    - To Specific Position in File:
        action: write
        parameters:
          content: string (required) - The text content to write.
          path: string (required) - Relative path to the file.
          position: string (required) - The specific position within the file.
    - Via Start Placeholder:
        action: write
        parameters:
          content: string (required) - The text content to write.
          path: string (required) - Relative path to the file.
          startPlaceholder: string (required) - The starting placeholder marker.
  Examples:
    JSON (Current Position):
      {
        "action": "write",
        "content": "Hello World"
      }
    JSON (Specific Position):
      {
        "action": "write",
        "content": "Hello World",
        "path": "<relative path to the file>",
        "position": "<position>"
      }
    JSON (Start Placeholder):
      {
        "action": "write",
        "content": "Hello World",
        "path": "<relative path to the file>",
        "startPlaceholder": "<start placeholder>"
      }
    YAML (Current Position):
      action: write
      content: "Hello World"
    YAML (Specific Position):
      action: write
      content: "Hello World"
      path: <relative path to the file>
      position: <position>
    YAML (Start Placeholder):
      action: write
      content: "Hello World"
      path: <relative path to the file>
      startPlaceholder: <start placeholder>
```

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

### Demo Time Customization Settings

Source: https://demotime.show/references/settings/

Allow users to integrate custom web components and CSS themes into their Demo Time presentations.

```APIDOC
demoTime.customWebComponents:
  Description: Custom web components to be used in the slides. Provide the relative paths to the JS file(s).
  Default: `[]`

demoTime.customTheme:
  Description: Custom CSS file to be used in the slides. Provide the relative path to the CSS file.
  Default: `"` (empty string, implying no custom theme)
```

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

### Demo Time UI and File Handling Settings

Source: https://demotime.show/references/settings/

Control the visibility of editor actions and set the default file type for new demo files.

```APIDOC
demoTime.hideEditorActions:
  Description: Hide the editor actions (add new demo and toggle highlight).
  Default: `false`

demoTime.defaultFileType:
  Description: The default file type for new demo files.
  Options: `json` (default), `yaml`.
  Default: `json`
```