Slidev addon to show and edit tldraw diagrams
npm install slidev-addon-tldrawEdit your tldraw diagrams directly in
Slidev
Use your favorite package manager to install the addon in your existing Slidev presentation, for instance using pnpm:
``bash`
pnpm add slidev-addon-tldraw
Then define this addon in the frontmatter of the slidedeck:
`yaml`
---
addons:
- slidev-addon-tldraw
---
or in the slidev field of the package.json:
`json`
"slidev": {
"addons": [
"slidev-addon-tldraw"
]
},
NOTE: you need to specify the full addon name since Slidev 52.x, not just tldraw.
Add a new slide with the following content:
`md
---New tldraw diagram
---
`
Make sure the diagram has a fixed width and height. Check the
Slidev UnoCSS docs on which classes are
available.
Now, start the slideshow in development mode. Navigate to the slide, add new
shapes etc. The diagram content will be saved under the public folder and a
reference is created automatically in the existing slide.
Create a public folder, store the tldraw diagram in it and reference it in the
slide:
`md
---Existing tldraw diagram
---
`
Note that the visible area is fixed to 800x800 for now.
If you want to cover the entire slide with a tldraw diagram, use the following
style:
`md
---Diagram covering entire slide
---
`
- tldraw diagrams can be edited directly in Slidev and are automatically saved.
- Uploading assets is fully supported, either via drag and drop or using the
'upload media' menu item. Assets are stored in the public/tldraw/assets
folder after uploading.
- Dark mode is automatically adjusted to the Slidev theme
- Exporting a Slidev presentation will include the tldraw diagrams
- Snap, tool lock and grid mode can be enabled via the menu or by keyboard
shortcuts
- Inserting embeds is enabled
Other tldraw` options, such as multi-page diagrams are disabled (for now). The
addon makes a tradeoff between features and simplicity.
This addon is licensed MIT. Note that tldraw has a custom license, see their
license page for more
information.