Documentation

Prezento decks are plain Markdown. Write in the editor, watch the live preview, and share a link. This page is the full syntax reference.

The basics

A deck is one Markdown document. Standard Markdown works everywhere — headings, lists, bold, italic, links, images, blockquotes, and tables. The deck title is taken from the first # heading.

Slides & structure

--- on its own line starts a new horizontal slide.
-- starts a vertical sub-slide, nested under the slide above it.
A Note: line marks everything after it as speaker notes (press S in the presenter to see them).
Per-slide options go in an HTML comment as the slide's first line, e.g. .

Syntax reference

Everything the editor's ⌘K insert menu can add, by category.

Slides

New slideA new horizontal slide.

---

#

Sub-slide (vertical)A vertical slide nested under the current one.

--

##

Title slideA title with a subtitle line.

---

# 

Your subtitle here

Auto-animate pairTwo slides that smoothly animate matching elements between them.

---
<!-- .slide: data-auto-animate -->

# Build it

- Idea

---
<!-- .slide: data-auto-animate -->

# Build it

- Idea
- Design
- Ship

Backgrounds

Color backgroundSolid background color for the slide.

---
<!-- .slide: data-background-color="" -->

# Heading

Gradient backgroundCSS gradient background.

---
<!-- .slide: data-background-gradient="linear-gradient(135deg, #6d4aff, #17b2c3)" -->

#

Image backgroundFull-bleed image background.

---
<!-- .slide: data-background-image="https://" data-background-size="cover" -->

# Heading

Video backgroundLooping, muted video background.

---
<!-- .slide: data-background-video="https://" data-background-video-muted data-background-video-loop -->

# Heading

Webpage backgroundInteractive embedded webpage as the background.

---
<!-- .slide: data-background-iframe="https://" data-background-interactive -->

# Heading

Light text slideForce light text — for slides over a dark image or video (color backgrounds adapt on their own).

---
<!-- .slide: data-background-image="https://" data-background-size="cover" class="slide-light-text" -->

# Heading

Dark text slideForce dark text — for slides over a light image or video.

---
<!-- .slide: data-background-image="https://" data-background-size="cover" class="slide-dark-text" -->

# Heading

Media

ImageAn inline image.

![Alt text](https://)

Image with lightboxClick the image to open it full-screen.

<img src="https://" width="600" data-preview-image>

VideoAn embedded video with controls.

<video src="https://" controls width="800"></video>

YouTube embedLazy-loaded YouTube video (auto-plays when the slide opens).

<iframe data-src="https://www.youtube.com/embed/" width="800" height="450" frameborder="0" allowfullscreen></iframe>

Link previewA link that opens in a full-screen overlay.

<a href="https://" data-preview-link>Open preview</a>

Code

Code blockSyntax-highlighted code with stepped line highlighting.

```js [1|2-3]
const greeting = "hello";
const name = "";
console.log(greeting, name);
```

Text

Two columnsSide-by-side content columns.

<div class="columns">
  <div class="column">
    <h3>Left</h3>
    <p></p>
  </div>
  <div class="column">
    <h3>Right</h3>
    <p>…</p>
  </div>
</div>

CalloutA highlighted callout box.

<div class="callout">
  💡 
</div>

QuoteA block quote with attribution.

> 
>
> — Author

Fragment listA list whose items appear one at a time.

- First  <!-- .element: class="fragment" -->
- Then this <!-- .element: class="fragment" -->
- Finally <!-- .element: class="fragment" -->

Colored textColor part of a line. Select text first to wrap it. Names: accent, muted, success, warning, danger.

[]{accent}

Tables

TableA starter markdown table.

| Column A | Column B |
| -------- | -------- |
|  | Cell |
| Cell | Cell |

Math

Inline mathInline KaTeX expression (edit between the $ signs).

$E = mc^2$

Block mathCentered display KaTeX equation.

$$

$$

Notes

Speaker notesNotes shown only in the speaker view (press S).

Note:

Themes & transitions

Pick a theme and transition from the Themes panel in the editor — they apply to the whole deck and are saved with it.

Themes

Default
Dark
Editorial
Mono
Vibrant

Transitions

none
fade
slide
convex
concave
zoom

Keyboard shortcuts

`→ / Space`	Next slide (or next fragment)
`←`	Previous slide
`↑ / ↓`	Move through vertical sub-slides
`F`	Fullscreen
`Esc / O`	Slide overview
`S`	Speaker view (notes + timer)
`Q`	Exit presenter mode
`⌘K / Ctrl-K`	Insert menu (in the editor)

Export & sharing

Share link — make a deck public and anyone with the link can view it. Public decks also get a social preview image and can be embedded.
PDF — exports through the browser's print dialog with crisp, selectable text.
PowerPoint (.pptx) — each slide is captured as a full-bleed image and assembled into a deck.
Embed — copy an <iframe> from a public deck to drop it into Notion, a blog, or any site.

A note on images

Images, videos, and backgrounds are referenced by URL — prezento doesn't host uploads yet. Point at an image you've already published (your site, a CDN, an image host), for example ![Chart](https://example.com/chart.png).

Start a deck