# slidev-addon-excalidraw

show excalidraw in [slidev](https://sli.dev/)

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

![example](./example-export/1.png)

```md
---
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

```bash
pnpm add slidev-addon-excalidraw
```

### Usage

-   Define this addon in `frontmatter`

```yaml
addons:
    - slidev-addon-excalidraw
```

-   or in `package.json`

```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](https://vitejs.dev/guide/build.html#public-base-path).

```vue
<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](https://vitejs.dev/guide/build.html#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](https://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:

```bash
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.