Present Slide Decks

What this is

A slide deck editor built on Marp, an open markdown-to-slides format. You write plain text with --- separators between slides, and the editor renders them live. When you're ready, hit Present → and the browser becomes the projector.

The deck editor opens with a sample loaded. Reading it beside this page is the fastest way in.

How you get one

You can paste markdown directly, or generate a deck from scratch.

1. Generate tab — enter a topic and optionally paste learning intentions or content.
2. Set the slide count, then Build prompt and Copy to clipboard.
3. Paste into any AI assistant.
4. Copy the markdown it returns and paste it into the editor.

You can also Import a .md file, or Load URL to pull a deck from a raw GitHub URL or any URL serving markdown.

Slide basics

Every deck starts with a frontmatter block. The --- fences are required — Marp uses them to identify the deck and read its settings.

---
marp: true
theme: default
---

# First slide

Content here

---

## Second slide

More content

• --- on its own line separates slides. Everything between two separators is one slide.
• Standard markdown works: headings, bold, italic, lists, tables, links, images, code blocks.
• A line starting with <!-- --> is an HTML comment — Marp uses these for per-slide directives and speaker notes.

For the full syntax, read the Marpit directives reference. This page covers what the editor adds on top.

Themes

Three built-in themes: default, gaia, and uncover. Set the theme in the frontmatter or use the Theme dropdown in the toolbar — it updates the frontmatter for you and the preview re-renders live.

---
marp: true
theme: gaia
---

Images

Marp uses a special alt-text syntax for background and split-layout images.

![bg right:40%](https://example.com/photo.jpg)

• ![bg](url) — full-slide background image.
• ![bg right:40%](url) — image takes 40% on the right, content on the left.
• ![bg left:45%](url) — image on the left.

Drag and drop. Drag an image from any website onto the slide preview. If the slide has a placeholder (placehold.co), it fills that. If it has an existing image, it replaces it. If it has neither, it inserts a new split-layout image.

Edit images. The 🖼️ Edit images button opens a panel where you can change URLs, adjust layout (left, right, background, inline), sizing, and split percentage for every image in the deck at once.

Speaker notes

Write speaker notes as HTML comments after the slide content. They won't appear on the projected slide.

## Cell Structure

The cell membrane controls what enters and exits.

<!-- Remind students about osmosis from last week.
     Ask for examples of selective permeability. -->

Notes appear in the slide preview panel and in presenter view during presentation — press P to toggle it. They're also carried into PowerPoint exports as slide notes.

Diagrams

Fenced ```mermaid code blocks are rendered to images automatically. Write the diagram source in the editor — the preview shows the rendered result.

```mermaid
graph LR
    A[Input] --> B[Process]
    B --> C[Output]
```

Mermaid is lazy-loaded only when a deck uses it, so it doesn't slow down decks that don't. If there's a syntax error, the raw code block shows instead — fix the source and the diagram re-renders.

Presenting

Click Present → to enter presentation mode. The browser becomes the projector — no export step, no app switch.

• Arrow keys and Space navigate slides and fragments (bullet reveals).
• F toggles fullscreen.
• P opens presenter view — your notes and slide count alongside the current slide.
• C hides the control bar for a clean display.
• Esc returns to the editor.

The control bar also has buttons for sharing, copying markdown, changing the theme live, and exporting — all accessible without leaving the presentation.

Sharing

Click 🔗 Share link to get a URL that contains the entire deck. No server, no upload — the deck is compressed and encoded into the URL hash. Anyone with the link sees exactly what you see.

Very large decks can be truncated by messaging apps or LMS fields. The share dialog warns you when the URL exceeds a safe length.

Exporting

• Export PPTX — renders each slide as a high-resolution image inside a PowerPoint file. Speaker notes are carried through. The export runs entirely in your browser; nothing is uploaded. Hold Shift and click for a debug preview of slide 1.
• Export markdown — downloads the deck as a .md file. This is the source format and round-trips perfectly.
• Copy markdown — copies the raw markdown to your clipboard.

Generating well

• More source material → better decks. A topic alone produces generic slides. Paste learning intentions, success criteria, or lesson notes and the AI has something to work with.
• Set the slide count. The prompt tells the AI how many slides to aim for. Eight is a sensible default for a lesson segment; adjust to match.
• Use the style field. Formatting preferences, house conventions, whether you want more images or fewer — it goes into the prompt verbatim.
• Expect to edit. Replace placeholder images, adjust the theme, reorder slides, add speaker notes. The generator gets you to a draft, not to a finished deck.

Shortcuts

In the editor

Pasting a fenced ```markdown reply from an AI automatically strips the fences — you get clean markdown, not a code block.

In presentation mode