A ready-to-use reveal.js template for academics who want to code their lecture slides in HTML instead of PowerPoint, Keynote, or Google Slides. Fork it, customise it, and present from your browser within minutes.
You don't need to know HTML. Use an AI assistant to generate and edit your slides — this repo gives you the template, theme, and prompts to get started.
Companion to the blog post: The Death of PowerPoint
- Download — Click the green Code button above → Download ZIP (or fork this repo)
- Open — Double-click
index.htmlto open in your browser - Navigate — Use arrow keys to move between slides
- Edit — Open
index.htmlin any text editor, change the text, save, and refresh
That's it. You have a working 6-slide lecture deck.
Windows users: Right-click
index.html→ Open with → Google Chrome
| File/Folder | What it is |
|---|---|
index.html |
Complete 6-slide example lecture deck (view live) |
css/academic-theme.css |
Professional dark theme — change 3 colours to rebrand |
css/light-theme.css |
Light background theme — traditional academic style |
examples/ |
Slide type examples, templates, and results presentation |
guides/ |
Step-by-step how-to guides |
prompts/ |
AI prompt templates — copy, paste, generate |
img/ |
Your images and figures go here |
tools/ |
Compare reveal.js, Marp, Quarto, and Slidev — with working examples |
Each example works as a standalone file — click to preview live, or double-click the file locally.
| Example | Layout | Live Preview |
|---|---|---|
| Title slide | Centred title, author, institution | view |
| Section divider | Section break with large number | view |
| Text slide | Bullets + coloured highlight boxes | view |
| Image slide | Two-column: text + image | view |
| Diagram slide | Flow chart / process diagram | view |
| Figure slide | Python/R-generated figure display | view |
| Two-column | Side-by-side comparison | view |
| Grid layout | 2×2 grid with coloured borders | view |
| Single slide template | Self-contained starter (all CSS inline) | view |
| Results presentation | Tabbed figures + annotations (light theme) | view |
You don't need to write HTML by hand. Describe what you want to an AI assistant and it generates the code.
Quick example:
Create a reveal.js slide about [YOUR TOPIC] using the classes
from css/academic-theme.css. Use a two-column layout with
highlight boxes. Keep the text concise.
Tip: Paste css/academic-theme.css as context so the AI matches your theme.
This works with any AI tool — VS Code Copilot (any model), Claude, ChatGPT, Gemini CLI, Codex, or any other assistant.
Ready-to-paste prompts organised by task:
| Cookbook | Prompts |
|---|---|
| Build slides from scratch | 10 prompts — starter, full deck, title, bullets, diagrams |
| Modify layouts | 7 prompts — add columns, grid, animations, rearrange |
| Change theme & branding | 6 prompts — colours, fonts, logo, full rebrand |
| Convert from PowerPoint | 5 prompts — describe, paste, batch convert |
| Guide | What you'll learn |
|---|---|
| Getting Started | Download, open, make your first edit |
| VS Code Setup | Live preview, syntax highlighting, AI extensions |
| AI Prompts | Plan → Generate → Verify workflow |
| PDF Export | ?print-pdf step-by-step |
| Offline Packaging | Present without internet (or on an unknown computer) |
| PowerPoint → HTML | Convert existing decks |
| Customising the Theme | Brand your slides for your university |
| Presenting Tips | Shortcuts, speaker notes, projector setup |
The entire theme is controlled by CSS variables in css/academic-theme.css. Change 3 things to rebrand:
- Primary colour — change
--theme-primaryto your brand colour - Background gradient — update
--theme-gradient - Logo — replace
img/placeholder-logo.svgwith your logo
See Customising the Theme for the full guide.
- Arrow keys to navigate
- F for fullscreen
- S for speaker view (shows your notes + next slide)
- O for slide overview
- B to black out the screen
See Presenting Tips for projector setup, clicker support, and more.
- Add
?print-pdfto the URL - Press
Ctrl+P/Cmd+P - Set to Landscape, no margins, enable background graphics
- Save as PDF
See PDF Export for detailed instructions.
- reveal.js 5.1.0 loaded from CDN — no install needed
- No build step — double-click HTML to open, no Node.js or terminal required
- System font fallback — slides look good offline (Segoe UI on Windows, SF Pro on Mac)
- 1920×1080 native resolution — optimised for projectors
- Print-ready — PDF export via
?print-pdfquery parameter
This starter kit uses reveal.js, but it's not the only option for HTML slides. See tools/ for a comparison of Marp, Quarto, Slidev, and Pandoc — with working examples you can try.
- The Death of PowerPoint — the blog post that started this
- reveal.js documentation — the presentation framework
- xKiwiLabs Tools & Resources — more tools for academics
CC BY-NC-SA 4.0 — free to use, adapt, and share for non-commercial purposes with attribution.
This repository was created with the assistance of AI tools (Claude, Claude Code, GPT-5, and Gemini). All content has been reviewed, tested, and edited by the author. The prompts, guides, and code represent the author's expertise and judgement about what works best for academic presentations.
Built by xKiwiLabs — Michael J. Richardson, Macquarie University