Skip to main content

Slide

Display content to participants with support for text, images, videos, and markdown content.

Example structures​

Simple slide with headline​

{
  "type": "Slide",
  "data": {
    "headline": "Welcome!",
    "subheading": "Let's get started",
    "theme": "dark"
  }
}

Slide with markdown content​

{
  "type": "Slide",
  "data": {
    "headline": "Key Points",
    "text": "## Overview\n\n- Point one\n- Point two\n\n**Important:** This supports full markdown including tables!"
  }
}

Slide with media content​

{
  "type": "Slide",
  "data": {
    "headline": "Visual Example",
    "background": "#1a1a1a",
    "content": [
      "img(example.jpg) Image caption",
      "video(demo.mp4) Video description"
    ]
  }
}

Properties​

Basic Properties​

  • headline (string, optional) - Main title displayed prominently at the top
  • subheading (string, optional) - Subtitle text displayed below the headline with lighter weight
  • theme ("light" | "dark", optional) - Sets the color theme for the slide
    • Alternatively, use legacy darkText (boolean) for backward compatibility
  • background (string, optional) - Background color (hex code) or image filename
    • Images should be relative to the workshop's resource directory

Content Properties​

The Slide node supports two different content modes:

Markdown Mode (text property)​

When text is present, the slide uses a scrollable markdown layout:

  • text (string) - Markdown-formatted content with full GFM (GitHub Flavored Markdown) support
    • Supports headers, lists, tables, bold, italic, links, and more
    • Text size automatically scales based on content length
    • Enables scrolling for longer content
    • Tables are automatically styled with borders

Legacy Media Mode (content array)​

When text is not present, uses the traditional centered layout:

  • content (array of strings, optional) - Array of content items supporting:
    • Images: "img(filename.jpg) Optional caption"
    • Videos: "video(filename.mp4) Optional description"
    • Plain text: Any string without the special format

Host Properties​

  • hostdata.notes (string, optional) - Private presenter notes visible only to the host
  • hostdata.hints (array, optional) - Additional hints or guidance for the host

Content Layout Behavior​

With text (Markdown Mode)​

  • Left-aligned layout with headline at top
  • Scrollable content area
  • Responsive padding and spacing
  • Automatic text sizing based on word count:
    • < 20 words: Extra large (6xl)
    • < 50 words: Large (4xl)
    • < 150 words: Medium-large (2xl)
    • < 300 words: Medium (lg with tight leading)
    • ≥ 300 words: Compact (lg)

Without text (Legacy Mode)​

  • Centered layout
  • Fixed viewport (no scrolling)
  • Content arranged horizontally with gaps
  • Images and videos displayed at full size

Auto-navigation​

Inherits from DefaultNode, supporting:

  • autoNext (number) - Seconds until automatic transition to next node
  • autoNextState (number) - Target node index for auto-transition
tip
  • Media files (images/videos) should be placed in the workshop's resource directory
  • The markdown renderer supports tables, which are automatically styled with dark/light theme borders
  • When using markdown mode, content is scrollable but headlines remain fixed
  • Theme changes are applied globally when the slide is displayed
  • All markdown content uses Tailwind Typography with automatic dark mode support
{
  "type": "Slide",
  "autoNext": 30,
  "data": {
    "headline": "Workshop Overview",
    "subheading": "Everything you need to know",
    "theme": "dark",
    "background": "#0a0a0a",
    "text": "## Agenda\n\n1. Introduction\n2. Main Activity\n3. Conclusion\n\n| Time | Activity |\n|------|----------|\n| 10min | Intro |\n| 30min | Workshop |\n| 10min | Q&A |"
  },
  "hostdata": {
    "notes": "Remember to introduce yourself first!",
    "hints": ["Check if everyone can see the screen", "Ask for questions"]
  }
}