LazySlides

A Template Showcase

Built with LazySlides

Press S for Speaker Notes

Every slide has authoring tips in the notes. This is the center template — one focused idea, no distractions.

2 / 25

What You Will See

1. Foundations
2. Layouts
3. Visual Impact
4. Flow & Motion

3 / 25

Foundations

The building blocks of every deck

The Content Template

Your workhorse for structured information

• The lead field adds an intro paragraph above the bullets
• Use items for bullet lists or ordered_items for numbered lists
• Nested lists use map syntax:
  • Parent string ends with a colon
  • Children are indented underneath
• Add fragment: fade-up to reveal items one by one
• The text field adds a standalone paragraph without bullets

5 / 25

The Metrics Template

17

Templates

Slide types in the engine

6

Themes

Visual identities included

960×540

Canvas

16:9 ratio, auto-scaled

18

Fragment Effects

Animation options per item

6 / 25

The Table Template

Field	Type	Purpose
columns	Array of strings	Defines the column headers you see above
rows	Array of arrays	Each inner array is one row of cell values
title	String	The slide heading — required on every table slide
reference	String	Attribution line below the table

7 / 25

Sources

• 1. This table describes its own fields

1 Sources

"

The best slides feel effortless. That only happens when the tooling disappears and the content speaks for itself.

Design PrincipleLazySlides Philosophy

8 / 25

Layouts

Templates that arrange content spatially

The Split Template

• 1/3 image panel + 2/3 content panel
• Image fills its panel with object-fit: cover — edges may crop
• Click any image to view fullscreen via lightbox
• Supports nested lists, fragments, and references

10 / 25

Sources

• 1. Photo by Robert Katzki on Unsplash

1 Sources

The Split-Wide Template

• Inverted layout: 1/3 content + 2/3 image
• Best for landscape photos and screenshots
• Recommended image size: 1280×1080 or larger
• Same fields as split — title, text, items, image

11 / 25

Sources

• 1. Photo by Product School on Unsplash

1 Sources

The Columns Template

When to Use

• Two equal content panels side by side
• Each column has its own title, text, and items
• Great for contrasting or parallel ideas

Key Details

• Both columns animate together with fragment
• Text-only — no images in this template
• Keep content balanced between sides

12 / 25

The Comparison Template

Columns Template	Comparison Template
Equal halves layout	Row-by-row table layout
Free-form content per side	Structured left/right cells
No icons	Good/bad icon marks
Best for parallel topics	Best for evaluations

13 / 25

Visual Impact

Templates that command attention

The Hero Template

Full-Bleed Impact

• Dark overlay with a bold headline
• Optional text box for structured details
• Use image for photos or background_gradient for color

The Image-Overlay Template

• Background image fills the viewport
• Text box can be placed in four positions
• Supports title, text, and items in the overlay

16 / 25

Sources

• 1. Photo by Cristiano Firmani on Unsplash

1 Sources

Center with Backgrounds

Add background_color or background_gradient to any template for visual variety. This slide demonstrates both the center template and background enhancements.

17 / 25

The Code Template

- template: code
  title: The Code Template
  language: yaml
  code: "..."
  caption: "This slide's own YAML"

This slide's own YAML — a self-referential code block

18 / 25

Flow & Motion

Templates that show process and progression

The Timeline Template

Step 1

Define

Set date, title, and text for each event

Step 2

Populate

Add 3-5 events for visual balance

Step 3

Animate

Optional fragment for progressive reveal

Step 4

Present

Cards alternate above and below the line

20 / 25

The Funnel Template

YAML Input

→ Author writes structured slide data

Validation

→ Schema checks catch errors before build

Template Engine

→ Nunjucks maps fields to HTML

Reveal.js Output

→ Interactive, themed presentation

21 / 25

Auto-Animate in Action

- template: content
  title: My Slide

Start simple — auto-animate morphs matching elements

22 / 25

Auto-Animate in Action

- template: content
  title: My Slide
  lead: "An introductory paragraph"
  fragment: fade-up
  items:
    - "First insight"
    - "Second insight"

Fields added — the code block expanded with a smooth morph

23 / 25

Tips for Great Decks

Design principles baked into the engine

• One idea per slide — if you need a second point, make a second slide
• Add section dividers every 4-7 slides to create rhythm and breathing room
• Mix template types — alternate between text, visual, and data slides
• Use fragments on fewer than half your slides — too much animation fatigues the audience
• Write speaker notes on every slide — they help you rehearse and help others present your deck

24 / 25

LazySlides

YAML In. Slides Out.

github.com/Chrisissorry/lazyslides