Build Reveal.js slide decks and SyncDeck-compatible presentations. Use when the user wants to create a presentation, convert PPT/PPTX content to web slides, add storyboard or iframe-sync behavior, or embed interactive activities inside a SyncDeck-hosted Reveal deck.
Create production-quality Reveal.js presentations that can run standalone or inside a SyncDeck iframe host.
Read this file first. Then load only the references you need:
references/AVAILABLE_ACTIVITIES.md to see which embedded activities are currently available and what each one is good forreferences/STYLE_PRESETS.md for visual directions and required base CSSreferences/EXTENSIONS.md for optional deck features such as YouTube slides and student-controlled stacksreferences/EMBEDDED_ACTIVITIES.md when the deck should launch or host embedded activitiesreferences/IFRAME_SYNC_PROTOCOL.md when wiring host-to-iframe messaging or debugging sync behaviorNOTICE.mdLICENSE.mdReveal renders slides on a fixed canvas, then scales that canvas to the viewport. Design for the canvas, not the live viewport.
Required implications:
px for font sizes, spacing, and layout tokens.clamp(), vw, or em for primary sizing tokens.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Title</title>
<link rel="stylesheet" href="{runtime-path}/syncdeck-reveal/dist/syncdeck-reveal.css">
<style>
/* Add custom theme CSS here. See references/STYLE_PRESETS.md */
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<div class="slide-inner">
<h1>Title</h1>
<p>Subtitle</p>
</div>
</section>
</div>
</div>
<div id="storyboard" class="storyboard" aria-hidden="true">
<div id="storyboard-track" class="storyboard-track"></div>
</div>
<script src="{runtime-path}/syncdeck-reveal/dist/syncdeck-reveal.js"></script>
<script>
initSyncDeckReveal({
deckId: 'my-deck-name',
iframeSyncOverrides: {
// Optional per-deck iframeSync overrides
},
revealOverrides: {
// Optional per-deck Reveal overrides
},
chalkboardOverrides: {
// Optional chalkboard overrides. Do not set storage.
},
standaloneHosting: {
// Standalone CTA that opens the deck in ActiveBits SyncDeck.
activeBitsOrigin: 'https://bits.example',
// Optional override. Defaults to /util/syncdeck/launch-presentation
// launchPath: '/util/syncdeck/launch-presentation',
// Optional override. Defaults to the current page URL.
// presentationUrl: 'https://slides.example/my-deck.html',
// Optional CTA label / timeout tuning.
// ctaLabel: 'Activate SyncDeck',
// ctaTimeoutMs: 9000,
},
storyboard: {
// Optional: storyboardId / trackId / toggleKey
},
// Optional: set false only when a deck intentionally owns image zoom UI.
imageLightbox: true,
afterInit: function (Reveal) {
// Optional deck-specific hooks
},
});
</script>
</body>
</html>
Replace {runtime-path} with a relative path from the deck's published URL to
the directory that hosts the SyncDeck runtime bundle. The correct value depends
on your deployment's directory structure — check the local repo's skill overrides
or deployment docs for the concrete path used in your environment.
The bundle provides Reveal, RevealNotes, RevealChalkboard, RevealIframeSync, initRevealStoryboard, initSyncDeckImageLightbox, and initSyncDeckReveal. Do not add CDN links for Reveal.js or its plugins when authoring SyncDeck decks.
The bundle also exposes buildSyncDeckLaunchUrl(...) and
launchPresentationInSyncDeck(...), but deck authors should usually enable the
behavior through initSyncDeckReveal({ standaloneHosting: ... }) so the
runtime can show the short-lived standalone CTA automatically.
.slide-inner, not on the slide <section> itself.The SyncDeck runtime includes a shared image lightbox for slide images that need a larger preview.
Use the img-zoomable class on any image that should open in the runtime lightbox:
<img class="img-zoomable" src="assets/class-diagram.png" alt="Class diagram for the sample app">
Decks do not need to include #img-modal markup, lightbox CSS, or openImgModal(...) / closeImgModal() scripts. The bundled runtime creates the modal, handles delegated clicks, closes on Escape or backdrop click, and keeps the legacy globals available for older inline handlers.
The lightbox is enabled automatically by initSyncDeckReveal(...). Disable it only when a deck intentionally provides its own image zoom UI:
initSyncDeckReveal({
deckId: 'my-deck-name',
imageLightbox: false,
});
Include storyboard markup:
<div id="storyboard" class="storyboard" aria-hidden="true">
<div id="storyboard-track" class="storyboard-track"></div>
</div>
Place it as a sibling of .reveal, not inside .slides.
Storyboard expectations:
When a parent host should control the deck, initialize with initSyncDeckReveal(...) and pass any sync-specific settings through iframeSyncOverrides:
<script src="{runtime-path}/syncdeck-reveal/dist/syncdeck-reveal.js"></script>
<script>
initSyncDeckReveal({
deckId: 'my-unique-deck-id',
iframeSyncOverrides: {
// IMPORTANT:
// - In development you may be tempted to use hostOrigin: '*' and allowedOrigins: ['*'].
// That disables origin validation and MUST NOT be used in production decks.
// - In production, always restrict to the exact host origin(s) that are allowed to
// control this deck via postMessage.
hostOrigin: 'https://your-host.example',
allowedOrigins: [
'https://your-host.example',
],
},
});
</script>
Non-negotiable checks:
deckId must be unique and must match what the host targetsinitSyncDeckReveal(...) rather than calling Reveal.initialize(...) directlyRole lifecycle:
standalone modesetRole to promote to instructor or studentrole config field to set the initial roleStandalone hosting launch:
standaloneHosting.activeBitsOrigin is providedhttp(s) presentation URL; if omitted, the runtime uses the current page URL without the hash/util/syncdeck/launch-presentationOverview routing:
overview: true/false inside synced setState traffic becomes reveal-storyboard-set DOM events rather than a native Reveal overview stateChalkboard persistence:
chalkboard.storageFor command details and message shapes, read references/IFRAME_SYNC_PROTOCOL.md.
px.If the deck should trigger activity launches or act as a host shell for interactive overlays, read references/EMBEDDED_ACTIVITIES.md before writing markup. The short version is:
A finished deck should be: