Familiar presentation and annotation experience
Make your slides in HTML because AI is good at it
Runs everywhere · Open source · Free
Frank Huettner
Press A and scribble across this slide
A reveal.js deck is just HTML.
A polished deck is now a prompt away — and it stays entirely yours. That's a genuinely nice place to be.
A presenter toolbar that hides until you reach for it.
Pen, highlighter, text, boards, navigation, and export — laid out the way you'd expect, then out of the way so the slide gets the whole screen. Drawing on a reveal deck isn't new; making it feel this obvious is the point. One file, no separate CSS to include.
Press A, or the pen button , and write right here.
Try it now — scrawl a note, circle a word, underline this line.
Keys on this slide
Colours and three pen widths in the bar · E eraser (per stroke, not clear-all) · Ctrl+Z undo · Ctrl+Shift+Z redo · X clear this slide · Esc exit.
Ink lands exactly under the cursor at any window size or zoom — and it survives reloads, and even editing the deck later.
Press H for the highlighter .
Swipe it across this whole sentence and watch it glow.
A broad, translucent marker that lays down under your pen ink — so your circles and arrows still read on top. It shares the pen's colour palette; pick the amber swatch for the classic look.
White slide or dark board · on screen or through a projector.
Drag the slider to raise the room light and watch the projector column wash out. Each hue ships in two shades — a calmer one and a more luminous one; you might reach for the calmer shades on white and the luminous ones on a board, but several read nicely on white too — so judge by eye. Swatches and slider are live, interactive HTML right in the slide — dragging adjusts the room light without advancing to the next slide (reveal.js normally reads a drag as a swipe; taps on a control don't, like the aspect-ratio buttons a few slides on).
Press T , click, and type.
Drop a label on this slide — your name, a date, a caption.
That's the whole interaction: click, type, done. Because it stays real text, on export it simply merges into the slide's HTML — selectable in the PDF, editable anywhere, never a flattened image. Drag to move, click to re-edit.
The board button drops a blank board into the deck — without leaving your talk.
Whiteboard or blackboard (the pen colour swaps to stay visible), in the deck's own slide format. It's a real slide.
Draw a circle, then switch the deck format:
The circle stays a circle — strokes remember their aspect ratio and are aspect-fit, not stretched. Ink is stored relative to the slide box, not as pixels, which is why it survives resize, reload, and deck edits. (The buttons also show that taps on interactive elements never trigger slide navigation.)
Portable copy
One self-contained HTML file with your ink baked in as SVG and your text as real HTML. Opens anywhere, even without the plugin — and re-absorbs into the editable model wherever the plugin loads.
Clean copy
The shareable deck, annotations stripped.
PDF export
One click; ink as crisp vector overlays, text as selectable HTML, boards as real pages. Or export clean.
All from the download / print button in the toolbar. Live ink lives in localStorage per deck; nothing leaves your machine unless you export it.
When you print, two spaces sit between the paper's edge and your text:
1 From paper border to slide is the frame
Off by default — the plugin leaves it at zero, so your slide fills the whole sheet. Add one with the plugin's printMargin setting.
2 From slide border to text is the padding
The same gap you see on screen, kept in the PDF — so your printout looks like your slides.
printMargin — that's the frame above — or, at print time,
lower Scale below 100% in the browser's print dialog: the slide
shrinks on the page and the freed space becomes your margin.
The dialog's own Margins control can't help — reveal fixes each
page to your slide's exact size,
so there's no spare paper for it to trim.Some build web decks by hand — slides.com (from reveal's own author), parallax-presentations, icp-editor. And the classics — PowerPoint, Keynote, Google Slides — aren't going anywhere. Point-and-drag is a genuinely nice way to work.
Both ways have their place.
Reach for a visual editor when you want to arrange slides by hand; reach for code when you'd rather let a model build it. Either way, you can draw on your slides live — here, from one small toolbar that stays out of the way.
Write mathematics the way you already write it:
\[ e^{i\pi} + 1 = 0 \qquad \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} \]
\[ \nabla \times \mathbf{B} = \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \qquad \binom{n}{k} = \frac{n!}{k!\,(n-k)!} \]
LaTeX renders through the math plugin (KaTeX or MathJax) — inline like \( a^2 + b^2 = c^2 \) or displayed. It's typeset, selectable, and sharp at any zoom. And yes — you can draw straight on a formula.
Everything reveal does, untouched.
Set data-fragment-index to reveal in any order;
fade-in-then-out makes a fragment vanish again. Each step is one arrow
press and gets its own PDF page.
Keynote's morph, in a plain HTML deck. Watch this token — press → and keep your eye on it.
data-id="thing"
data-id="thing"
That glide was auto-animate: give two elements the same
data-id on consecutive slides and reveal animates the difference — position, size,
everything. It's core reveal, not this plugin, and there's no build step. This
deck just did it to that token — and it drives the code build on the last two slides too.
Tuck optional detail below a slide, instead of after it.
Press ↓ to drop into the stack — the toolbar's up/down arrows appear only when a slide has somewhere vertical to go.
Nested slides let you tuck away optional detail. Honestly, they can also confuse an audience about where they are in the talk.
If that trips you up, just don't use them.
Plenty of great decks are a single straight line of slides — mine usually are. But if you do nest, every leaf keeps its own ink. Press ↑ to go back up.
Everything this demo is built with — plus the visual editors worth knowing if you'd rather place slides by hand.
This is the whole install — it adds the toolbar, ink, boards, and export.
Reveal.initialize({
plugins: [ RevealAutohideToolbar ],
});
The plugin adds tools, never a style. This deck's design is plain CSS:
Reveal.initialize({
width: 960, height: 540, // the PowerPoint 16:9 box
margin: 0, center: false, // edge-to-edge, top-aligned
transition: 'fade', // dissolve, not slide
plugins: [ RevealAutohideToolbar ],
});
github.com/frankhuettner/reveal.js-autohide-toolbar
· MIT · plugin, config, theme, even the cover image — all inlined in one HTML file (shared libraries load from a CDN).
This deck is the plugin's own test subject — it runs in CI on Chromium & WebKit × reveal 5 & 6.