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!

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.

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

{
  "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>"
}

Code actions

{
  "action": "insert",
  "path": "<relative path to the file>",
  "position": "<line number> or <start line number>:<end line number>",
  "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)"
}

{
  "action": "replace",
  "path": "<relative path to the file>",
  "position": "<line number> or <start line number>:<end line number>",
  "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)"
}

{
  "action": "delete",
  "path": "<relative path to the file>",
  "position": "<line number> or <start line number>:<end line number>"
}

{
  "action": "highlight",
  "path": "<relative path to the file>",
  "position": "<line number> or <start line number>:<end line number>"
}

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

Setting actions

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

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

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

{
  "action": "waitForInput"
}

VS Code actions

{
  "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>"
}

Terminal actions

{
  "action": "executeTerminalCommand",
  "command": "<command to execute>"
}

Snippets

{
  "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.

Tips and tricks

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}.

Example variables file

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

Example demo step

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

Position

For the position you can use the following formats:

• number: The line number
• number:number: The start and end line number
• 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

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://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!