VS Code extension

Kadal Deck for VS Code puts the deck beside your text: a preview that follows the cursor, an outline you reorder by dragging, IntelliSense for every setting and component, kadal-deck check as problems, and formatting. For a walkthrough, see Use Kadal Deck in VS Code.

Install

Search for Kadal Deck in the Extensions view, or run:

code --install-extension kadal.kadal-deck

It is on the Visual Studio Marketplace and on Open VSX (for VSCodium, Cursor and other editors built on VS Code). It needs VS Code 1.90 or later; the MCP server for VS Code’s agents needs 1.101 or later.

The extension switches on in a workspace that contains a deck.mdx or a slides.mdx. It reads and edits decks with the engine code it carries, and builds, serves, checks and formats them with the deck’s own kadal-deck and packages, so it agrees with whichever engine version the deck uses. The deck needs its packages installed (npm installpnpm installyarn installbun install).

Views

The Kadal Deck icon in the activity bar opens two views.

Slides. The active deck’s outline. Slides are numbered as the deck numbers them and titled from their title or first heading; a vertical stack (----) nests under its column. Each row shows its layout, and whether it is hidden or comes from another file through src:. Click a slide to put the cursor on it. Drag a slide onto another to move it there (into that slide’s stack when it is in one): the whole slide moves with its frontmatter and notes, every other byte of the file is kept, and it is one undo step. The eye button on a row shows that slide in the preview. The title bar has Choose the active deck…, Refresh, and Check the deck under its menu.

Preview. The deck itself, from kadal-deck dev, showing the slide your cursor is in without reloading. Its title bar has the play button (start the dev server; stop while it runs), the lock (stop or resume following the cursor), the globe (the deck in the browser at the cursor’s slide), the screen (the presenter view) and, under its menu, Export to PDF.

The active deck is the deck file you are editing, or the deck that includes the file you are editing; else the one you chose; else the first found.

Commands

All are in the command palette under Kadal Deck:.

Command	What it does
Start the dev server	runs kadal-deck dev for the preview, or attaches to one already running on the port
Stop the dev server	stops a server the extension started (one it attached to is left running)
Open the deck in the browser	at the cursor’s slide
Open the presenter view	at the cursor’s slide
Export to PDF	runs kadal-deck export in a terminal; the PDF lands in the deck’s export/
Check the deck	kadal-deck check with every slide compiled, into the Problems panel
Format the deck	formats the active deck file
New deck…	asks for a folder and a name, then 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
Choose the active deck…	when the workspace has several decks
Refresh	reads the decks again
Preview: follow the cursor	the preview shows the cursor’s slide (the default)
Preview: stop following the cursor	the preview stays where it is

Two more commands, Go to the slide in the editor and Show in the preview, run from the Slides view’s rows and are not in the palette.

Settings

Setting	Default	What it does
kadalDeck.port	3030	the port kadal-deck dev serves the deck on for the preview
kadalDeck.devCommand	empty	the command that starts the dev server, run in the deck’s folder: ${args} becomes dev --port <port> --strictPort and ${port} the port. Empty: the deck’s own kadal-deck from its node_modules, else npx -p @kadal/deck kadal-deckpnpm dlx -p @kadal/deck kadal-deckyarn dlx -p @kadal/deck kadal-deckbunx -p @kadal/deck kadal-deck
kadalDeck.preview.followCursor	true	the preview shows the slide the cursor is in
kadalDeck.check.onSave	true	run kadal-deck check when a deck file is saved, without compiling every slide, and show what it finds as problems
kadalDeck.annotations	true	show each slide’s number and title at the end of its separator line
kadalDeck.include	["**/deck.mdx", "**/slides.mdx"]	glob patterns of deck files to look for in the workspace

Language support

deck.mdx and slides.mdx open as the Kadal Deck language. To use it for another file, pick Kadal Deck from the language picker in the status bar, and add the file’s pattern to kadalDeck.include so the outline and preview find it.

• Highlighting. Separators (---, ----), the headmatter and each slide’s frontmatter (as YAML), <Notes> and HTML-comment notes with their [click] markers, ::right:: slot markers, ::code-group blocks and <<< @/snippet imports; the rest is Markdown.
• Folding. Each slide folds.
• Annotations. Each slide’s number and title at the end of its separator line.
• IntelliSense. In the headmatter, every deck setting and slide setting; in a slide’s frontmatter, every slide setting, each with its documentation, type and default. After layout: , transition: , theme: , background: and any setting with known values, those values. After < in a slide, every component, with its required props as a snippet. Hover a setting or a component for its documentation. It all comes from the engine’s catalog, the same data as kadal-deck info.
• Problems. On save, kadal-deck check: unknown layouts and settings, missing assets, broken includes, glossary mistakes. Check the deck also compiles every slide.
• Formatting. Format Document uses the deck’s own Prettier plugin, which comes with @kadal/deck. Your .prettierrc applies.

AI agents

In VS Code 1.101 and later the extension offers the deck’s kadal-deck mcp server to VS Code’s agents (Copilot’s agent mode and any other that uses VS Code’s MCP servers), named after the deck’s folder: Kadal Deck (my-talk). It follows the active deck and needs no .vscode/mcp.json. See AI agents and MCP for its tools.

Remote windows

In a remote window (SSH, a dev container, Codespaces) the dev server runs on the remote machine and the preview reaches it through VS Code’s port forwarding, so nothing extra is needed. Open the deck in the browser opens the forwarded address too.

Troubleshooting

The preview stays empty or says the port is in use. The preview always uses kadalDeck.port (3030), with --strictPort. If another program has that port, set kadalDeck.port to a free one. If kadal-deck dev is already running on that port in a terminal, the extension attaches to it instead of starting a second one. A dev server on another port isn’t seen; start it with npx kadal-deck dev --port 3030pnpm exec kadal-deck dev --port 3030yarn kadal-deck dev --port 3030bunx kadal-deck dev --port 3030, or change the setting.

The deck uses pnpm, Yarn or Bun. The extension runs the deck’s own kadal-deck from node_modules when it is there, which works with every package manager. To run it another way, set kadalDeck.devCommand, for example:

{ "kadalDeck.devCommand": "pnpm kadal-deck ${args}" }

or bunx kadal-deck ${args}.

Nothing in the Slides view. The workspace has no file matching kadalDeck.include, or the deck’s packages aren’t installed. Run npm installpnpm installyarn installbun install in the deck’s folder, then Refresh.

Problems don’t update. kadal-deck check runs on save, not as you type. Save the file, or run Check the deck for the full check. The extension’s output is in the Kadal Deck channel of the Output panel.

Formatting does nothing. The deck needs @kadal/deck installed (it brings Prettier and the plugin). Check that Kadal Deck is the file’s language in the status bar.

The extension is AGPL-3.0-or-later, like the engine; source.