Unlock a new dimension in presenting coding demos – effortlessly click through them as if they were presentation slides, thanks to this cutting-edge VSCode extension.

Features

Currently the extension supports the following features:

• Multiple demo files located in .demo folder
• Support for code/snippet files in the .demo folder. These files can be referenced in the demo steps, instead of adding the code in the JSON file.
• Explorer panel to execute your demo steps
• Add new demo steps (execute the Demo Time: Add as demo step command)
• Run through the demo steps (execute the Demo Time: Start command)
• Presentation mode which allows you to use a clicker to navigate through the demo steps
• Run a specific demo step from a command execution with the demo-time.runById command

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

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

Time actions

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

{
  "action": "waitForInput"
}

VSCode actions

{
  "action": "executeVSCodeCommand",
  "command": "<command to execute>",
  "args": "<arguments to pass to the command (optional)>"
}

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

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.

Settings

Tips

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.

Example

Here is an example demo:

{
  "$schema": "https://elio.dev/demo-time.schema.json",
  "title": "Playwright demo",
  "description": "Playwright demo for Microsoft 365",
  "demos": [{
      "title": "Login to Microsoft 365",
      "description": "Login to Microsoft 365 using Playwright",
      "steps": [{
          "action": "create",
          "path": "/tests/login.setup.ts",
          "content": "import { test as setup } from \"@playwright/test\";\nimport { existsSync } from \"fs\";\n\nconst authFile = \"playwright/.auth/user.json\";\n\n// More info: https://playwright.dev/docs/auth\n\nsetup(\"authenticate\", async ({ page }) => {\n  // Check if the auth file exists\n  if (existsSync(authFile)) {\n    return;\n  }\n\n  await page.goto(process.env.SP_DEV_PAGE_URL || \"\");\n\n  page.locator(\"input[type=email]\").fill(process.env.SP_DEV_USERNAME || \"\");\n\n  await page.getByRole(\"button\", { name: \"Next\" }).click();\n\n  page.locator(\"input[type=password]\").fill(process.env.SP_DEV_PASSWORD || \"\");\n\n  await Promise.all([\n    await page.locator(\"input[type=submit][value='Sign in']\").click(),\n    await page.locator(\"input[type=submit][value='Yes']\").click(),\n    await page.waitForURL(process.env.SP_DEV_PAGE_URL || \"\"),\n  ]);\n\n  await page.context().storageState({ path: authFile });\n});"
        },
        {
          "action": "open",
          "path": "/tests/login.setup.ts"
        }
      ]
    },
    {
      "title": "First SharePoint tests",
      "description": "Create the first SharePoint tests",
      "steps": [{
          "action": "create",
          "path": "/tests/pages/sharepoint.spec.ts",
          "content": "import { test, expect, Page } from \"@playwright/test\";\n\n// test.describe.configure({ mode: \"serial\" });\n\ntest.describe(`Validate sticker inventory`, () => {\n  let page: Page;\n\n  test.beforeAll(async ({ browser }) => {\n    page = await browser.newPage();\n    await page.goto(process.env.SP_DEV_PAGE_URL || \"\", {\n      waitUntil: \"domcontentloaded\",\n    });\n\n    await page\n      .locator(\n        `div[data-sp-web-part-id=\"0e05b9af-5e56-4570-8b3e-9d679f8b2fcf\"]`\n      )\n      .waitFor();\n  });\n\n  test(`Check if webpart is rendered`, async () => {\n    const webpart = page.locator(\n      `div[data-sp-web-part-id=\"0e05b9af-5e56-4570-8b3e-9d679f8b2fcf\"]`\n    );\n    await expect(webpart).toBeVisible();\n  });\n\n  test.afterAll(async () => {\n    await page.close();\n  });\n});"
        },
        {
          "action": "open",
          "path": "/tests/pages/sharepoint.spec.ts"
        },
        {
          "action": "highlight",
          "path": "/tests/pages/sharepoint.spec.ts",
          "position": "21:26"
        }
      ]
    },
    {
      "title": "Check the amounts",
      "description": "Check the amounts of the stickers",
      "steps": [{
        "action": "insert",
        "path": "/tests/pages/sharepoint.spec.ts",
        "position": 27,
        "content": "\n  test(`Check if there are 7 stickers`, async () => {\n    const stickers = page.getByTestId(`sticker_inventory__overview__sticker`);\n    await expect(stickers).toHaveCount(7);\n  });\n"
      }]
    }
  ]
}

You can also explore a comprehensive example in this GitHub repository: presentation-github-actions with Demo Time.