Documentation

Riff is a presentation tool that transforms markdown into stunning slide decks. Write your content naturally, and Riff handles the design.

No more fighting with slide layouts or hunting for the right template. Just write, and present.

Get your first presentation in 60 seconds:

1. Open the Editor
2. Paste your content or start typing
3. Use --- to separate slides
4. Click Present to view your deck

Here's a minimal example:

# Welcome to My Talk
### A brief introduction

---

## The Problem
- Point one
- Point two
- Point three

---

## The Solution
Our approach solves everything.

[image: futuristic solution diagram]

---

# Thank You
Questions?

The editor has three main areas:

• Left panel: Markdown editor where you write content
• Right panel: Live preview of your current slide
• Top bar: Tools for themes, images, publishing, and presenting

The editor features syntax highlighting for slide-specific tokens like --- delimiters,**pause** markers, and [image:] placeholders.

Type / anywhere in the editor to open a command menu. Quickly insert common elements without memorizing syntax.

Start typing after / to filter commands. Press Enter or Tab to insert.

Separate slides with three dashes (---) on their own line:

# First Slide
Content here

---

# Second Slide
More content

---

# Third Slide
Even more content

Control slide content alignment with [horizontal, vertical] markers at the start of a slide:

[center, center]  // Centered (default)

# Impact Statement

---

[left, top]  // Top-left aligned

# Content-Heavy Slide

- Point one
- Point two
- Point three

---

[center, top]  // Top-centered (good for grids)

# Our Features

[grid]
- ## Feature 1
- ## Feature 2

Horizontal: left, center, right

Vertical: top, center, bottom

Standard markdown formatting works as expected:

# Heading 1 (slide title)
## Heading 2 (section)
### Heading 3 (subtitle)

**Bold text** for emphasis
*Italic text* for nuance
~~Strikethrough~~ for corrections
`inline code` for technical terms

[Link text](https://example.com)

Create bullet lists, numbered lists, and tables:

Bullet list:
- First item
- Second item
  - Nested item
- Third item

Numbered list:
1. Step one
2. Step two
3. Step three

Tables:
| Feature | Status |
|---------|--------|
| Themes  | Done   |
| Images  | Done   |
| Export  | Soon   |

Create horizontal card layouts for features, benefits, or comparisons:

[grid]
- [icon: rocket]
  ## Launch Fast
  Deploy in minutes
- [icon: shield]
  ## Stay Secure
  Enterprise-grade protection
- [icon: zap]
  ## Scale Easy
  Grows with you

Each bullet (-) starts a new card. Within each card:

• [icon: name] - Lucide icon (optional)
• ## Heading - Card title
• Plain text - Description

Use **pause** between grid items for progressive reveals:

[grid]
- ## Step 1
  Research

**pause**

- ## Step 2
  Build

**pause**

- ## Step 3
  Launch

Display code with syntax highlighting:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

```python
def greet(name):
    return f"Hello, {name}!"
```

Add notes that only you see during presentation. Use blockquotes:

# My Slide Title

Visible content here.

> These are speaker notes.
> Only visible in presenter mode.
> Use them to remember key points.

Press N during presentation to toggle notes.

Add images by describing what you want. Riff shows a placeholder that you can click to generate or upload an image:

[image: a serene mountain landscape at sunset]

[image: diagram showing user authentication flow]

[image: team collaboration in modern office]

Create split layouts by adding a position after the description:

[image: description, left]    // 30% image left, 70% content right
[image: description, right]   // 70% content left, 30% image right
[image: description, top]     // 70% image top, 30% content bottom
[image: description, bottom]  // 30% content top, 70% image bottom

Left/right positions create portrait-oriented images, while top/bottom create landscape-oriented images.

[left, center]

# Our Process

### Building great products requires great collaboration

[image: Team brainstorming around whiteboard, right]

Click any image placeholder, then click the generate button. Riff uses AI to create an image matching your description.

Use the Style dropdown in the toolbar to set a default style for all generated images:

• None: Use your description as-is
• Photographic: Realistic, high-quality photos
• Illustration: Clean, vector-style graphics
• 3D Render: Modern 3D visualizations
• Sketch: Hand-drawn aesthetic

Click any image placeholder, then click the upload button to use your own image. Supported formats: JPG, PNG, GIF, WebP.

Click the Theme button in the toolbar to open Theme Studio. Describe the mood you want, and AI generates matching colors, fonts, and styling.

Example prompts:

"Dark minimal with subtle cyan accents"
"Warm and elegant with gold on deep burgundy"
"Clean Apple-style with generous white space"
"Editorial magazine with sophisticated serifs"

Theme Studio includes pre-built quick styles. Click any style to load its prompt, then click Generate to apply it.

For advanced control, expand "Advanced: System Prompt" in Theme Studio. This lets you customize the instructions given to the AI theme generator.

Click Present in the toolbar to enter fullscreen presentation mode. Your slides display edge-to-edge with a minimal control bar.

Use **pause** to create click-to-reveal content:

# Building Suspense

First point appears immediately.

**pause**

Second point appears on click.

**pause**

Final reveal!

Text Effects - Add animations to titles:

# Title [anvil]       // Dramatic drop-in bounce
# Title [typewriter]  // Character-by-character
# Title [glow]        // Pulsing glow effect
# Title [shake]       // Attention-grabbing shake

Background Effects - Decorative slide backgrounds:

[bg:glow-center]            // Radial glow
[bg:grid-top-right]         // Grid pattern
[bg:hatch-bottom-left-amber] // Hatched pattern
[bg:dashed-center-blue]     // Dashed grid

Colors: accent, amber, blue, purple, rose, emerald, cyan, orange, pink

Click Publish in the toolbar to make your deck public. You'll get a shareable link that anyone can view.

Published decks are accessible at riff.im/p/[token]

After publishing, copy the embed code to add your presentation to any website:

<iframe
  src="https://riff.im/embed/[token]"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
></iframe>

Your content is stored as markdown, making it easy to export. Copy from the editor to save your slides as a .md file.

Import existing documents to convert them to slides:

• PDF: Extracts text and converts to slides
• DOCX: Word documents
• TXT: Plain text files
• MD: Markdown files

For best results when importing:

• Use clear headings in your source document
• Break content into logical sections
• Keep paragraphs concise
• Review and edit after import

Credits are used for AI-powered features. You only pay for what you use—no subscriptions, no monthly fees.

• New users get 50 free credits to explore
• $1 = 20 credits ($0.05 per credit)
• Credits never expire

Here's what each AI feature costs:

Everything else—editing, presenting, publishing, embedding—is completely free.