hakimel/reveal.js
57.7
Adequate · 10 October 2026
12.8k
lines of production code
JavaScript
with TypeScript
4
measurements over time
What this system is
This system is Reveal.js, a framework for building and rendering interactive presentations using HTML, CSS, and JavaScript. It provides a modular engine that handles slide navigation, layout, and animations, supported by plugins for syntax highlighting, mathematical typesetting, and speaker notes. The project also includes an official React wrapper for declarative presentation construction and comprehensive tooling for building, testing, and distributing presentation assets.
How it got here
2011–2013 — Modernization and modular architecture
8 changes.
The project underwent a comprehensive modernization, migrating the build system to Vite with TypeScript support and restructuring the core JavaScript into modular components. Simultaneously, the CSS architecture was overhauled to use modular SCSS files and CSS custom properties, enabling easier theme customization and improved layout utilities.
2020 — Vite migration and modular architecture
11 changes.
This period focused on migrating the build system from Gulp to Vite and refactoring the core engine into a modular controller architecture. Significant updates included rewriting plugins in TypeScript, introducing a new math rendering plugin, and enhancing print, search, and security features.
2025–2026 — React wrapper and TypeScript migration
9 changes.
This period focused on introducing an official React wrapper for declarative presentation building and migrating core utility modules to TypeScript. The work also included stabilizing the build system, improving legacy support through ES5 bundling, and enhancing type safety for plugin configurations.
Features
Added Monokai and Zenburn syntax highlighting themes
Users can now choose between Monokai and Zenburn color schemes for code syntax highlighting in presentations. This change introduces the CSS definitions for these two popular dark themes, allowing for better visual distinction of code blocks depending on user preference or presentation context.
public · high confidence
Highlight plugin gains code line numbers and highlights support
The highlight plugin now supports code line numbers and line highlights, allowing users to display line numbers and highlight specific lines in code blocks. This is achieved by integrating highlight.js v17 (upgraded from v4) and adding new configuration options for line numbers and highlights.
dist/plugin · high confidence
Introduce official @revealjs/react wrapper components
This release adds the official React wrapper for reveal.js, providing a set of components to build presentations declaratively. The new \Deck\ component manages the Reveal instance lifecycle, including initialization, configuration, and cleanup, while exposing event hooks like \onReady\ and \onSync\. \Slide\ and \Stack\ components allow for structured slide content, with \Slide\ mapping shorthand props (e.g., \background\, \autoAnimate\) to Reveal data attributes and syncing changes via \syncSlide\. The \Markdown\ component parses markdown strings or files into slide sections, supporting custom separators, speaker notes, and Reveal highlight plugin integration. \Fragment\ enables element-level animations with an \asChild\ prop for seamless integration into existing DOM structures, and \Code\ provides syntax-highlighted code blocks with line number support. The library also exports a \useReveal\ hook for accessing the Reveal API context.
react/src · high confidence
New React demo application for @revealjs/react
A new demo application has been added to the react/demo directory to showcase the @revealjs/react wrapper. This includes a Vite-based setup (index.html, main.tsx, vite.config.ts, tsconfig.json) and a comprehensive demo component (demo-app.tsx) that demonstrates key features such as vertical stacks, dynamic slide addition via React state, fragment animations, custom navigation controls using the useReveal hook, and external markdown support. The demo also integrates reveal.js plugins for syntax highlighting and speaker notes.
react/demo · high confidence
New and updated example presentations
The examples directory has been refreshed with new demo decks and updated assets. New examples include a barebones setup, a 500-slide performance test, and dedicated demos for layout helpers (r-fit-text, r-stretch, r-stack, r-hstack, r-vstack), scroll view mode, and lightbox preview overlays. Existing examples have been updated to demonstrate new features like auto-animate unmatched element fading, MathJax 4 support, and multiple embedded presentations with focus management. Asset sources have also been updated, replacing placekitten.com with placecats.com.
examples · high confidence
New build, packaging, and testing scripts for legacy support and CI stability
The project now includes dedicated scripts to support legacy environments and improve development workflows. A new \build-es5.js\ script allows users to manually generate a minified ES5 UMD bundle of reveal.js, ensuring compatibility with older browsers, while \add-banner.js\ ensures all output files include the correct MIT license header. The \zip.js\ utility has been relocated and updated to package presentations into standalone ZIP files that replace dynamic module imports with static script tags, enabling offline usage via the file:// protocol. Additionally, the test runner (\test.js\) has been refactored to use Vite for serving test pages, with specific logic added to prevent reporter crashes on timeout failures and ensure accurate test reporting.
scripts · high confidence
New math rendering plugin supporting KaTeX and MathJax 2/3/4
The plugin/math directory now contains a new plugin that enables rendering of mathematical equations in reveal.js slides. It provides four distinct typesetters: KaTeX, MathJax 2, MathJax 3, and MathJax 4. By default, the plugin uses MathJax 2, but users can configure their deck to use any of the other engines via specific configuration options (katex, mathjax2, mathjax3, mathjax4). The plugin automatically loads the necessary CSS and JavaScript libraries from CDNs and handles typesetting on slide changes. It also includes logic to skip parsing math within code blocks and other specified HTML tags to prevent interference with code display.
plugin/math · high confidence
Architecture
Build system migrated to Vite with TypeScript support
The project has switched from its previous build tooling to Vite, introducing a modern development workflow with TypeScript compilation (targeting ES2020) and native ES module support. This change brings a new configuration structure (tsconfig.json, vite.config.ts) and updates the build process for both JavaScript bundles and CSS themes, while also adding code formatting via Prettier and spell-checking via Codespell to the development environment.
(repo-wide) · high confidence
Markdown plugin refactored with TypeScript types and Vite build
The markdown plugin has been restructured to use a TypeScript entry point (index.ts) that exports specific configuration interfaces (MarkdownConfig, MarkdownSlidifyOptions, MarkdownOptions) and a RevealPlugin definition, while the runtime logic remains in the existing JavaScript implementation (plugin.js). A new Vite build configuration (vite.config.ts) has been added to bundle the plugin into ES and UMD formats with proper type declarations. This change improves type safety and build consistency for the markdown plugin without altering its core parsing behavior, which continues to handle slide separators, notes, and code highlighting as before.
plugin/markdown · high confidence
New playback component and modularized core architecture
The JavaScript core has been restructured into modular controllers (e.g., slide content, fragments, overview) and a new dedicated playback component that renders a canvas-based auto-slide progress indicator. This change introduces TypeScript type definitions for configuration and API usage, while removing the legacy \slideshow.js\ file to consolidate navigation logic into the new modular system.
js · high confidence
Reveal.js 4.0 introduces a modular controller architecture
The presentation engine has been refactored from a monolithic structure into a modular system of dedicated controllers, significantly improving code organization and maintainability. Core capabilities such as auto-animate transitions, slide background management, navigation controls, fragment handling, keyboard input, URL location tracking, speaker notes, overlay previews, and overview mode are now encapsulated in their own classes (e.g., \js/controllers/autoanimate.js\, \js/controllers/keyboard.js\). This change also introduces a new focus controller to manage keyboard capture in embedded presentations and a jump-to-slide feature for quick navigation, while ensuring backward compatibility with existing plugin APIs.
js/controllers · high confidence
Behavioural changes
Build script updated to maintain correct DTS output paths
The build process now includes a new utility module (build/dts-paths.ts) that rewrites legacy TypeScript declaration file paths. This ensures that generated .d.ts files are output to the correct locations, resolving issues with path normalization for both core and plugin modules.
build · high confidence
Highlight plugin migration to TypeScript with Vite build and new code-wrapping support
The highlight plugin has been rewritten in TypeScript (index.ts) and is now built using Vite instead of Gulp, producing ES and UMD bundles. This migration introduces support for wrapping code in \<script type="text/template"\> tags to prevent HTML parsing issues, adds TypeScript definitions for the plugin API, and includes the highlightjs-line-numbers.js library to enable line number offsets and scrolling behavior for highlighted code fragments.
plugin/highlight · high confidence
Major CSS restructuring with new layout helpers and fragment styles
The CSS architecture has been significantly reorganized: the legacy main.css has been removed and replaced by modular SCSS files (reveal.scss and layout.scss) that introduce new utility classes for layout (r-stack, r-vstack, r-hstack, r-fit-text) and comprehensive fragment animation styles (grow, shrink, zoom-in, fade-out, etc.). The reset.css has been updated to version 4.0 and now includes the 'main' HTML5 element. This change represents a foundational shift in how styles are structured and applied, moving from a single monolithic file to a component-based system with modern CSS features.
css · high confidence
Migrate utility modules to TypeScript and restrict postMessage API
The utility modules in js/utils (including color, constants, device, loader, and util) have been converted from JavaScript to TypeScript, providing static type checking for internal helpers like color parsing, DOM manipulation, and script loading. Additionally, the postMessage API has been hardened by adding 'previewIframe' to the blacklist of disallowed methods, preventing external scripts from triggering this specific preview action via message passing.
js/utils · high confidence
New theme template with CSS custom properties and SCSS settings
The theme system now uses a new template structure (settings.scss, mixins.scss, theme.scss) that exposes all theme variables as CSS custom properties (e.g., --r-main-font, --r-heading-color) for easier overriding. It introduces SCSS mixins for automatic text color inversion based on slide background (light vs. dark) and sets default code block tab size to 2 spaces.
css/theme/template · high confidence
Notes plugin rebuilt with Vite and hardened against XSS
The notes plugin has been rebuilt using Vite, bundling the speaker-view HTML directly into the JavaScript output so it no longer relies on relative file paths. This change also introduces a security fix by restricting postMessage communication to same-origin windows only, preventing cross-origin XSS attacks. Additionally, the plugin now correctly handles notes defined in fragment elements and restores support for running speaker view from the file:// protocol.
plugin/notes · high confidence
Plugin TypeScript declaration output paths are rewritten
The plugin's TypeScript declaration files (.d.ts) are now generated with adjusted output paths. A new plugin configuration intercepts the file writing process to rewrite the legacy declaration paths, ensuring the generated type definitions are placed in the correct location within the distribution directory.
plugin · high confidence
Revamped print and PDF export styles
The print and PDF export experience has been significantly improved with new, dedicated stylesheets (paper.scss and pdf.scss) that replace previous global resets. For users exporting to PDF, slide backgrounds are now correctly embedded within slides, slide numbers are visible when enabled, and speaker notes can be displayed on separate pages. The paper print stylesheet ensures content flows naturally by removing UI controls, resetting slide positioning, and fixing issues with truncated text and code blocks, resulting in cleaner, more readable printed presentations.
css/print · high confidence
Search plugin now supports whole-phrase and special character matching
The search plugin's matching logic has been updated to allow searching for any character, including non-alphanumeric symbols, and to support whole-phrase searches rather than being restricted to individual words. This change improves the accuracy of search results within slides, allowing users to find specific text strings more reliably.
plugin/search · high confidence
Theme assets restructured and build system upgraded
The theme build system has been migrated from Gulp to Vite, requiring Node 16 or later, and all compiled CSS assets are now located in the /dist directory. The Dracula theme has been added, and existing themes have been refactored to use modern Sass syntax. Additionally, the beige theme has been updated, and the black-contrast theme now includes embedded font data.
dist/theme · high confidence
Themes converted to modular Sass architecture
All built-in themes (beige, black, blood, dracula, league, moon, night, serif, simple, sky, solarized, white) have been rewritten in Sass to replace the previous static CSS files. This change introduces a modular structure using shared template files (mixins, settings, and theme base) and CSS variables, allowing themes to be more easily customized and maintained. Users can now create custom themes by duplicating a .scss file and overriding the provided settings variables, which are automatically compiled via the new Vite build process.
css/theme · high confidence
Zoom plugin now supports explicit cleanup via destroy
The zoom plugin now exposes a destroy method that resets the zoom state and removes event listeners when called, allowing presentations to be safely unloaded or re-initialized without residual zoom behavior.
plugin/zoom · high confidence
Fixes
Add bundled font assets and licenses for League Gothic and Source Sans Pro
The theme font directory now includes the actual font files (WOFF), corresponding CSS @font-face definitions, and their respective SIL Open Font License (OFL) files for both League Gothic and Source Sans Pro. This ensures that the fonts are self-contained within the theme assets, allowing themes to render correctly without relying on external font sources or missing local files.
css/theme/fonts · high confidence
Test coverage
Added type tests for plugin imports and configurations; Expanded test coverage for reveal.js core features.
Dependencies
Reveal.js 6.0.2 dependency and build toolchain update
The project has upgraded its core build toolchain to Vite 8 and TypeScript 6, replacing previous tools like Grunt and Gulp. This change introduces a new Node.js engine requirement of \>=22.12.0 and updates key development dependencies including esbuild (0.28), sass (1.98), and marked (17). The React wrapper (@revealjs/react) has also been updated to version 0.2.2, aligning its dependencies with React 19 and Vite 8.
(dependencies) · high confidence
Housekeeping
Reveal.js 6.0.1 distribution files
The compiled distribution assets in the /dist directory have been updated to version 6.0.1. This release includes the core reveal.js JavaScript bundle, the main reveal.css stylesheet, a CSS reset file, and the TypeScript configuration definitions (config.d.ts).
dist · high confidence
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
How this codebase got here
Baseline
- First survey — no prior run to compare against. CAI 58.
Lenses
- Code Health 65
- Architecture 80
- Maturity 57
- Readiness 57
- Security 69
- Accessibility 54
- Performance 100
Changes since last survey
- 300 commits — 229 feature/other, 71 fixes
By area
- (root) — 67 commits
- (repo) — 35 commits
- dist/reveal.esm.js — 33 commits
- css/reveal.scss — 24 commits
- js/controllers — 22 commits
- react/src — 13 commits
- dist/plugin — 9 commits
- css/theme — 8 commits
- plugin/math — 8 commits
- dist/theme — 7 commits
- plugin/notes — 7 commits
- js/reveal.js — 6 commits
- dist/reveal.js — 5 commits
- .github/workflows — 4 commits
- dist/reveal.css — 4 commits
- examples/scroll.html — 4 commits
- plugin/search — 4 commits
- scripts/test.js — 4 commits
- js/config.ts — 3 commits
- js/config.js — 2 commits
Notable commits
- fix: Fix escape before comma in regex is redundant
- fix: Merge pull request #3548 from hackmdio/fix/xss-on-data-background-video-attribute
- fix: Merge pull request #3595 from jokester/mathjax3-fix-for-multiple-instances
- fix: Merge pull request #3598 from alifeee/fix/r-stack-chrome
- fix: Merge pull request #3603 from lechten/fix-help
- fix: Merge pull request #3744 from KlavierCat/fix-security-vulnerability
- fix: Merge pull request #3768 from tobi-or-not-tobi/fix/move-pause-overlay-over-other-overlay
- fix: add comment for background fix
- fix: add missing font to dracula theme, fixes #3781
- fix: audit fix
- fix: audit fix
- fix: audit fix
- fix: audit fix
- fix: audit fix and rebuild after merge
- fix: bake font into themes, fix broken test, switch tests to mjs
- fix: disable pan while zoomed for now to fix nav regression in older mobile browsers
- fix: dont restart background video when it hasn't changed (fixes #3633)
- fix: fix Reveal.syncSlide() not clearing out remove background gradients
- fix: fix and format examples decks
- fix: fix bad imports in examples, add codespell skip list to action
- …and 280 more
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
Survey your own repository
hakimel/reveal.js was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.
About this page
- The score is its most recent published measurement, taken on 10 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
- Measured at commit e240e175232fa2de660a02bc0d7bf5f655b159bb — the exact code this score is about.
- Scored under rubric-2026.10.5 — the same rubric and the same method as every other entry in this index.
- Measured by watchdog.canine.dev using codehealth-analyzer preprod-fe8540b5da9b.