A Slidewright deck is a Markdown file. The slidewright command presents the deck in the browser. It also builds the deck into a static site, and exports the deck to PDF or PNG files.

Make a deckCopy Anchor Link

Run these commands. They make a project in the my-talk folder, install its packages and present its deck:

npm create @slidewright my-talk
cd my-talk
npm install
npm run dev

The deck shows at localhost:3030. The project has two files to edit:

• slides.md, the deck
• style.css, the theme.

When you save slides.md, the deck in the browser changes immediately, on the same slide.

You need Node.js 20.19 or later in version 20, or Node.js 22.12 or later.

Write slidesCopy Anchor Link

A line with only --- starts a new slide. A YAML block at the top of a slide gives its settings, such as its layout. HTML comments hold step markers and speaker notes, so the file is also easy to read as plain Markdown.

Edit the deck below. The slides change as you type:

What a deck can holdCopy Anchor Link

The examples show these features on slides.

With an AI agentCopy Anchor Link

A skill teaches the deck format to an AI agent, such as Claude Code, Codex or Cursor. Then the agent can write and edit decks. To add the skill to your project, run this command:

npx skills add trafargarlaw/slidewright

The skill has the steps to make a deck, a short guide to the format, and the quantity of text that fits on a slide. It also has the reference pages of this site.

PresentCopy Anchor Link

The presenter view shows your notes, the next slide and a timer. It moves with the deck in the first window. See Keyboard for all the keys.

ShareCopy Anchor Link

To build the deck into a static site, run this command:

npm run build

The site goes into the dist folder. You can put it on any static host. See Deploy.

To export the deck, you need Playwright, which opens the deck in Chromium. Install it one time:

npm install --save-dev playwright-chromium

To export the deck to slides.pdf, run this command:

npx slidewright export

To export each slide to a PNG image, run this command:

npx slidewright export --format png

See Export for all the options.

Use in a React appCopy Anchor Link

The deck renderer is a React component. It needs no build plugin. Install it:

npm install @slidewright/react

Then show a deck:

import { Deck } from "@slidewright/react";
import "@slidewright/react/styles.css";

export function Talk({ markdown }: { markdown: string }) {
  return <Deck markdown={markdown} />;
}

When markdown changes, the deck renders again and stays on the same slide and step. The editor above uses such a deck. See the React app example for a full app.

Next stepsCopy Anchor Link