navigate F fullscreen S notes
Introducing

Make Slide

Beautiful presentations, zero complexity.

Agenda

  1. 01 Vision & Purpose
  2. 02 Core Architecture
  3. 03 Design Philosophy
  4. 04 Comparison
  5. 05 Workflow & Features
  6. 06 Live Demo

The Big Idea

Complexity is the enemy of execution.

Every great product starts with a simple premise. We strip away the unnecessary layers so you can focus entirely on your content and your story.

Simplicity is the ultimate sophistication.

Leonardo da Vinci

Two Approaches

Traditional

  • Drag-and-drop editors with vendor lock-in
  • Binary file formats that break version control
  • Bloated feature sets most users never touch
  • Collaboration requires proprietary tools

Modern

  • Plain text that lives in your repository
  • Git-friendly diffs and pull request reviews
  • Focused feature set, zero learning curve
  • Open standards, works anywhere

How It Works

Step 01
Write
Author your slides in plain HTML or Markdown
Step 02
Theme
Pick a theme or customize with CSS variables
Step 03
Present
Open in any browser and deliver your talk
Step 04
Share
Export to PDF or deploy as a static page

Features

Everything you need, nothing you don't.

Keyboard First

Navigate with arrows, toggle fullscreen, access speaker notes — all from the keyboard.

Productivity
🎨

Themeable

Swap between dark, light, and gradient themes with a single class change.

Design

Zero Build

No bundlers, no dependencies. One HTML file is all you need to present.

Simplicity

Adoption Growth

Monthly active users (thousands)

2.4k
Jan
4.1k
Feb
5.8k
Mar
7.2k
Apr
9.6k
May
12.8k
Jun

Under the Hood

Simple, readable, extensible

slide-engine.js
class SlideEngine {
  constructor(deckSelector) {
    this.deck = document.querySelector(deckSelector);
    this.slides = [...this.deck.children];
    this.current = 0;
    this.total = this.slides.length;
    this.bindEvents();
  }

  navigate(direction) {
    const next = this.current + direction;
    if (next < 0 || next >= this.total) return;

    this.slides[this.current].classList.remove('active');
    this.current = next;
    this.slides[this.current].classList.add('active');

    this.updateProgress();
    this.updateNotes();
  }

  updateProgress() {
    const pct = ((this.current + 1) / this.total) * 100;
    document.getElementById('progress')
      .style.width = pct + '%';
  }
}

Visual Preview

Replace with your own image or screenshot

🖼 Image Placeholder 1440 × 900 recommended

Thank You.

Questions, feedback, and ideas are welcome.

yourname.dev/slides
Speaker Notes
Press S to toggle speaker notes.