A markdown-driven presentation app. Write a .md file, get an interactive slide deck with syntax highlighting and Mermaid diagrams.
- Markdown-first — write presentations in plain
.mdfiles - Auto-detected slide types — title, bullet, code, image, and diagram slides
- Syntax highlighting — powered by Shiki with support for TypeScript, Ruby, Bash, JSON, and Markdown
- Mermaid diagrams — flowcharts, sequence diagrams, class diagrams, and more
- Multiple view modes — section deck (hub-and-spoke) and continuous scroll view
- Keyboard navigation — arrow keys to navigate, Escape to go back
- Hot reload — edit your
.mdfile and see changes instantly - Multiple presentations — host several presentations and switch between them
npm install
npm run devCreate or edit .md files in src/data/ to change presentation content. The app hot-reloads on save.
The root page (/) lists all available presentations.
Each presentation opens to a home screen showing sections as cards. Click a card to enter its slide deck.
Navigate to /<presentation>/scroll for a continuous vertical scrolling view. Sections display as cards that expand into slides with arrow keys.
Click a section card to enter the hub-and-spoke slide deck with Previous/Next navigation and a slide counter.
| Title Slide | Bullet Slide |
|---|---|
 |
 |
| Code Slide | Diagram Slide |
|---|---|
 |
 |
---
title: My Presentation
---The title is displayed on the home screen.
Level-1 headings (#) create sections displayed as cards on the home screen.
# Section Title
<!-- color: #dc2626 -->
Description text shown on the cardThe color comment is optional — sections without it get a color from a default palette.
Level-2 headings (##) create slides. The slide type is inferred from the content:
Title slide — heading with optional subtitle:
## Welcome
This is the subtitleBullet slide — heading with a list:
## Key Points
- First point
- Second pointCode slide — heading with a fenced code block:
## Example
```python
print("hello")
```Diagram slide — heading with a mermaid block:
## Architecture
```mermaid
graph TD
A --> B
```Image slide — heading with an image:
## Screenshot
Place an SVG file at public/images/background.svg to use it as the presentation background. If the file is absent, the default solid background color is used.
| Key | Action |
|---|---|
| Right Arrow | Next slide |
| Left Arrow | Previous slide |
| Escape | Back to home |
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build for production |
npm test |
Run unit tests (Jest) |
npm run test:e2e |
Run end-to-end tests (Playwright) |