Adding demos

In the getting started guide, you learned how to initialize the extension with a sample demo. In this guide, you will learn how to add your demos to the demo time configuration.

How demos and steps work

Each demo can contain multiple steps. When you trigger a demo, all its steps will run automatically in sequence, you do not need to trigger each step one by one. This is useful for automating multi-step tasks, such as:

• Creating a new file, adding content, and highlighting code—all in a single demo.
• Opening GitHub Copilot chat, sending a message, and pressing Enter, as one seamless flow.

Instead of creating separate demos for each action, group related steps together for a smoother, more automated presentation.

In version 1.9.0, Demo Time introduced a new Config Editor GUI that makes it easier to create and manage your demos and its related steps. That means that you now have the option to create your demos in a more visual way, without having to edit JSON or YAML files directly. You can still have the option to switch back to the code view if you prefer by setting the demoTime.openInConfigEditor setting to false.

Adding your first demo

Now that you have initialized the extension, you can start adding your first demo steps.

You can open the newly created demo.json file in the .demo folder manually, or you can click on the “eye” icon in the Demo Time view to open the demo steps editor.

Tip

It is a good practice to split your demos into multiple files. This way, you can keep your demos organized and easier to maintain.

Config Editor

Once the demo.json file is opened, you will see the visual editor to create new demos and steps.

Click on the Add Demo button to create your first demo.

In the Demo Information section, you can define the settings for your demo like:

• Title: The title of your demo.
• Description: A brief description of what your demo does.
• Demo ID: The unique identifier for your demo, which can be used to trigger the demo via the API, URI Handler, or runById action.
• Icons: The icons that will be used in the tree view panel.
• Notes: Any additional notes or information about your demo.

Adding steps

After the first demo is created, you can start adding steps. Each step that you add to a demo will be automatically ran in sequence when the demo is triggered.

Click on the Add Step button to create your first step.

In the Action dropdown, you can pick the action to perform for your step. The GUI will guide you through the available options per action.

Once a step is configured, you can add additional steps, or new demos. Here is an example to open the file after the create action:

In the header of the Config Editor, you can see the validation status. If you click on the message, you can see the detailed validation errors and warnings for your demo configuration.

Tip

You can click on the demo or demo step to open the corresponding configuration in the Config Editor.

Code Approach

The default content of the demo.json file looks like this:

JSON

{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "Demo",
  "description": "Demo description",
  "version": 2,
  "timer": 5, // Optional timer in minutes. You can also set it on global level with the `demoTime.timer` setting.
  "demos": []
}

YAML

title: Demo
description: Demo description
version: 2
timer: 5 # Optional timer in minutes. You can also set it on global level with
demos: []

You can start adding your demos in the demos array. Each demo should have the following structure:

JSON

{
  "title": "<title>",
  "description": "<description>",
  "disabled": false, // Disable a demo, when set to true, it will be skipped
  "steps": []
}

YAML

title: <title>
description: <description>
disabled: false # Disable a demo, when set to true, it will be skipped
steps: []

Note

A single demo can contain multiple steps, which will be executed one after another when you trigger the demo. This allows you to automate a sequence of actions as part of a single demo, making your presentations smoother and more efficient.

You can also add icons to the demo to make them more recognizable.

JSON

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

YAML

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

Note

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

Sample demo file configuration

Here is an example of a demo where you create a file and open it:

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

Note

Notice the steps array in the demo. Each step will be executed in sequence when you trigger the demo. In this example, when the Create and open sample.json demo is triggered, it creates a sample.json file with the specified content and then opens it in the editor all in one go.

Adding demo steps from a file

When you have a file open in the editor, you can add a demo step to your demo file by using the command Demo Time: Add demo step.

For example, if you want to highlight a piece of code, you can select the code and do the following:

1. Open the command palette by pressing Ctrl+Shift+P or Cmd+Shift+P.
2. Search for the Demo Time: Add demo step command.
3. Click on the highlight action in the command palette.

4. Select the demo file in which you want to add the step (only if you have multiple demo files).
5. Select if you want to add it to an existing demo or create a new one.

Executing the demo

Each demo you add will be available in the Demo Time view. You can execute each step by clicking on the demo title or starting the presentation mode.

Tip

From the Config Editor, you have the ability to try out the configured demo/steps directly by clicking the play button.

Adding notes to your demos

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.

Config Editor

When you open one of your demos in the Config Editor. Under the Demo Information section, you have the option to link a markdown file containing your notes or create a new one.

By checking the Show notes file when demo is triggered option, the notes file will automatically open to the side of your editor when the demo is triggered.

Code Approach

Here is an example of how you can add notes to your demo:

JSON

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

YAML

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

Implementing other demos and steps

You can add more demos and steps to the demos array. In the actions section of the documenation, you can find all the available actions you can use to create your demos.

Note

If you want to split your demos in multiple sections, you can do this by creating multiple demo files in the .demo folder. The extension will automatically recognize them and display them in the Demo Time view.