@mosbth/htmlslides
v1.9.2
Published
Readme
HTML Slides
A minimalist, browser-based presentation tool. Slides are defined in a plain HTML file using <slide> elements with Markdown content.
Install the two bundles htmlslides.[css,js] using npm or include through CDN.
Here are two presentations you can view to get a basic understanding on how it works.
When you start a presentation you can open the help-text by pressing ? or H and the following overlay will show itself to help you out with basic navigation.
Image. The help overlay shows what to do and what features exists.
Continue to read to start your own slideshow within a minute or two.
For information about the code structure and how to extend the tool, see DEVELOPMENT.md.
Want to use an AI to generate presentations? See SLIDES-PROMPT.md.
[[TOC]]
Creating a presentation
Create an HTML file, include the bundles htmlslides.css and htmlslides.js, then add <slide> elements with markdown content:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mosbth/htmlslides/dist/htmlslides.css">
<title>My Presentation</title>
<slide title>
# Welcome
## My Presentation
### Author Name
</slide>
<slide>
# Agenda
* First topic
* Second topic
* Third topic
</slide>
<slide>
# Code example
```js
function greet(name) {
return `Hello, ${name}!`
}
```
</slide>
<script src="https://cdn.jsdelivr.net/npm/@mosbth/htmlslides/dist/htmlslides.js"></script>Install the bundles
Use the bundles though CDN or install locally using npm.
Use via CDN
No installation required. Reference the files from jsDelivr:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mosbth/htmlslides/dist/htmlslides.css">
<script src="https://cdn.jsdelivr.net/npm/@mosbth/htmlslides/dist/htmlslides.js"></script>Pin to a specific version to avoid unexpected changes:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mosbth/[email protected]/dist/htmlslides.css">
<script src="https://cdn.jsdelivr.net/npm/@mosbth/[email protected]/dist/htmlslides.js"></script>Install locally via npm
If you prefer to serve the files yourself without a CDN dependency:
npm install @mosbth/htmlslidesReference the files from node_modules:
<link rel="stylesheet" href="node_modules/@mosbth/htmlslides/dist/htmlslides.css">
<script type="module" src="node_modules/@mosbth/htmlslides/dist/htmlslides.js"></script>Slide types
Title slide
Center-aligned, H1 in the accent color. Suitable for opening and closing slides.
<slide title>
# My Talk
## Subtitle
</slide>Background image
<slide bg="img/photo.jpg">
# Slide title
</slide>Embedded web page
<slide url="https://example.com">
# Page title
</slide>By default the page is display-only — keyboard navigation always works. Add interactive to allow clicking inside the page (navigation via keyboard still works if the iframe doesn't capture it):
<slide url="https://example.com" interactive>
</slide>Footnote
Displayed at the bottom of the slide, separated by a line.
<slide>
# Content
<footnote>Source: Official documentation, 2024</footnote>
</slide>Reference
Displayed at the bottom of the slide in the accent color with a → prefix. Markdown links are parsed.
<slide>
# Content
<reference>[Read more on MDN](https://developer.mozilla.org)</reference>
</slide>Reference summary
Automatically collects all <reference> elements from every slide and renders them as a list.
<slide reference-summary>
# References
</slide>Image layout
By default images are centered as block elements. Use the image title to apply a layout class:
 <!-- default centered -->
 <!-- float left, text wraps around -->
 <!-- float right, text wraps around -->
 <!-- inline with text, line-height sized -->Any other title value is kept as a regular HTML title attribute (tooltip).
Embedded video
Use the YouTube embed URL with interactive:
<slide url="https://www.youtube.com/embed/VIDEO_ID" interactive>
</slide>Keyboard shortcuts
| Key | Action |
|---|---|
| → / ↓ | Next slide |
| ← / ↑ | Previous slide |
| F | Toggle fullscreen |
| O | Toggle overview (grid of all slides) |
| G + number + Enter | Jump to slide number |
| H / ? | Toggle help overlay |
| A | Toggle autoplay |
| P | Toggle progress bar |
| 0–9 | Switch theme |
| Escape | Close overlay / exit fullscreen |
| Ctrl+P | Print / save as PDF (one slide per page) |
Navigation wraps around — going past the last slide returns to slide 1, and vice versa.
In the overview, use Tab to move between slides and Enter to navigate to the selected slide.
Setting a default theme
Add data-theme to the <html> element to set the default theme for your presentation:
<html lang="en" data-theme="dracula">Without this attribute, the light theme is used as default.
Themes
| Key | Theme |
|---|---|
| 0 | Custom (starter theme — edit freely) |
| 1 | Light |
| 2 | Dark |
| 3 | Solarized |
| 4 | High contrast |
| 5 | Terminal |
| 6 | Catppuccin Latte |
| 7 | Dracula |
| 8 | Nord |
| 9 | Monokai |
Themes 6–8 use JetBrains Mono for a code-editor aesthetic. Theme 9 uses Georgia (serif). Theme 0 is a starter theme intended for customization.
Syntax highlighting
Code blocks are highlighted automatically. Line numbers are shown by default.
Opt out of line numbers:
```js no-numbers
const x = 42
```Highlight specific lines:
```js
const x = 42 // [!code highlight]
```Show a diff:
```js
return a - b // [!code --]
return a + b // [!code ++]
```Mermaid diagrams
Use a mermaid code fence to draw diagrams directly in a slide:
```mermaid
flowchart LR
A[Write slides] --> B{Looks good?}
B -- Yes --> C[Present]
B -- No --> D[Edit] --> B
```Supported diagram types include flowchart, sequenceDiagram, classDiagram, erDiagram, gantt, pie, gitGraph, and more — anything Mermaid supports.
Set the Mermaid theme via data-theme-mermaid on the <html> element:
<html lang="en" data-theme-mermaid="default">Available values: neutral (default), default, forest, dark, base.
Creating presentations with AI
SLIDES-PROMPT.md is a ready-made context prompt for any AI assistant. Paste its contents into your AI chat and ask it to generate a presentation:
"Read the format description and create a presentation about Intro to JWT."
The AI will produce a well-formed HTML file ready to open in the browser. The prompt covers the full format — file structure, all slide types, escaping rules, code block options, image layout, and style guidelines.
Why another slideshow tool?
I am a teacher in programming on University and need a lot of presentations and I am not really a PPT guy, more home made presentations. During many years I used another tool HTML Slideshow and I wanted to update it for several years, but I never got the time for it. Now, my friend Claude and me eventually got some time and rewrote it together from scratch. My ambition with the project is to get an updated tool to use form many presentations the coming years and I want a simple format where my friend Claude can help me to generate content for presentations. I also wanted to investigate the way of developing using AI tools and this was my first real project for that.
I think the outcome is quite nice. I will use it to develop my coming presentations, and move my old presentations to it. I intend to keep this project updated.
Use it if you feel like it. There are many other cool ways to present slideshows. I intend to keep this quite limited in its feature set and only add those that I need my self.
Built with
- marked — Markdown parsing (MIT)
- Shiki — Syntax highlighting (MIT)
- Mermaid — Diagram rendering (MIT)
- Inter via @fontsource — Body font (SIL OFL)
- JetBrains Mono via @fontsource — Code font (SIL OFL)
- esbuild — Bundler (MIT)
- Claude — AI pair programmer