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/[email protected] 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.