Docs

A presentation is one Markdown document. In guest mode it lives in this browser (IndexedDB). Sign in and it syncs to your account in Postgres so you can open the same decks on another device. Open the Templates page to start from a full lesson, or press New on the home page for a blank deck.

• The editor (left) is a plain-text Markdown editor with syntax highlighting.
• The preview (right) renders the current slide at a real 16:9 aspect ratio.
• The filmstrip along the bottom shows every slide as a thumbnail — click to jump, drag to reorder, or use the + button to add an empty slide.
• The inspector (toggle from a slide) exposes layout, theme, motion, and image fields as form controls if you’d rather not hand-write frontmatter.
• Changes autosave as you type — signed-in decks go to your account, guest decks stay local.

Sign in (top-right) with Google or email and password. Your name, decks, settings, and Pro status live in Postgres behind Row Level Security — only you can read or write them. Guest mode still works with no account; the first time you sign in, local decks in this browser are copied into your account.

Writing, themes, motion, and presenting stay free. PDF, PowerPoint, PNG, and standalone HTML exports are a one-time DevSlides Pro purchase via Razorpay, stored on your profile so it follows you across devices.

Slides are separated by a line containing only ---. The first heading on a slide becomes its title.

# Binary Search

Search a sorted array in O(log n).

---

# The invariant

low <= mid <= high, and the answer is always inside [low, high].

Each slide can start with its own YAML frontmatter block to set layout, theme overrides, motion, and more:

---
layout: two-columns
motion: fade-up
---

# Two columns

Left column text.

---

Right column text.

Document-level settings (theme, title, default page transition) live in a frontmatter block at the very top of the file, before the first slide:

---
title: Binary Search Lesson
theme: ink
pageTransition: wipe
---

# Binary Search
...

Speaker notes are written as an HTML comment anywhere in a slide and never render on screen — only in presenter mode with N:

<!-- notes: Remind them binary search needs a sorted array first. -->

Set layout: in a slide’s frontmatter to change how its content is arranged. Layouts are also available from the inspector’s Layout field.

Set theme: in the document frontmatter, or pick one from the editor’s Theme menu. Themes control background, ink color, accent color, and code highlighting together.

Add an image with the toolbar’s Image button, the inspector, by pasting from your clipboard, or by dropping a file on the slide. It’s stored in Markdown as a normal image tag:

![alt text](https://example.com/diagram.png)

Small files are embedded directly as a data: URL so the deck stays a single, self-contained Markdown file. Large embedded images are automatically shown as a collapsed, clickable placeholder in the editor instead of one unreadable line — click it to expand and edit the raw data if you ever need to. Layout image-text places the slide’s first image beside the remaining text.

Framer Motion animates titles, text, images, and diagrams while presenting. Configure it per slide in frontmatter:

---
motion: fade-up
stagger: 0.08
duration: 0.45
---

motion accepts an enter preset for how a slide’s content appears:

nonefadefade-upfade-downslide-leftslide-rightzoompopbounce

…or a text preset that plays once when the slide enters:

revealtypewritersplittext-skewrollswaptext-filltext-strokepopoutweightdissolveperspectiveblurblur-outhighlight

Looping presets repeat continuously and are best applied to a single element rather than the whole slide (see below):

wavewobbleglitchneonmarqueecircleflowblobgradientshimmerrainbowaurorafirehueglintscanchromaticpulseheartbeatflickerblinktext-floatbounce-loopjittersparkleswingelastictype-loop

Override motion per element by writing the preset as an HTML attribute:

<p fade-up>This paragraph fades up.</p>

<p motion="slide-left" delay="0.2">This one slides in later.</p>

<p wave>Looping wave letters.</p>

<p gradient>Looping gradient color.</p>

<motion zoom stagger="0.1">- First - Second</motion>

delay and duration take seconds (0.2) or CSS time (200ms). Set motion: none to keep a slide static. For swap headings, put the options directly in the title: # Search | Sort | Graph with motion: swap.

pageTransition: in the document frontmatter sets the default animation between slides; transition: on a slide overrides it for the transition into that slide:

nonefadeslideappearpushcoverwipestagger-wipeblindsdoorsirisshutterpixelszoomflip

Two special transition: values change how → behaves on a slide instead of animating the page:

Open the Page transitions and Text motion templates from the Studio category to try every preset live.

Fenced code blocks get syntax highlighting for any language. Add line ranges in curly braces to progressively highlight lines with transition: code-step:

```cpp {1-2,4}
int left = 0;
int right = n - 1;

int mid = left + (right - left) / 2;
```

C++ fences become a small in-slide editor with a Run button. They compile with clang++ or g++ and print stdout beneath the code. Add run after the language to auto-execute the moment the slide opens in Present mode:

```cpp run
#include <iostream>
int main() {
    std::cout << "Hello\n";
}
```

Seven layouts render an interactive diagram instead of static text — useful for stepping through an algorithm live instead of drawing on a whiteboard: viz-array, viz-tree, viz-list, viz-graph, viz-stack, viz-queue, and viz-complexity. Configure the data through slide frontmatter or the inspector’s Visualizer field. For example, a live Big-O graph:

---
layout: viz-complexity
curves: [logn, n, nlogn, n2]
algorithm: binary-search
inputSize: 32
---

Once presenting, drag the input-size handle directly on the slide, or use → to step through the algorithm’s visualization frame by frame.

A mermaid fence renders a live flowchart, sequence, or class diagram:

```mermaid
flowchart LR
  Hook --> Model
  Model --> View
```

Layout asciinema plays a terminal recording — drop a .cast file on the slide, or embed one directly in a cast fence for a fully self-contained deck.

Press Present in the toolbar (or open /present/<id> directly) to go fullscreen with a floating toolbar for navigation, drawing, notes, adding a slide on the fly, and returning to the editor without leaving the stage.

• Draw — freehand ink on top of the current slide; strokes are saved per slide and cleared per deck.
• Notes — a speaker-notes panel that only you (the presenter) see.
• Slide editor — a lightweight Markdown editor overlay so you can fix a typo or add a bullet without leaving presenter mode.
• Add empty slide — insert a fresh slide right after the current one mid-talk, for a live tangent or a question from the room.

While presenting:

In the editor’s own preview pane:

The toolbar’s Export menu turns your deck into a PDF (one 16:9 page per slide), a PowerPoint file, a PNG for every slide (zipped), the raw Markdown source, or a standalone HTML file that plays the whole deck — motion, drawings, and all — with no server or dependency, anywhere.

Writing, themes, motion, and presenting are free forever. PDF, PowerPoint, PNG, and standalone HTML exports are a one-time DevSlides Pro unlock — sign in, pay once with Razorpay, no subscription. Raw Markdown export is always free.

Share currently copies the Markdown or downloads a standalone HTML file. Signed-in decks already live in your account; public view links are still a later feature.