Script your coding demos to perfection with this VS Code extension – no typos, no missteps, just flawless, stress-free presentations every time. Execute each demo step seamlessly, just like advancing through a presentation!

Check out the extension documentation at demotime.elio.dev

Features

Currently, the extension supports the following features:

• Highlighting code in a file.
• Multiple demo files located in the .demo folder.
• Support for code/snippet files in the .demo folder, allowing you to define multiple reusable steps.
• Explorer panel to execute your demo steps (you can move it to the activity bar).
• Run through the demo steps by executing the Demo Time: Start command.
• Presentation mode that allows you to use a clicker to navigate through the demo steps.
• Run a specific demo step from a command execution using the demo-time.runById command.
• Place your variables in a variables.json file in the .demo folder and reference them like {variable_name} in your demo steps.
• Detachable presenter view which you can move to a different screen.
• Adding notes to your demo steps.

Usage

To use the extension, you need to create a .demo folder in your workspace. Once created, you can add a JSON file which contains the demo and its steps.

{
  "$schema": "https://demotime.elio.dev/demo-time.schema.json",
  "title": "<title>",
  "description": "<description>",
  "demos": []
}

Add your demos to the demos array. Each demo can consist of multiple steps.

{
  "title": "<title>",
  "description": "<description>",
  "steps": []
}

You can also add "icons" to your demo steps to make them more recognizable. You can use the following icons:

{
  "title": "<title>",
  "description": "<description>",
  "icons": {
    "start": "<name of the icon (optional)>",
    "end": "<name of the icon (optional)>"
  },
  "steps": []
}

Use the icon names you can find in the icon listing from the Visual Studio Code documentation.

Demo steps

File actions

Find more information on the file actions documentation page.

{
  "action": "create",
  "path": "<relative path to the file>",
  "content": "<content of the file> (optional)",
  "contentPath": "<relative path to the file in the .demo folder> (optional)"
}

{
  "action": "open",
  "path": "<relative path to the file>"
}

{
  "action": "markdownPreview",
  "path": "<relative path to the file>"
}

{
  "action": "save"
}

{
  "action": "rename",
  "path": "<relative path to the file>",
  "dest": "<new file name/path>"
}

{
  "action": "deleteFile",
  "path": "<relative path to the file>"
}

{
  "action": "close"
}

{
  "action": "closeAll"
}

Text actions

Find more information on the text actions documentation page.

// Via position
{
  "action": "insert",
  "path": "<relative path to the file>",
  "position": "<position>",
  "content": "<content of the file> (optional)",
  "contentPath": "<relative path to the file in the .demo folder> (optional)",
  "lineInsertionDelay": "<delay in milliseconds to insert each line> (optional)"
}

// Via placeholders
{
  "action": "insert",
  "path": "<relative path to the file>",
  "startPlaceholder": "<start placeholder>",
  "endPlaceholder": "<end placeholder>",
  "content": "<content of the file> (optional)",
  "contentPath": "<relative path to the file in the .demo folder> (optional)",
  "lineInsertionDelay": "<delay in milliseconds to insert each line> (optional)"
}

// Via position
{
  "action": "replace",
  "path": "<relative path to the file>",
  "position": "<position>",
  "content": "<content of the file> (optional)",
  "contentPath": "<relative path to the file in the .demo folder> (optional)",
  "lineInsertionDelay": "<delay in milliseconds to insert each line> (optional)"
}

// Via placeholders
{
  "action": "replace",
  "path": "<relative path to the file>",
  "startPlaceholder": "<start placeholder>",
  "endPlaceholder": "<end placeholder>",
  "content": "<content of the file> (optional)",
  "contentPath": "<relative path to the file in the .demo folder> (optional)",
  "lineInsertionDelay": "<delay in milliseconds to insert each line> (optional)"
}

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

// Via placeholders
{
  "action": "delete",
  "path": "<relative path to the file>",
  "startPlaceholder": "<start placeholder>",
  "endPlaceholder": "<end placeholder>"
}

// Via position
{
  "action": "highlight",
  "path": "<relative path to the file>",
  "position": "<position>",
  "zoom": "<zoom level> (optional)"
}

// Via placeholders
{
  "action": "highlight",
  "path": "<relative path to the file>",
  "startPlaceholder": "<start placeholder>",
  "endPlaceholder": "<end placeholder>",
  "zoom": "<zoom level> (optional)"
}

// 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>",
}

{
  "action": "unselect",
  "path": "<relative path to the file>"
}

// Write to current active position
{
  "action": "write",
  "content": "Hello World"
}

// Write to a specific position in a file
// Via position
{
  "action": "write",
  "content": "Hello World",
  "path": "<relative path to the file>",
  "position": "<position>"
}

// Via start placeholder
{
  "action": "write",
  "content": "Hello World",
  "path": "<relative path to the file>",
  "startPlaceholder": "<start placeholder>",
}

{
  "action": "format"
}

Patch actions

Find more information on the patch actions documentation page.

Similar to the Text actions, the patch actions can be used to update the contents of a file, but you do not need to specify the position of the text to insert. Instead, you need to create a snapshot of the file and a patch file.

A patch works like a git’s diff functionality, but instead of requiring a git branch, the base file is stored as a snapshot in the .demo/snapshots folder, and the patch file is stored in the .demo/patches folder.

{
  "action": "applyPatch",
  "path": "<relative path to the file>", // This will be the source file to update
  "contentPath": "<relative path to the snapshot file in the .demo folder>",
  "patch": "<relative path to the patch file in the .demo folder>"
}

Setting actions

Find more information on the setting actions documentation page.

{
  "action": "setSetting",
  "setting": {
    "key": "<setting key>",
    "value": "<value>"
  }
}

{
  "action": "setTheme",
  "theme": "<theme name>"
}

{
  "action": "unsetTheme"
}

Setting update example

Here is an example of how you can hide the activity and status bar in Visual Studio Code.

{
  "action": "setSetting",
  "args": {
    "setting": "workbench.statusBar.visible",
    "value": false
  }
},
{
  "action": "setSetting",
  "args": {
    "setting": "workbench.activityBar.location",
    "value": "hidden"
  }
}

To reset the settings, you can use the following steps:

{
  "action": "setSetting",
  "setting": {
    "key": "workbench.statusBar.visible",
    "value": null
  }
},
{
  "action": "setSetting",
  "setting": {
    "key": "workbench.activityBar.location",
    "value": null
  }
}

Time actions

Find more information on the time actions documentation page.

{
  "action": "waitForTimeout",
  "timeout": "<timeout in milliseconds>"
}

{
  "action": "waitForInput"
}

VS Code actions

Find more information on the vscode actions documentation page.

{
  "action": "executeVSCodeCommand",
  "command": "<command to execute>",
  "args": "<arguments to pass to the command (optional)>",
  "path": "<relative path to the file (optional, when defined, the args property is ignored.)>"
}

{
  "action": "showInfoMessage",
  "message": "<message>"
}

{
  "action": "setState",
  "state": {
    "key": "<key>",
    "value": "<value>"
  }
}

Terminal actions

Find more information on the terminal actions documentation page.

{
  "action": "executeTerminalCommand",
  "command": "<command to execute>",
  "terminalId": "<terminal id (optional)>"
}

{
  "action": "executeScript",
  "id": "<script id>",
  "path": "<script to execute>",
  "command": "node" // Can be powershell, bash, shell, python, etc.
}

{
  "action": "closeTerminal",
  "command": "<command to execute>",
  "terminalId": "<terminal id (optional)>"
}

Snippets

Find more information on the snippet actions documentation page.

{
  "action": "snippet",
  "contentPath": "<relative path to the file in the .demo folder> (optional)"
  "args": {
    // Define the argument name in the snippet file with curly braces {argument name}
    "<argument name>": "<argument value>"
  }
}

You can find examples of snippets in the snippets folder.

Snippet example

In the demo file, you can reference a snippet file. The snippet file can contain multiple steps which can be reused in multiple demos.

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

The contentPath property its value is relative to the .demo folder. So, in the example above, the snippet file is located in the .demo/snippets folder.

In the args property, you can define the arguments/variables which you want to use in the snippet file. In the snippet file, you can reference these arguments with curly braces {argument name}.

In the insert_and_highlight.json file, you can define the steps you want to execute.

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

Settings

The demoTime.previousEnabled is by default disabled to avoid conflicts when the previous action inserted content into a file. When you enable this setting, you can use the Demo Time: Previous command to go back to the previous step or use the left clicker button.

Commands

The Demo Time: Start and Demo Time: Previous commands have a keybinding assigned to them. You can override these keybindings in your Visual Studio Code settings.

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. When enabled, the API will run on the port defined in the demoTime.api.port setting.

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

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.

/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
  • 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

Tips and tricks

Adding notes

You are also able to add notes to your demos. These notes can be used to provide additional information for yourself or others who will be executing the demo.

The notes should be created as a markdown file in the .demo folder. Here is an example of how you can add notes to your demo:

{
  "title": "<title>",
  "description": "<description>",
  "steps": [...],
  "notes": {
    "path": "<relative path in the .demo folder>",
    "showOnTrigger": "<show notes on trigger (optional) - default is false>"
  }
}

Highlighting code

By default, the extension highlights the code in a box with a red border. You can customize how you want to highlight the code with the highlight settings.

Customizing the highlight

Here is an example where the highlight border and background color are customized. Besides these color changes, the text which is not highlighted is blurred and its opacity is reduced to have a better focus on the highlighted code.

{
  "demoTime.highlightBorderColor": "transparent",
  "demoTime.highlightBackground": "rgba(19, 142, 151, 0.2)",
  "demoTime.highlightOpacity": 0.5,
  "demoTime.highlightBlur": 2
}

Working with variables

You can define variables in a variables.json file in the .demo folder. You can reference these variables in your demo steps by using curly braces {variable_name}.

The extension has also built-in support for a couple of predefined variables:

• {DT_INPUT}: The extension will ask you to provide a value for this variable when the demo gets executed.
• {DT_CLIPBOARD}: The value in your clipboard will be used for this variable.
• {SCRIPT_<key>}: The output of the script which you executed via the executeScript action, will be used for this variable.
• {STATE_<key>}: The value of the state key which you set via the setState action, will be used for this variable.

Example variables file

{
  "SLIDES_URL": "http://localhost:3030"
}

Example demo step

{
  "action": "executeVSCodeCommand",
  "command": "simpleBrowser.show",
  "args": "{SLIDES_URL}"
}

Positioning your text/code

For the positioning of the text to insert, there are two options:

• Use the position property to specify the location where the action should be performed. With this property, you can specify the line number, character position, or a range of lines and characters.
• Use the startPlaceholder and endPlaceholder properties to specify the text to search for in the file to determine the location where the action should be performed.

Line position or range

For the position property, you can use the following values:

• number: The line number
• number:number: The start and end line number
• number,number: The start line and character
• number,number:number,number: The start line and character and the end line and character
• The start and end keywords can also be used instead of the line numbers
  • start will be replaced by the first line number
  • end will be replaced by the last line number

Examples:

"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

Placeholder position

For the startPlaceholder and endPlaceholder properties, you specify the text to search for in the file.

Examples:

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

The text will be replaced from the start of the startPlaceholder to the end of the endPlaceholder.

In the file, the placeholders should be defined like this:

// Start of demo1
const ext = "Demo Time";
// End of demo1

Adding content to a file

When you want to insert content to a file, you can use the content or contentPath properties in the demo step.

Presentation view

When you use two screens during a presentation, you can use the detachable presenter view which you can move to another screen. This way you can keep an eye on the next steps while presenting without showing it to your audience.

Follow these steps to use the presenter view:

• Run the Demo Time: Show presenter view command to open the presenter view.
• The presenter view will open in detached mode. If that is not the case, you can drag tab out of the Visual Studio Code window.
• Once detached, you can move it to another screen.

Example demo file

Here is an example demo:

{
  "$schema": "https://demotime.elio.dev/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"
          }
        }
      ]
    }
  ]
}

You can also explore a comprehensive example in the following GitHub Repositories:

• presentation-github-actions
• presentation-m365-playwright-github-actions

Support

If you enjoy my work and find them useful, consider sponsor me and the ecosystem to help Open Source sustainable. Thank you!