Skip to content
Demo Time

Preview actions

Preview actions are used to preview files like Markdown and images in the editor.

You can also use preview actions to show a shareable QR code view and close the preview window when needed.

Show slides

To show slides with Demo Time, you can make use of the openSlide action.

{
  "action": "openSlide",
  "path": "<relative path to the file>",
  "slide": "<slide number (1-based) (optional)>"
}

Read more about it in the slides section of the documentation.

Preview Markdown file

To preview a markdown file in the editor, use the markdownPreview action. The markdownPreview action takes a file path as an argument.

{
  "action": "markdownPreview",
  "path": "<relative path to the file>"
}

Preview image

To preview an image in the editor, use the imagePreview action. The imagePreview action takes a file path as an argument.

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

Custom theming

Create a CSS file, and adapt the styling with the .preview_view class.

.demo/themes/image.css
.preview_view {
     background-color: #000;
}

Show QR code

To display a QR code in the preview window, use the showQR action.

The showQR action requires a url and supports optional metadata fields to customize the screen:

  • qrLayout: controls the slide layout (see below)
  • topText: small text above the QR code
  • title: large title text
  • description: explanatory text below the link
  • logo: URL to a logo image shown next to the QR code (only used by default and reversed layouts)

Layouts

The qrLayout field accepts one of six values:

ValueDescription
defaultQR code on the right, logo on the left (side-by-side)
reversedQR code on the left, logo on the right (side-by-side)
stackedQR code centered at top, title/description below
minimalQR code and URL only
text-leftTitle and description on the left, QR code on the right
text-rightQR code on the left, title and description on the right
Show a QR code 
{
  "action": "showQR",
  "qrLayout": "default",
  "url": "https://demotime.show",
  "topText": "Scan to open",
  "title": "Get started with Demo Time",
  "description": "Never stress about live coding again. Present straight from Visual Studio Code.",
  "logo": "https://demotime.show/logo.svg"
}

Hide QR code

To hide the QR code and close the preview window, use the hideQR action.

{
  "action": "hideQR"
}

Close preview window

To close the preview window explicitly (slides, image preview, or QR preview), use the closePreview action.

{
  "action": "closePreview"
}