tldreveal
A drawing tool for Reveal.js based on tldraw
Try it!
Press D or double click to enter drawing mode.
Drawing mode starts with the pencil by default. You can pick a different tool from the toolbar.
Use the style menu right of the toolbar to choose colour, line thickness etc.
Existing annotations can be erased or changed. Use the Select tool to pick a shape and try changing its color.
To hide the drawing UI and return to normal interaction with the slides, press Escape or use the ⨯ button in the action bar.
Installation
From npm
npm install tldreveal react react-dom
// Import the Tldreveal plugin
import { Tldreveal } from "tldreveal"
// Import the tldreveal CSS (if you use a bundler that can import CSS)
import "tldreveal/dist/esm/index.css"
// Initialize Reveal.js with the Tldreveal plugin
Reveal.initialize({
// tldreveal does not support scroll view
scrollActivationWidth: undefined,
plugins: [ Tldreveal ]
})
Features
Saves drawing state across refreshes
Requires setting the id or data-tlid attribute on the reveal container to a unique identifier of your deck.
Maintain drawing state when reordering slides
Uses the id or data-tlid attribute to identify each slide.
Share drawing state over multiple slides
Slides with the same data-tlid attribute share the same drawings.
Such as this one.
Automatic dark mode switch based on background color
Save drawings to a file on disk
Use the menu in the top-left corner when in drawing mode.
Load saved drawings from a url
This presentation uses it!
Quickly clear drawings
Use the top-left menu to clear the current slide or the entire deck.
Limitations
It's not perfect.
Scroll view is not supported
Scroll view changes a lot about the structure behind the scenes and is thus incompatible with tldreveal.
Maximum 40 slides with drawings
Your presentation may be longer, but you can draw only on 40 of your slides. This is a limitation from tldraw.