Atlas Presenter

Turn an Obsidian Canvas into a presentation. Not a stack of slides — a camera flying across a map of your notes.

Advanced Slides gives you one markdown file split by ---. Atlas Presenter gives you the canvas you already drew: cards keep their positions, edges become the running order, groups become sections, and you can leave the path at any moment and come back.

What it needs

Obsidian 1.7.2 or newer, and nothing else. Canvas is part of Obsidian, and everything Atlas does is its own code — no other plugin to install, no service to sign up to, no network call it makes by itself.

Three things are optional, and each says so when it is missing:

It loads on mobile, but exporting and opening a file in a browser need the desktop app, and recording needs a microphone.

Install

From the community store

Once Atlas is listed: Settings → Community plugins → Browse, search Atlas Presenter, Install, Enable. Nothing else to do.

With BRAT, before then

Install the BRAT community plugin, choose Add a beta plugin for testing, and paste Preeteshgm/atlas-presenter. BRAT keeps it up to date as releases are tagged.

By hand

Download main.js, manifest.json and styles.css from the latest release into <your vault>/.obsidian/plugins/atlas-presenter/, then enable Atlas Presenter under Settings → Community plugins.

After any of these, reload Obsidian with Ctrl/Cmd+R — a plugin already in memory does not pick up new files on its own.

The demo decks

The six canvases this README refers to are in demo/Atlas/. Copy that folder into your vault to follow along; 6 · A full talk is the one to present.

Presenting

Ctrl+Shift+P, the ribbon icon, or right-click a canvas in the file explorer. With a card selected, the deck opens on that card; with nothing selected it starts at the beginning.

Clicking the right two-thirds advances, the left third goes back. Clicking a control inside a card never advances the slide.

Where the deck opens

In a tab of its own. Like any Obsidian tab, you can drag it out to a window and put that window on whichever screen you like — then press F for fullscreen. Leave it where it is and it is simply a tab you can switch away from.

A tab is an ordinary leaf, which is the point: everything Obsidian opens lands beside it rather than somewhere you cannot see. The presenter panel opens itself in the sidebar, G steps the deck aside for the real graph view and offers a way back, and N puts the cursor straight in the panel's note box.

Closing the tab ends the talk, and so does Stop presenting.

Starting and stopping with a key

Atlas binds no hotkeys of its own — defaults collide between plugins and differ across platforms. Assign your own under Settings → Hotkeys, searching for Atlas. A pair worth binding:

Esc ends the talk too, but it works on the deck's own window — which may be behind something, or on a screen you cannot see. Stop presenting works from wherever you are.

Ctrl+P is safe inside a deck window: it does nothing. A deck window is a plain Chromium window as far as that key is concerned, and left alone it would raise a print dialog on the projector in the middle of a talk.

How a canvas becomes a deck

Traversal is depth-first: a branch is told to its end before the next begins. The start is the card with outgoing edges and none incoming, or any card containing #start. A canvas with no edges presents in reading order.

How a card is named

The same name appears on the map, in the next-card line, in the presenter window and in the minutes.

A card that opens with ## A short heading names itself well. One that opens with a long paragraph takes the whole first line, which reads badly on the map.

Pictures are the awkward case. A media card is named by its filename, which is fine when you chose it and poor when a camera did — so Pasted image 20251029102222 becomes Image · 29 Oct 2025, and IMG_2043.jpg becomes Image.

Better still, put the picture in a card rather than making the card a picture:

## The surfaces, to scale

![[surfaces.svg]]

Now you choose the name, and you get a caption for free.

Writing cards

Everything below is written on the canvas. Nothing needs a setting turned on, and no CSS ever goes in a card — so a card is still a readable, shareable note.

Markdown

Rendered through Obsidian itself, so wikilinks, embeds, Mermaid and Dataview all work.

Pictures

Obsidian's own sizing works on a card: ![[plan.png|420]] is 420 wide with the shape kept, ![[plan.png|420x260]] is forced into that box, and the number is pixels on the card, not on the screen. Several pictures written on one line become a row rather than a stack.

Three layouts, all taking the same markup:

<div class="atl-gallery">   <!-- all at once, side by side in a grid -->
<div class="atl-slideshow"> <!-- one at a time, in place, with dots -->
<div class="atl-scroll">    <!-- a column the card scrolls through -->
  <img src="Assets/a.png">
  <img src="Assets/b.png">
</div>

A slide show has dots, arrows, swipe (any direction) and five transitions. → steps through it before leaving the card.

Sound, video and the web

A sound file on a card gets a face rather than a 40px player adrift in the middle of a slide: its name, how long it runs, and bars that move only while it is playing. Putting it inside a card is usually better — you choose the heading, and you have room to say why anyone is listening.

Video plays the same way. .mp4 (H.264) and .webm work; .mov and .mkv usually do not, because Chromium cannot decode those containers — you get a black rectangle with working controls, and the fix is to re-wrap the file. A voice memo saved as .webm has no picture, and shows as a bar once its metadata says so.

A link to the web opens over the deck, not in your browser. Obsidian would hand it to the system browser, which leaves the talk behind a window you then have to find your way back from, in front of a room. Esc closes it, and the bar carries the address and a way out to a real browser — always there, because a site that refuses to be framed says so in a header we cannot see the effect of from inside.

Styling hooks, with no CSS in the card

The tag line is stripped before rendering, so it never reaches the slide.

HTML, when you want full control

```slide-html
<style> .hero { display: grid; place-items: center; } </style>
<div class="hero">Anything you like</div>
```

It renders into a shadow root, so a card's CSS cannot leak. <script> runs, so a card can hold a toggle, a chart or an animation. A card that animates should stop when off camera:

Two things are already in scope for you: root, the card's own shadow root, and host, the card element. Look things up through root — document sees a different tree and will find nothing.

The code is compiled and run, not inserted as a <script> element, because a script element in a shadow root is not reliably executed. So document.currentScript is not available, and root is how you find yourself.

const chart = root.querySelector('#chart');

// A card that animates should stop when it is off camera.
host.addEventListener('atlas:enter', start);
host.addEventListener('atlas:leave', stop);

Anything that throws is printed on the card, so a broken script says so rather than failing quietly.

A .html file dropped on the canvas behaves the same way. note.md#Heading cards present just that section.

The #deck card

One card, tagged #deck, configures the deck — and, if you write anything under its settings, opens the talk.

#deck

theme: Atlas/Theme.css
logo: Assets/client.png
header: {deck} · {section} · {n}/{total}

# Northwind Depot
Controls plan, rev A · **Sam Avery**
---
![[logo.png|170]]

key: value lines above the first blank line are settings. Everything below is the banner: a real card, rendered like any other, presented first.

It is sized for you — as wide as the first section, never wider than the canvas, never flatter than 4:1, and as tall as the cards below it. Dragging the card changes nothing; resize the first group and the banner follows. It is given the #banner role, which sets the title large, centres everything against the height and aligns the right-hand column right; write a role of your own and yours is used instead. The standing header and the page number are hidden on it, and the deck's logo is shown at banner size.

A #deck card carrying settings and nothing else has no banner and no extra stop, exactly as before.

# is the talk's title, ## a size down, ### smaller again; a plain line becomes the subtitle. The band is 24% of the screen by default — adjust it in Style Settings, or with --atl-band in a theme. Wrap a note to yourself in %%…%% and it is ignored, the same as a speaker note — otherwise it would end up on screen. Every key becomes a token — {title}, plus built-in {deck} {section} {n} {total} {date}.

These keys override the plugin settings for this canvas alone, so a client deck and an internal deck can differ entirely with nothing in settings:

theme: backdrop: logo: logo corner: logo height: accent: colour: image: dim: align: fit: transition: header: header on: section: variant: advance:

section: says how a section overview is framed — title (the default) frames the section's name and its first cards, the same size on every section, and contain shows the whole section however wide it is.

backdrop: takes any CSS background — a colour, or a gradient, which is what sits behind the cards:

backdrop: linear-gradient(180deg, #FBFCFA, #E4EAEC)

Atlas/Themes/Backdrops.css lists two dozen of them to copy, and the same set is in Atlas/Backdrops/ as SVG files for image: instead. A theme carries the default; this line overrides it for one canvas, exactly as theme: does.

advance: 8s runs the deck by itself for an unattended screen — a lobby, a stand. Any keypress stops it, because someone has arrived.

Theming

Every # line

A line holding nothing but tags is an instruction. It is removed before the card is drawn, so it never reaches the slide.

Markers — what a card is:

Roles — how a card looks:

The card roles

Every Atlas theme implements the same names, so a deck written against one theme works against all of them. Put a bare tag line at the top of a card — it never reaches the slide.

Two more split the card themselves, and say what becomes of the first block. Add either to a split layout, or write one on its own:

Saying neither keeps the old rule: a first block of nothing but headings becomes a band, anything else is a column.

Layouts you place yourself

#split flows: text runs out of the bottom of the left column into the top of the right, and you cannot say what goes where. These four let you say. They split the card at a --- rule.

#two
# This heading spans both
---
The left column.
---
The right column.

Two blocks make two columns. A first block of nothing but headings becomes a band across the top instead of a column. The rule needs no blank line around it: on these cards a line of three dashes is always a rule, never a markdown underline for the line above it. For #left and #right the order on the card is the order on the screen: write the picture first for #left, second for #right. +++ reveals work inside a column.

Unlike the roles above, these are defined in the plugin's own stylesheet using each theme's tokens — so they work with any Atlas theme, and with none.

Placing a block yourself

:::pin lifts a block out of the flow and puts it against the card. :::align leaves it in the flow and places it inside its column.

:::pin top-right row
![[a.png|90]] ![[b.png|90]]
:::

:::align bottom-left
The foot of this column.
:::

Nine places, for both: top-left top top-right left centre right bottom-left bottom bottom-right. Add row to lay the block across instead of down. A block with no closing ::: runs to the end of its column — the --- rule stops it — so the closer is only needed when something follows it in the same column.

Advanced Slides' <grid> says the same thing and is accepted as written, so a deck carried over keeps working:

<grid drag="40 60" drop="topright">…</grid>
<grid drag="30 20" drop="10 72">…</grid>

drop takes a name or an x y pair in percent; drag is width and height in percent; flow="row" lays it across. Markers inside a code fence are left alone, so a card can document them.

Tables and lists

Neither needs a tag. Obsidian's own table CSS is sized for a note at 14px inside a card the camera then scales up, which on a projector is a postage stamp in the wrong colours. Atlas restyles both for a slide: a ruled header row, banded rows, tabular numerals, markdown's ---: and :---: alignment, accent-coloured bullets and real checkboxes for a task list.

Ten themes, ready to use

Settings → Theme and background → Theme stylesheet, which lists only stylesheets that are actually Atlas themes — a vault that has exported a reveal.js deck holds dozens that would do nothing here. Or theme: Atlas/Themes/Slate.css on a canvas's #deck card, to change one deck without touching settings.

A theme carries its backdrop too, so picking one is the only choice most decks need. backdrop: on a #deck card overrides it for that canvas, and Atlas/Backdrops/ holds two dozen as image files if you would rather pick one in settings.

A picture behind the cards

Two lines on the #deck card, and they beat both the theme's backdrop and any backdrop: line:

#deck

theme: Atlas/Themes/Glass.css
image: Atlas/Backdrops/Harbour fall.svg
dim: 0.35

image: is a vault path — no brackets, no exclamation mark, spaces are fine. dim: is 0 to 1 and lays black over the picture so the deck stays readable: photographs usually want 0.45 to 0.6, the flat SVG backdrops 0.2 to 0.4.

A backdrop wants one tone across the middle where the cards sit, detail only at the edges, and no focal point of its own. Glass is the theme built for this case: translucent cards over a frosted blur, so the picture carries colour through the deck instead of hiding behind it.

Making your own

Copy Atlas/Themes/_Template.css, which documents every token with what it touches, and change the block at the top. A theme is only a list of values — the card roles live in the plugin, so they work with any theme and with none:

.atl-overlay {
  --paper: #F4F5F0;      /* card background */
  --ink: #14232A;        /* text */
  --ink-soft: #4E5F66;   /* secondary text */
  --rule: #C6CDC6;       /* borders */
  --accent: #1D5A78;     /* the current card on the map, highlights */
  --radius: 14px;
  --body-size: 19px;
  --display-font: 'Archivo Narrow', sans-serif;
  --body-font: 'IBM Plex Sans', sans-serif;
  --mono-font: 'IBM Plex Mono', monospace;
  --atl-inactive: 0.18;  /* how visible off-camera cards are */
}

What to use when

Reach for the row you need and stop there. Most decks never get past the third.

Other hooks

.atl-node[data-color="1"]              /* canvas colours 1–6 */
.atl-node[data-group="the-evidence"]   /* a whole section at once */
.atl-node.is-active                    /* the card on camera */
.atl-group-label                       /* section names on the map */

A group is also a .atl-node. Styling .atl-node with a background paints a panel over the cards inside every group. Use :not(.atl-node-group).

With a deck open, Ctrl+Shift+I shows you the exact classes on anything.

Settings