Build beautiful presentations from Markdown

Curtains converts extended Markdown files (.curtain) into self-contained HTML presentations with support for custom styling, containers, and keyboard navigation.

Quick Start

Use npx:

npx curtains presentation.curtain -o slides.html

Or install globally:

npm install -g curtains

Example

Create a file presentation.curtain:

<style>
body { font-family: sans-serif; }
.centered { text-align: center; }
</style>

===

# Welcome to My Presentation

This is the **first slide** with some content.

===

## Second Slide

- Point one
- Point two
- Point three

===

## Thank You!

Build your presentation:

npx curtains presentation.curtain -o slides.html

Open slides.html in your browser and use arrow keys to navigate!

Features

• 📝 Extended Markdown - Full CommonMark support plus custom containers
• 🎨 Custom Styling - Add CSS globally or per-slide
• 📦 Self-Contained - Single HTML file output with no dependencies
• ⌨️ Keyboard Navigation - Arrow keys, spacebar, and fullscreen support
• 🎭 Themes - Built-in light and dark themes
• 📱 Touch Support - Click/tap to advance slides

Usage

Basic Command

npx curtains presentation.curtain -o slides.html

Options

• -o, --output - Output HTML file (default: input filename with .html)
• --theme - Theme selection: light or dark (default: light)
• -h, --help - Show help
• -v, --version - Show version

File Format

Curtains files use .curtain extension with slides separated by ===:

<style>
/* Global styles for all slides */
</style>

===

# Slide 1
Content here

<style>
/* Styles just for this slide */
</style>

===

# Slide 2
More content

Styling

Global styles - Place <style> tags before the first === to apply styles to all slides:

<style>
body { font-family: 'Inter', sans-serif; }
h1 { color: #333; }
</style>

===
# This heading uses the global styles

Slide-scoped styles - Place <style> tags within a slide (after ===) to style only that slide:

===

# Special Slide

<style>
/* Only affects this slide */
.slide-container { background: linear-gradient(to right, #667eea, #764ba2); }
h1 { color: white; }
</style>

Containers

Use containers for advanced layouts:

===

<container class="columns">
  <container class="left">
  ### Left Column
  - Item 1
  - Item 2
  </container>

  <container class="right">
  ### Right Column
  ![image](./image.png)
  </container>
</container>

<style>
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
</style>

Images

Both Markdown and HTML syntax are supported:

![Alt text](./image.png)

<img src="./logo.svg" class="logo" alt="Logo">

Navigation

• → / Space - Next slide
• ← - Previous slide
• F - Toggle fullscreen
• Click/Tap - Next slide

Examples

Check out the examples directory for more complex presentations including:

• Multi-column layouts
• Image galleries
• Code presentations
• Custom themes

License

ISC © Chance Graff