Header and Footer Support

Demo Time supports adding headers and footers to your slides at both the global and slide level.

Headers and footers make use of Handlebars syntax, allowing you to use variables from the front matter of your slides. This means you can include dynamic content like slide titles, dates, and other metadata.

You can define headers and footers in two ways:

• Global level: Set the demoTime.slideHeaderTemplate and/or demoTime.slideFooterTemplate settings in your VS Code settings. This should point to HTML files that may contain Handlebars variables/syntax.
• Slide level: Add a header and/or footer property to your slide’s front matter. These can contain HTML and Handlebars variables.

Define on global level

You can define a global header or footer for all slides by setting the demoTime.slideHeaderTemplate and/or demoTime.slideFooterTemplate settings in your VS Code settings. These should point to HTML files using Handlebars syntax. For example:

.vscode/settings.json

{
  // Use a relative path from your workspace root
  // (e.g., "./.demo/templates/header.html" is relative to your project folder)
  "demoTime.slideHeaderTemplate": "./.demo/templates/header.html",
  "demoTime.slideFooterTemplate": "./.demo/templates/footer.html"
}

Example footer.html:

footer.html

<footer class="slide-footer">
  <span>{{name}}</span> | <span>{{email}}</span> | <span>{{date}}</span>
</footer>

All front matter properties are available as Handlebars variables in the template.

Defining the front matter properties for your slide

---
title: "My Slide Title"
name: "Jane Doe"
email: "[email protected]"
date: "2025-06-16"
description: "A slide demonstrating header and footer variables."
---

Tip

You can control the styles of the header and footer using the .slide__header and .slide__footer classes in your slide’s <style> block or in a global CSS file.

Define on slide level

You can also set the header and footer directly in the front matter of each slide. This allows for more granular control over individual slides or allows you to override the global settings for specific slides.

Slide with header and footer

---
name: "Demo Time"
header: "<div style='display: flex;justify-content: flex-end;align-items:center;width: 100%;height: 100%;'><img src='public/favicon.svg' alt='Logo' width='25px' height='25px'></div>"
footer: "<span>Created by {{name}}</span>"
---

Placeholders

Next to the front matter properties of the slide, Demo Time provides these placeholders for header and footer templates. They work in the global templates (demoTime.slideHeaderTemplate / demoTime.slideFooterTemplate) and in the slide-level header/footer front matter, in the slide preview, the PDF export and the next-slide preview of the presenter view.

Placeholder	Value
{{crntSlideIdx}}	The number of the current slide (1-based), counted over the slides of all acts.
{{totalSlides}}	The total number of slides of all acts.
{{slideTitle}}	The first H1 of the slide, or else its first heading of any level, without markdown formatting.
{{sceneTitle}}	The title of the scene that opens the slide.
{{actTitle}}	The title of the act that opens the slide.
{{presentationTitle}}	The demoTime.presentationTitle setting, or the name of the workspace folder when the setting is empty.
{{date}}	The date front matter property of the slide, or today’s date in the long date format of your language, like October 1, 2026.
{{date "d MMM yyyy"}}	The date front matter property, or today’s date when there isn’t one, in the format you pass.

{{crntSlideIdx}} and {{totalSlides}} follow the order of the act files and their scenes, so the numbers continue over all slide files. Hidden slides (hide: true) are not counted. On a hidden slide itself, {{crntSlideIdx}} is empty, so you can use {{#if crntSlideIdx}} to leave out the slide number there.

When more scenes open the same slide file, {{sceneTitle}} and {{actTitle}} use the scene you are running, or else the first scene that opens the file. A slide that no scene opens has no slide number, scene or act title.

A front matter property with the same name as slideTitle, sceneTitle, actTitle or presentationTitle takes precedence, so you can set a shorter title for a slide:

---
slideTitle: Setup
---

# Setting up the project and installing the dependencies

Example footer.html using the placeholders:

footer.html

<footer class="slide-footer">
  <span>{{presentationTitle}} · {{actTitle}}</span>
  <span>{{#if crntSlideIdx}}{{crntSlideIdx}} / {{totalSlides}}{{/if}}</span>
</footer>

Date formats

The date placeholder takes an optional format with these tokens. Month and day names use the language of VS Code, or of your system in the PDF export.

Token	Example	Token	Example
yyyy	2026	yy	26
MMMM	October	MMM	Oct
MM	10	M	10
dd	01	d	1
EEEE	Thursday	EEE	Thu
HH / H	14	hh / h	02 / 2
mm / m	05 / 5	ss / s	09 / 9
a	PM	'text'	text

Put text in single quotes to keep it as is, for example {{date "'Week of' d MMM"}}. Without a format, {{date}} shows the date front matter property as you wrote it.

Changing header and footer styles

If you want to customize the styles of the header and footer, you can add a <style> block in your Markdown file or use a global CSS file by defining it in the demoTime.customTheme setting. For example:

Custom styles for header and footer

<style>
  .slide__header, .slide__footer {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    color: white;
  }
</style>

Progress bar

Demo Time can show a thin progress bar on your slides, based on {{crntSlideIdx}} and {{totalSlides}}. Turn it on for all slides with the demoTime.slideProgressBar setting:

.vscode/settings.json

{
  "demoTime.slideProgressBar": "bottom"
}

The setting accepts none (default), top or bottom. Use the progress front matter property to change it for a slide:

• progress: false hides the progress bar on the slide, for example on the title slide.
• progress: true shows the progress bar, at the position of the setting, or at the bottom when the setting is none.
• progress: top or progress: bottom shows the progress bar at that position.

Hide the progress bar on the title slide

---
layout: intro
progress: false
---

# Demo Time

When you set progress in the document front matter, every slide in the file inherits it. Hidden slides and slides that no scene opens don’t show the progress bar, as they have no slide number.

Styling the progress bar

Each theme sets the colors and height of the progress bar with CSS variables. Override them in your custom theme:

.demo/slides/theme.css

.slide {
  --demotime-progress-color: #ffd43b;
  --demotime-progress-background: rgba(255, 255, 255, 0.1);
  --demotime-progress-height: 6px;
}

Variable	Description
--demotime-progress-color	Color of the bar. Can also be a gradient.
--demotime-progress-background	Color of the track behind the bar.
--demotime-progress-height	Height of the bar.

The progress bar uses the .slide__progress class, with .slide__progress--top or .slide__progress--bottom for its position, and .slide__progress__bar for the bar.