DotMD Slides Showcase

DotMD Slides

Markdown in. A beautiful deck out.

A guided tour of the toolset · 2026

One format, every surface

Default layout, and no directive at all — this slide inherits the deck-wide background set once in the frontmatter.

• A thematic break starts the next slide
• The same bold, italic and inline code you already know
• Present, export or share — no proprietary file in sight

Layouts

Five built-in, one per job: title, section, two-column, quote — and the plain default slide you just saw.

Notes only you can see

Speaker notes stay with the active slide while you edit. The notes dock follows the card you are viewing, and compact screens open the same editor from the slide's Notes action.

• Presenter-only notes never appear on the audience stage
• Presenter view keeps the current notes beside the next slide
• Export and re-import keep every note attached to its slide

Say the important part loudly

Callouts are styled for the stage — accent bar, tint and glyph, all five kinds:

Columns, inline

Native :::columns splits a single slide without a line of CSS:

Numbers that render

Tables — Markdown pipes become a styled grid:

Code, verbatim

Fenced blocks keep every character — ideal for a live walk-through:

# Create a deck straight from your terminal via MCP
dotmd slides create ./launch.md --workspace northstar

Code on a stage is monochrome: the highlighter is an editor decoration, so what the room sees is clean, plain type.

Diagrams, drawn from a fence

A mermaid fence renders as live SVG on the stage — the same three backticks you would write in a document, and no picture to keep in sync:

flowchart LR
  A[Write Markdown] --> B{DotMD}
  B --> C[Present]
  B --> D[Export]

Lists for every shape

Ordered steps and a checklist, side by side on one slide:

1. Start from this sample
2. Swap in your own story
3. Hit Present

• Pick a theme
• Choose a layout per slide
• Write your speaker notes

Backgrounds

A solid colour, a gradient or an image — one directive each, and a legibility scrim keeps the text readable over all three.

The other fit

"fit":"contain" shows the whole picture instead of filling the stage with it — right when the image is a diagram or a screenshot rather than a mood.

• fit takes cover or contain
• position fine-tunes the framing
• overlay is your own scrim, and always beats the default

Gradients, named or written out

This slide rides a full CSS gradient, written inline. The five named presets each carry a slide of their own in this deck, so you can see every one rather than take our word for it:

• grape — the title slide
• slate — the deck-wide default
• ocean · mint · sunset — momentum, speaker notes, callouts

"We build every deck in DotMD now — the source lives right next to our code, and the AI drafts the first pass."

— A happy team lead

Edit without breaking the flow

The slides toolbar owns presentation settings, so slide content stays focused on the story:

• Switch layouts without rewriting content
• Change backgrounds from one shared picker
• Keep private notes in the notes dock

One theme, everywhere

Set theme: once in the frontmatter. Light, dark, midnight and paper stay aligned across the editor, slide rail, Present view and export.

Leave theme: out altogether and the deck follows each viewer's app appearance — light app, light deck.

Ship your first deck

You have just seen every layout, a deck-wide background and eleven per-slide ones, all five gradient presets, callouts on the stage, tables, code, columns, lists and private speaker notes. All of it from one Markdown file.

Made with DotMD. Three steps from here:

1. Edit the words
2. Keep the shape
3. Press Present