Reveal.js uses a hub-and-spoke controller architecture where a central Reveal instance orchestrates ~20 specialized controllers. Each controller receives a reference to the Reveal instance during instantiation, enabling bidirectional communication through the shared object.
The Reveal instance is created as a closure by the default export function in js/reveal.js41-126 It maintains private state (configuration, DOM references, slide indices) and exposes a public API. All controllers are instantiated with a reference to this Reveal instance.
Sources: js/reveal.js1-32 js/reveal.js41-50 js/reveal.js108-126
The initialization process consists of two phases: the constructor phase and the initialize() phase.
Sources: js/reveal.js41-50 js/reveal.js108-126 js/reveal.js131-169 js/reveal.js195-250
All 19 controllers are instantiated in js/reveal.js108-126 during the construction phase, before initialize() is called. Each receives the Reveal instance as its sole constructor argument.
Controllers store the reference (this.Reveal = Reveal) and use it to access the public API, configuration, and DOM references throughout their lifecycle.
Sources: js/reveal.js108-126
Configuration is merged in js/reveal.js152 with the following precedence (lowest to highest):
defaultConfig (from js/config.js)config (from prior configure() calls)options (constructor argument)initOptions (argument to initialize())Util.getQueryHash())Sources: js/reveal.js152
The Reveal instance is created as a plain object (const Reveal = {}) in js/reveal.js50 It serves as:
Reveal.initialize = initialize)Sources: js/reveal.js41-50 js/reveal.js52-126
Controllers communicate with the Reveal instance through:
this.Reveal.slide(), this.Reveal.getConfig(), etc.this.Reveal.getIndices(), this.Reveal.getCurrentSlide(), etc.this.Reveal.on('slidechanged', handler)The Reveal instance communicates with controllers by:
controller.configure(config, oldConfig), controller.update(), etc.controller.bind(), controller.unbind(), controller.destroy()Sources: js/reveal.js1262-1350 js/controllers/keyboard.js1-400 js/controllers/fragments.js1-600 js/controllers/location.js1-300
| Controller | File | Primary Responsibilities |
|---|---|---|
SlideContent | js/controllers/slidecontent.js | Lazy loading images/videos/iframes, media playback control, load(), unload() |
Backgrounds | js/controllers/backgrounds.js | Background rendering, parallax effects, contrast detection, create(), sync(), update() |
Fragments | js/controllers/fragments.js | Fragment stepping, ordering, animation lifecycle, next(), prev(), goto(), sort() |
AutoAnimate | js/controllers/autoanimate.js | FLIP animations between slides, element matching, run(), reset() |
SlideNumber | js/controllers/slidenumber.js | Slide number display and formatting, update(), getSlideNumber() |
JumpToSlide | js/controllers/jumptoslide.js | Direct slide navigation UI, input parsing, show(), hide(), jump() |
Keyboard | js/controllers/keyboard.js | Keyboard event handling, custom bindings, bind(), unbind(), onDocumentKeyDown() |
Touch | js/controllers/touch.js | Touch gesture handling, swipe detection, bind(), unbind() |
Controls | js/controllers/controls.js | Navigation arrow rendering and interaction, render(), bind(), update() |
Pointer | js/controllers/pointer.js | Pointer/laser mode, configure(), bind() |
Location | js/controllers/location.js | URL hash management, history API, bind(), readURL(), writeURL() |
Progress | js/controllers/progress.js | Progress bar rendering and updates, render(), update() |
Overview | js/controllers/overview.js | Overview mode (grid view), activate(), deactivate(), isActive() |
ScrollView | js/controllers/scrollview.js | Scroll view mode, DOM restructuring, activate(), deactivate() |
PrintView | js/controllers/printview.js | Print/PDF layout, activate(), isActive() |
Plugins | js/controllers/plugins.js | Plugin loading and lifecycle, load(), registerPlugin(), initPlugins() |
Notes | js/controllers/notes.js | Speaker notes window, postMessage communication, render(), open() |
Overlay | js/controllers/overlay.js | Help dialog, media preview overlays, show(), hide() |
Focus | js/controllers/focus.js | Focus management and restoration, configure(), bind() |
Sources: js/reveal.js1-32 js/reveal.js108-126
The dom object (private variable in closure scope) caches references to key DOM elements. These are initialized in initialize() js/reveal.js140-143 and setupDOM() js/reveal.js324-349
| Property | Selector/Description | Initialized In |
|---|---|---|
dom.wrapper | revealElement (constructor arg) | initialize() line 140 |
dom.slides | .slides (child of wrapper) | initialize() line 141 |
dom.viewport | .reveal-viewport or document.body | setViewport() lines 175-188 |
dom.pauseOverlay | .pause-overlay (created) | setupDOM() line 344 |
dom.statusElement | .aria-status (created) | setupDOM() line 346 |
Controllers call this.Reveal.getRevealElement() to access dom.wrapper and query for child elements.
Sources: js/reveal.js140-143 js/reveal.js175-188 js/reveal.js324-349 js/utils/constants.js1-5
Events are dispatched using dispatchEvent() js/reveal.js746-761 which creates a DOM HTMLEvents event on revealElement. External listeners register via Reveal.on(type, listener) js/reveal.js704-708 which delegates to revealElement.addEventListener().
| Event Type | Dispatched By | Data Properties | Source |
|---|---|---|---|
ready | start() | indexh, indexv, currentSlide | js/reveal.js240-247 |
slidechanged | dispatchSlideChanged() | indexh, indexv, previousSlide, currentSlide, origin | js/reveal.js768-780 |
beforeslidechange | slide() | indexh, indexv, origin | js/reveal.js1265-1272 |
resize | layout() | oldScale, scale, size | js/reveal.js891-899 |
fragmentshown | fragments.next() | fragment, fragments | Fragment controller |
fragmenthidden | fragments.prev() | fragment, fragments | Fragment controller |
paused | pause() | none | js/reveal.js1151-1163 |
resumed | resume() | none | js/reveal.js1169-1179 |
autoanimate | autoAnimate.run() | fromSlide, toSlide, sheet | AutoAnimate controller |
Sources: js/reveal.js704-708 js/reveal.js746-761 js/reveal.js768-780 js/reveal.js240-247 js/reveal.js1265-1272
Private state variables in the closure scope track the presentation state:
| Variable | Type | Description | Updated By |
|---|---|---|---|
config | object | Configuration object | initialize(), configure() |
initialized | boolean | Whether initialize() was called | initialize() |
ready | boolean | Whether presentation is ready | start() |
indexh | number | Current horizontal slide index | slide(), updateSlides() |
indexv | number | Current vertical slide index | slide(), updateSlides() |
previousSlide | HTMLElement | Previous slide element | slide() |
currentSlide | HTMLElement | Current slide element | updateSlides() |
navigationHistory | object | {hasNavigatedHorizontally, hasNavigatedVertically} | slide() |
state | array | CSS classes from data-state attributes | setState() |
scale | number | Current presentation scale | layout() |
dom | object | Cached DOM references | initialize(), setupDOM() |
Sources: js/reveal.js52-104
The slide(h, v, f, origin) function js/reveal.js1262-1350 is the primary navigation method:
beforeslidechange event (cancellable)previousSlide = currentSlideHORIZONTAL_SLIDES_SELECTOR and VERTICAL_SLIDES_SELECTORupdateSlides() to update indexh, indexv, and currentSlidesync() to update all controllersdispatchSlideChanged(origin) to notify listenersSources: js/reveal.js1262-1350 js/reveal.js1538-1623 js/reveal.js1847-2020 js/utils/constants.js2-3
Controllers implement standard lifecycle methods called by the Reveal instance:
| Method | Called By | Purpose | Typical Implementation |
|---|---|---|---|
constructor(Reveal) | Export function | Store this.Reveal = Reveal reference | All controllers |
render() | setupDOM() | Create DOM elements | Controls, Progress, SlideNumber |
configure(config, oldConfig) | configure(), start() | Update settings | Most controllers |
bind() | addEventListeners() | Attach event listeners | Keyboard, Touch, Controls |
unbind() | removeEventListeners() | Detach event listeners | Keyboard, Touch, Controls |
update() | sync() | Update display state | Controls, Progress, SlideNumber, Backgrounds |
destroy() | destroy() | Clean up resources | Most controllers |
Controllers access configuration via this.Reveal.getConfig() and DOM references via this.Reveal.getRevealElement().
Sources: js/reveal.js324-349 js/reveal.js508-583 js/reveal.js589-610 js/reveal.js638-698 js/reveal.js1847-2020
The plugin system allows extending reveal.js functionality:
Sources: js/reveal.js165
The core architecture of reveal.js is built around:
This modular design allows reveal.js to be flexible and extensible while maintaining a clean separation of concerns. Each controller focuses on its specific responsibility, and the core coordinates their activities to deliver a cohesive presentation experience.
Refresh this wiki