Use Kadal Deck in VS Code

In this guide you set up VS Code for writing decks: a preview that follows your cursor, an outline you can reorder by dragging, completions for every setting and component, problems on save, and formatting. It takes about five minutes.

You need VS Code 1.90 or later and a deck with its packages installed. No deck yet? Step 2 makes one.

1. Install the extension

Open the Extensions view (Ctrl/⌘ Shift X), search for Kadal Deck and install the one published by kadal. Or, from a terminal:

code --install-extension kadal.kadal-deck

VSCodium, Cursor and other editors built on VS Code get it from Open VSX under the same name.

2. Open a deck

Open the folder that holds your deck.mdx (File → Open Folder…). The extension wakes up when the workspace contains a deck.mdx or a slides.mdx, and a Kadal Deck icon appears in the activity bar.

No deck yet? Run Kadal Deck: New deck… from the command palette (Ctrl/⌘ Shift P). Pick a folder and a name, and it runs npm create @kadal/deck@latest <name>pnpm create @kadal/deck <name>yarn create @kadal/deck <name>bun create @kadal/deck <name> in a terminal. Then install its packages and open it:

npmpnpmyarnbun

cd my-talk
npm install
code .

cd my-talk
pnpm install
code .

cd my-talk
yarn install
code .

cd my-talk
bun install
code .

3. Start the preview

Open deck.mdx, then the Kadal Deck icon in the activity bar. Press the play button on the Preview view (or the one in the editor’s title bar). The extension runs kadal-deck dev on port 3030 and shows the deck in the view. If kadal-deck dev is already running on that port in a terminal, it uses that one instead.

Now move the cursor from slide to slide in deck.mdx: the preview shows the slide the cursor is in, without reloading. Type, and the slide updates as you go. To keep the preview on one slide while you edit elsewhere, press the lock on the Preview view.

Tip

Drag the Preview view into the secondary side bar (Ctrl/⌘ Alt B opens it) to have the text on the left and the slide on the right.

4. Move around and reorder slides

The Slides view is the deck’s outline: every slide numbered as the deck numbers it, titled from its first heading, with its layout beside it. Vertical slides nest under their column. Click a slide to jump to it in the editor; the eye button shows it in the preview.

To reorder, drag a slide onto another: it moves there with its frontmatter and notes, and nothing else in the file changes. Ctrl/⌘ Z undoes the move in one step.

In the editor, each separator line shows the number and title of the slide it starts, and every slide folds.

5. Write with IntelliSense

Type in the headmatter (the YAML at the top) and every deck setting is offered, with its documentation, type and default. In a slide’s frontmatter the slide settings are offered, and after layout: , transition: , theme: or background: the values those take:

---
layout: two-cols
background: aurora
transition: fade
---

In a slide, type < for every component; picking one inserts it with its required props filled in as a snippet. Hover any setting or component to read its documentation.

6. Let the checker catch mistakes

Save the file: the extension runs kadal-deck check and puts what it finds in the Problems panel, on the line it concerns: an unknown layout or setting, a misspelt component, a missing image, a broken src: include, a glossary mistake. The check on save skips compiling every slide, to stay fast; Kadal Deck: Check the deck runs the full check.

7. Format

Format Document (Shift Alt F; ⇧ ⌥ F on a Mac) tidies the deck with its own Prettier plugin: separators and frontmatter normalised, each slide’s Markdown formatted, and code, notes, magic move, <style> and ::slot:: markers left exactly as written. To format on every save, add to your settings:

{
  "[kadal-deck]": { "editor.formatOnSave": true }
}

8. Present and export

• Open the presenter view (the screen button on the Preview view) opens /presenter in your browser at the cursor’s slide. The globe opens the deck itself there.
• Export to PDF (in the Preview view’s menu) runs kadal-deck export in a terminal and writes export/my-talk.pdf (named after the deck’s folder). The first export needs Playwright in the deck: npm i -D playwright && npx playwright install chromiumpnpm add -D playwright && pnpm dlx playwright install chromiumyarn add -D playwright && yarn dlx playwright install chromiumbun add -D playwright && bunx playwright install chromium. See Export to PDF, PNG and PPTX for the other formats.

9. Let VS Code’s agents work on the deck

In VS Code 1.101 and later the extension offers the deck’s MCP server to Copilot’s agent mode and other agents, as Kadal Deck (my-talk): tools to outline, read, lint, render, edit and export the active deck. Open the chat in agent mode and ask, for example, “Add a slide after the intro with a poll asking how people commute, then render it and check it reads well.” See Build a deck with an AI agent for how the agent works.

If something doesn’t work

• Port 3030 is taken: set kadalDeck.port to a free port.
• The deck uses pnpm or Bun: the extension uses the deck’s own kadal-deck from node_modules; to run it another way, set kadalDeck.devCommand to pnpm kadal-deck ${args}.
• Nothing shows in the Slides view: run npm installpnpm installyarn installbun install in the deck’s folder, then press Refresh.

The VS Code extension reference has every command and setting.

Next

• Your first deck in 5 minutes.
• MDX slides: everything a slide can hold.
• Prettier plugin, for formatting in CI.