Adding moves

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 scene moves to the act configuration.

How scenes and moves work

Each scene can contain multiple moves. When you trigger a scene, all its moves will run automatically in sequence, you do not need to trigger each move 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 scene.
• Opening GitHub Copilot chat, sending a message, and pressing Enter, as one seamless flow.

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

In version 1.9.0, Demo Time introduced a new Act Editor GUI that makes it easier to create and manage your scenes and its related moves. That means that you now have the option to create your scenes 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 moves

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

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 moves editor.

Tip

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

Act Editor

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

Click on the Add Scene button to create your first scene.

In the Scene Information section, you can define the settings for your scene like:

• Title: The title of your scene.
• Description: A brief description of what your scene does.
• Scene ID: The unique identifier for your scene, which can be used to trigger the scene 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 scene.

Adding moves

After the first scene is created, you can start adding moves. Each move that you add to a scene will be automatically ran in sequence when the scene is triggered. Click on the Add Move button to create your first move.

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 move is configured, you can add additional moves, or new scenes. Here is an example to open the file after the create action:

In the header of the Act 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 scene or move to open the corresponding configuration in the Act 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": 3,
  "timer": 5, // Optional timer in minutes. You can also set it on global level with the `demoTime.timer` setting.
  "scenes": []
}

YAML

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

You can start adding your moves in the moves array. Each move should have the following structure:

JSON

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

YAML

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

Note

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

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

JSON

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

YAML

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

Note

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

Sample act 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": 3,
  "scenes": [
    {
      "title": "Create and open sample.json",
      "description": "Create a sample.json file with some content.",
      "icons": {
        "start": "file-code",
        "end": "pass-filled"
      },
      "moves": [
        {
          "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: 3
scenes:
  - title: Create and open sample.json
    description: Create a sample.json file with some content.
    icons:
      start: file-code
      end: pass-filled
    moves:
      - action: create
        path: sample.json
        content: "{\n  \"firstName\": \"Elio\",\n  \"lastName\": \"Struyf\"\n}"
      - action: open
        path: sample.json

Note

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

Adding moves from a file

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

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 scene command.
3. Click on the highlight action in the command palette.

4. Select the act file in which you want to add the step (only if you have multiple act 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 scene title or starting the presentation mode.

Tip

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

Adding notes to your scenes

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

The notes should be created as a markdown file.

Act Editor

When you open one of your acts in the Act Editor. Under the Scene 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": 3,
  "scenes": [...],
  "notes": {
    "path": "<relative path to the file>",
    "showOnTrigger": "<show notes on trigger (optional) - default is false>"
  }
}

YAML

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

Implementing other scenes and moves

You can add more scenes and moves to the scenes array. In the actions section of the documentation, you can find all the available actions you can use to create your scenes.

Note

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