slidev-addon-excalidraw

show excalidraw in slidev

The addon renders .excalidraw files to SVG with Excalidraw's modern export pipeline, including newer font families such as Excalifont.

---
layout: center
---
<div class="flex flex-col items-center">

# slidev-addon-excalidraw

<Excalidraw
  drawFilePath="./example.excalidraw"
  class="w-[600px]"
  :darkMode="false"
  :background="false"
/>

</div>

Installation

pnpm add slidev-addon-excalidraw

Usage

• Define this addon in frontmatter

addons:
    - slidev-addon-excalidraw

• or in package.json

 "slidev": {
    "addons": [
      "slidev-addon-excalidraw"
    ]
  },

Components

Excalidraw

Note

excalidraw file must be in public, and drawFilePath must be relative to your Public Base Path.

<Excalidraw
  drawFilePath="./example.excalidraw"
  class="w-[600px]"
  :darkMode="false"
  :background="false"
/>

Options

Name	Type	Default	Description
drawFilePath	string	undefined	The path to the excalidraw file. It must be relative to your Public Base Path.
darkMode	boolean	false	Whether to use dark mode.
background	boolean	false	Whether to show the background.

Notes

• The component loads exportToSvg from @excalidraw/excalidraw@0.18.0 via esm.sh.
• If you need to self-host Excalidraw font assets, set window.EXCALIDRAW_ASSET_PATH before mounting Slidev so Excalidraw can resolve the font files during SVG export.

Release

Manual release flow for maintainers:

git checkout main
git pull origin main
npm version patch # or minor / major
npm publish
git push origin main --follow-tags

npm version updates the package version and creates a git tag.