Present your slides

Demo Time is more than just a tool for live demos—it also lets you present slides seamlessly within your editor. With Markdown-based slides, you can deliver presentations without switching between different applications, ensuring a smooth transition between your slides and demos.

Creating slides

To create slides, start by creating a new Markdown file and adding your content:

---
---

# Title

Hello, **Demo Time**!

Tip

To make the process easier, you can use the Demo Time: Create a slide command. This command will start the slide creation process where you will be asked for a title and if you want to add it to any of your demos.

Layouts

Demo Time supports various slide layouts, with the layout property, to help structure your presentation effectively:

• default - A standard slide layout
• intro - Ideal for opening slides
• quote - Perfect for displaying key takeaways or citations
• … (more layouts available)

Note

More information on using layouts can be found in the layouts section of the documentation.

Customizing Slides with Themes

Personalization matters! Demo Time allows you to customize the look and feel of your slides by selecting a built-in theme or creating your own.

To change your slide theme, you can specify a different theme in the slide configuration with the theme property or provide a custom CSS file in the demo JSON file.

Demo Time has the following built-in themes:

• default
• minimal
• monomi
• unnamed

Note

More information on theming can be found in the themes section of the documentation.

Presenting slides

To incorporate slides into your demo workflow, add them as demo steps in your demo script or configuration files. This ensures you can control when and where your slides appear during the presentation.

Use the openSlide action to open a slide in the slide view.

{
  "action": "openSlide",
  "path": "<relative path to the file>",
  "theme": "<relative path to CSS file>"
}

With this approach, you can seamlessly integrate slides into your demos, making your presentations more engaging and dynamic.

Slide controls

When presenting slides, you have the following control available:

• Fullscreen mode: Toggles the fullscreen mode from Visual Studio Code.
• Presentation view: This toggles the presentation view, which hides the status bar, tabs, and activity bar to provide a distraction-free experience. You can also use the setPresentationView and unsetPresentationView actions to control the presentation view programmatically, or from the Demo Time: Toggle presentation view (hides status bar, tabs, and activity bar) command.
• Close side panel: Closes the side panel to provide more space for your slides.
• Open the Demo Time panel: Opens the Demo Time panel to access your demos and slides.
• Previous step: Triggers the previous demo step (only if the demo-time.previousEnabled setting is enabled).
• Next step: Triggers the next demo step.