mini-presenter
mini-presenter is a tiny local server that injects a display helper into your
This should allow you to present almost any website as a slideshow for as long
Features - Injected display script keeps the presenter view in sync.cloudflared for sharing previews.
Installation ``bashRun directly with npx (no install needed)
Or install globally npm install -g mini-presenter
`
Quick start
`
bash`
- Slides:
http://localhost:8080/
http://localhost:8080/_/presenter
When you pass a URL, mini-presenter proxies the remote site through the local server. File watching is only available for local folders.
Use
--watch
to enable file watching and auto-reload on HTML/CSS/JS changes.--funnel
to create an anonymous Cloudflare tunnel (requires cloudflared
).
Export slides (PDF/PNG) The exporter will start a dedicated Chrome instance with remote debugging automatically.
`
bash`
Basic requirements for slide decks Your presentation can be plain HTML/CSS/JS as long as it cooperates with navigation and state reporting:
- Served from a local folder or URL. mini-presenter serves the folder or proxies the URL you pass on the CLI and injects its script into any HTML file.Expose a current slide identifier. The injected script uses
window.miniPresenter.getCurrentSlide()
if available. Otherwise it falls back to location.hash
.React to navigation commands. The presenter sends next
, prev
, first
, last
, and goto
actions. Implement the mini-presenter API (below) _or_ listen for keyboard events (ArrowRight
, ArrowLeft
, Home
, End
) and update the slide state yourself.Update the URL hash. This is the easiest way to keep the presenter preview and notes aligned. When the current slide changes, update location.hash
(or implement getCurrentSlide()
).If you already have a deck that uses hash-based navigation (Reveal, custom HTML, etc.), it usually “just works.”
Mini-presenter deck API (optional) Add a global
window.miniPresenter
object to make the presenter smarter:
`
js // State + metadata
`
-
getSlideList()
enables the next-slide preview.getNotes(slideId)
provides speaker notes directly from the deck.
Presenter preview context ?_presenter_preview=1
.window.miniPresenter.isPresenterPreview = true
document.documentElement.dataset.presenterPreview = "true"
/ elements so previews stay silentUse this flag to disable autoplay audio or heavyweight effects in the presenter view.
Configuration ( presenter.json)Place an optional
presenter.json next to your index.html to customize the presenter experience.
`json`-
: Optional presenter title (defaults to the slideshow <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />- </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Custom key bindings for presenter navigation.<br />- </code>notes.source<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: </code>api<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>files<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, or </code>none<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (default: </code>api<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> + file fallback).<br />- </code>preview.relativeHash<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Enable </code>#<hash>~next<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> preview resolution.</p><p class="my-3">The config is available at </code>/_/api/config<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Speaker notes</h2></p><p class="my-3">Notes are shown in the presenter view and loaded in this order:</p><p class="my-3">1. Presentation API: define </code>window.miniPresenter.getNotes(slideId)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in your deck.<br />2. Notes files: add Markdown files under </code>notes/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> next to your </code>index.html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">File mapping rules:</p><p class="my-3">- </code>#1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>notes/1.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>#1.2<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>notes/1.2.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (falls back to </code>notes/1.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if missing)<br />- </code>#2-1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>notes/2-1.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (falls back to </code>notes/2.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if missing)<br />- </code>#/2/1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>notes/2--1.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (slashes become </code>--<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br />- </code>#intro<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>notes/intro.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Numeric hashes with </code>-<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>.<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, or </code>--<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> suffixes fall back to the base number if the<br />specific file is missing (for example </code>#2/1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> → </code>notes/2.md<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3">Notes are fetched from </code>/_/api/notes?hash=%23intro<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and rendered as pre-wrapped text.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Next slide preview</h2></p><p class="my-3">The presenter shows a next-slide preview when it can determine the slide order from<br /></code>window.miniPresenter.getSlideList()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in your deck (returns an array of hashes).</p><p class="my-3">If </code>preview.relativeHash<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is enabled, the preview iframe loads </code>#<hash>~next` and expects<br />slide logic in your deck to resolve it to the next state (including build steps).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">AI Use Disclaimer</h2></p><p class="my-3"><strong>Note:</strong> this library was 100% AI generated with Claude Code. I will try to fix<br />it up as good as possible as I ran into issues, but I cannot vouch for the<br />quality of it.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License and Links</h2></p><p class="my-3">- <a href="https://github.com/mitsuhiko/mini-presenter/issues" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Issue Tracker</a><br />- <a href="https://github.com/mitsuhiko/mini-presenter/discussions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Discussions</a><br />- License: <a href="https://github.com/mitsuhiko/mini-presenter/blob/main/LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Apache-2.0</a><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.16.0\"}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html> 