reveal.js

reveal.js is an open-source HTML presentation framework that lets anyone build a full slide deck out of plain HTML, CSS, and Markdown instead of a proprietary binary format. Presentations run entirely in the browser as nested <section> elements transformed and scaled with CSS, so every slide stays inspectable, scriptable, and stylable with ordinary web tooling and can be hosted as a static site with no build step required for basic use.

The project ships as a lean, dependency-free core (zero runtime npm dependencies) plus six official plugins — highlight, markdown, math, notes, search, and zoom — each published as its own ESM/CJS/TypeScript entry point. A modular controller architecture (separate classes for fragments, backgrounds, auto-animate, keyboard input, touch, printing, and more) keeps the large feature surface organized, while a plugin-loading system supports both synchronous and conditionally-async script dependencies for extending the deck at runtime.

What You Get

• A dependency-free (zero runtime npm deps) HTML/CSS/JS presentation engine that can be dropped into any static site with no build step required for basic use
• Six official plugins (highlight, markdown, math, notes, search, zoom) each shipped as separate ESM/CJS/TypeScript entry points via package.json’s exports map
• A documented JS API (Reveal.initialize, on/off, configure, registerPlugin) plus a legacy singleton shim for backwards compatibility with pre-4.0 integrations
• Built-in Auto-Animate, fragment, and background-transition systems for slide-to-slide motion without pulling in an external animation library
• A print view that renders a PDF-export-ready layout directly from the same source as the live deck

Common Use Cases

• Conference and meetup talk slides authored directly in HTML or Markdown
• Internal engineering knowledge-sharing decks checked into git alongside code
• Interactive product demos or onboarding walkthroughs embedded directly in a web page
• Printable/exportable PDF handouts generated from the same source as the live presentation

Under The Hood

Architecture reveal.js follows a modular controller pattern rooted in js/reveal.js (nearly 3,000 lines), which acts as the composition root that instantiates roughly a dozen controller classes — SlideContent, SlideNumber, JumpToSlide, AutoAnimate, Backgrounds, ScrollView, PrintView, Fragments, Overview, Keyboard, Location, Controls, Progress, Pointer, Plugins, Overlay, Touch, Focus, Notes, Playback — each constructed with a direct reference to the shared Reveal instance, which lets multiple independent presentations run on one page. The public API is exposed through js/index.ts, a thin shell that wraps the ES module export in a backwards-compatible singleton shim, queuing pre-init calls like configure, on, off, and registerPlugin until Reveal.initialize actually runs. Plugins are loaded and registered through js/controllers/plugins.js, which drives an idle-to-loading-to-loaded state machine and supports both synchronous and conditionally-async script dependencies via js/utils/loader.ts. Every controller reads and mutates state on the same shared Reveal object rather than through injected interfaces, so changing the core object’s shape would ripple through every controller and every bundled or third-party plugin alike.

Tech Stack The package ships as a native ES module (“type”: “module”) with zero runtime dependencies — everything else lives under devDependencies: TypeScript for type declarations, Vite for the dev server and builds, esbuild for a legacy ES5 fallback build, Sass for the SCSS themes and reset styles, jszip for producing distributable zips, and highlight.js/marked/marked-smartypants bundled directly into the highlight and markdown plugins. Separate vite.config.ts files build the core, the styles, and each of the six official plugins as independent entry points, each declaring its own ESM/CJS/types trio in package.json’s exports map. Most runtime logic remains plain JavaScript, with TypeScript used mainly for configuration typing and public type declarations — a partial rather than complete migration. A sibling react/ directory holds a separate @revealjs/react package with its own build and test config, wrapping the framework-agnostic core for React consumers without requiring any framework for the base package.

Code Quality Testing runs through QUnit via scripts/test.js, which spins up a Vite dev server and drives each test/*.html file (covering auto-animate, destroy, multiple-instances, scroll, and state behavior, among others) through headless Chromium via node-qunit-puppeteer — real browser integration tests rather than mocked unit tests, which suits a DOM-manipulation-heavy library. Error handling favors defensive, silent patterns (loader.ts’s loadScript reports failures through an onerror callback rather than throwing) with only a few explicit thrown errors, such as index.ts’s check for a missing .reveal root element. Naming is consistent (PascalCase controller classes, camelCase methods), and CI is present (a GitHub Actions workflow runs the QUnit suite, a separate one runs a prose spellcheck), though there’s no visible root-level ESLint/Prettier config enforcing style automatically.

What Makes It Unique reveal.js’s core technical bet is representing an entire presentation as ordinary nested HTML transformed and scaled with CSS rather than rendering to canvas or WebGL, so every slide stays inspectable and stylable with plain CSS and scriptable with plain DOM APIs. Its Auto-Animate feature automatically interpolates matching elements between two consecutive slides using tag-and-content matching heuristics, producing Keynote-style Magic-Move transitions without the author declaring any keyframes. The plugin loader’s conditionally-async dependency loading lets a plugin decide at runtime whether its polyfill or dependency even needs to load. None of these techniques is individually novel, but the combination — zero required build step, plain HTML/Markdown authoring, automatic diff-based transitions, and a pluggable architecture — is distinctive compared to both native presentation software and other JS slide libraries.