# hakimel/reveal.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/hakimel-reveal-js).**

71,731 stars · 16,810 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/hakimel/reveal.js
- Homepage: https://revealjs.com
- awesome-repositories: https://awesome-repositories.com/repository/hakimel-reveal-js.md

## Topics

`presentations` `slides` `slideshow`

## Description

This project is a web-native presentation framework that renders slide decks from standard HTML or Markdown. It functions as a declarative slide engine, managing navigation, state persistence, and lifecycle events through a configuration-driven interface. By leveraging standard web technologies, it enables the creation of responsive, browser-based presentations that support complex layouts, nested transitions, and interactive content.

The framework distinguishes itself through a modular, plugin-based architecture that allows developers to extend core functionality using custom hooks and event listeners. It provides sophisticated visual control, including CSS-transform-based scaling to ensure content fits any viewport, automated element animations between slides, and incremental rendering of content fragments. Additionally, it supports multi-directional navigation, including vertical slide stacks, and offers robust synchronization capabilities for remote presentation control and multi-device audience tracking.

Beyond its core engine, the project includes comprehensive utilities for technical documentation, such as syntax-highlighted code blocks with line-specific focus and integrated mathematical typesetting. It provides native support for React-based applications through dedicated components and adapters, and includes tools for exporting presentations to PDF. The framework is designed for flexibility, allowing for custom themes, dynamic configuration updates, and the embedding of interactive media or external web content directly into the slide deck.

The project is distributed as an ES module, facilitating integration into modern build processes and script bundling environments.

## Tags

### Content Management & Publishing

- [Presentation Markdown Parsers](https://awesome-repositories.com/f/content-management-publishing/content-processing-transformation/markdown-markup-tools/markdown-processors/presentation-markdown-parsers.md) — Parse structured text files to dynamically render slide content. ([source](https://revealjs.com/markdown/))
- [Technical Presentation Formats](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/documentation-tooling/visual-presentation/technical-presentation-formats.md) — Renders technical content with specialized syntax highlighting, line-specific focus, and integrated mathematical notation support.
- [Syntax Highlighting](https://awesome-repositories.com/f/content-management-publishing/documentation-knowledge-management/syntax-highlighting.md) — Highlights code blocks with support for custom line numbering, specific line focus, and sequential reveal steps. ([source](https://revealjs.com/markdown/))

### User Interface & Experience

- [Declarative Slide Engines](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/declarative-slide-engines.md) — Control slide navigation, state persistence, and lifecycle events via a declarative configuration interface.
- [Initialization Routines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presentation-lifecycle-management/initialization-routines.md) — Bootstrap presentation environments within the browser viewport using promise-based initialization routines. ([source](https://revealjs.com/initialization/))
- [Slide Management and Configuration](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration.md) — Configure presentation behavior, navigation, and display settings through a centralized options interface. ([source](https://revealjs.com/config/))
- [DOM-Based Slide Orchestrators](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/dom-based-slide-orchestrators.md) — Orchestrate presentation flow by dynamically manipulating the document object model to display slide containers.
- [Web-Based Presentation Authoring Tools](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/web-based-presentation-authoring-tools.md) — Build interactive, browser-based slide decks using standard HTML and Markdown syntax.
- [Presentation Deck Rendering](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/presentation-deck-rendering.md) — Standardize the structural composition and rendering of web-based slide decks. ([source](https://revealjs.com/react/))
- [Auto-Animation Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/auto-animation-transitions.md) — Automate smooth visual transitions between slide states by animating layout and style changes. ([source](https://revealjs.com/auto-animate/))
- [Slide Transition Engines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines.md) — Manage complex animation sequences and visual transitions between sequential slides.
- [Transition Effects](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/transition-effects.md) — Apply fluid visual effects to elements during state changes to enhance interface transitions. ([source](https://revealjs.com/transitions/))
- [Code Highlight Animations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-highlight-animations.md) — Highlight code changes sequentially by defining specific line ranges via data attributes. ([source](https://revealjs.com/code/))
- [Code Line Highlighting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting.md) — Emphasize specific lines or ranges within code blocks for clear technical demonstrations. ([source](https://revealjs.com/code/))
- [Presentation Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presentation-lifecycle-management.md) — Clean up document modifications and detach event listeners to restore state during component destruction. ([source](https://revealjs.com/initialization/))
- [Multi-Instance Presentation Managers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presentation-lifecycle-management/multi-instance-presentation-managers.md) — Enables multiple concurrent presentations on a single page by isolating class instances for distinct document elements. ([source](https://revealjs.com/initialization/))
- [Slide State Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/slide-state-management.md) — Track current navigation state and slide positions through a dedicated interface. ([source](https://revealjs.com/api/))
- [Vertical Slide Stacks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/vertical-slide-stacks.md) — Organize content into nested vertical stacks to enable multi-directional navigation. ([source](https://revealjs.com/vertical-slides/))
- [Slide Configuration Attributes](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-configuration-attributes.md) — Apply custom metadata attributes to individual slides to control background and transition properties. ([source](https://revealjs.com/markdown/))
- [Remote Presentation Controls](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/speaker-tools/remote-presentation-controls.md) — Synchronize speaker notes, navigation, and audience tracking across multiple connected devices.
- [Markdown Slide Renderers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/web-based-presentation-authoring-tools/markdown-slide-renderers.md) — Transform markdown content into interactive presentations with support for speaker notes and layout attributes. ([source](https://revealjs.com/react/))
- [Presentation Synchronization](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presentation-synchronization.md) — Maintains real-time slide alignment across multiple client devices, allowing a master presenter to dictate navigation flow for all viewers. ([source](https://revealjs.com/multiplex/))
- [Touch Navigation Interfaces](https://awesome-repositories.com/f/user-interface-experience/navigation-components/touch-navigation-interfaces.md) — Detects swipe gestures to enable touch-based navigation, with configurable settings to disable interaction on specific elements. ([source](https://revealjs.com/touch-navigation/))
- [Speaker Tools](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/speaker-tools.md) — Displays elapsed time, wall-clock time, and pacing indicators within a dedicated speaker interface to assist with presentation timing. ([source](https://revealjs.com/speaker-view/))
- [In-Out Transition Configurations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/presentation-transitions/in-out-transition-configurations.md) — Define unique entry and exit animations for individual slides by appending specific suffixes to transition names. ([source](https://revealjs.com/transitions/))
- [Scroll Snapping Configurations](https://awesome-repositories.com/f/user-interface-experience/layout-containers/scroll-snapping-configurations.md) — Configure scroll behavior to align content using mandatory, proximity-based, or free-scrolling modes. ([source](https://revealjs.com/scroll-view/))
- [Animation Configuration Settings](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/animation-configuration-settings.md) — Adjusts animation timing, easing curves, and transition behaviors globally or for individual slide elements. ([source](https://revealjs.com/auto-animate/))
- [Animation Sequence Managers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/animation-sequence-managers.md) — Coordinate complex animation sequences and grouping between adjacent slides using unique identifiers and restart flags. ([source](https://revealjs.com/auto-animate/))
- [Fragment Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/fragment-transitions.md) — Nest fragment-enabled containers to trigger multiple sequential visual transitions on a single element. ([source](https://revealjs.com/fragments/))
- [Code Presentation Utilities](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities.md) — Specify programming languages for code snippets by applying class attributes to override automatic detection. ([source](https://revealjs.com/code/))
- [Presentation Event Systems](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presentation-event-systems.md) — Bubble internal presentation events to the parent window as JSON objects for real-time monitoring and integration. ([source](https://revealjs.com/postmessage/))
- [Presentation Integrations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presentation-lifecycle-management/presentation-integrations.md) — Bridges presentation lifecycles with framework-specific adapters to ensure stable rendering and prevent instance duplication. ([source](https://revealjs.com/react-legacy/))
- [Slide Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/slide-lifecycle-hooks.md) — Exposes lifecycle hooks that trigger callbacks during slide transitions, allowing integration with external animations or state updates. ([source](https://revealjs.com/events/))
- [Presentation State Serialization](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/slide-state-management/presentation-state-serialization.md) — Capture and restore navigation position by serializing the internal state into a snapshot object. ([source](https://revealjs.com/presentation-state/))
- [Media Lightboxes](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/media-background-integration/media-lightboxes.md) — Display images, videos, or external links within a full-screen overlay by applying specific data attributes to elements. ([source](https://revealjs.com/media/))
- [Media Playback Controls](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/media-background-integration/media-playback-controls.md) — Configures media elements to trigger playback automatically upon slide entry, with global overrides for fine-grained control. ([source](https://revealjs.com/media/))
- [Video Backgrounds](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/media-background-integration/video-backgrounds.md) — Embed full-screen video backgrounds with granular control over looping, muting, and opacity settings. ([source](https://revealjs.com/backgrounds/))
- [Navigation and Flow Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers.md) — Defines a linear path through slide content to enable standard web-style navigation between sequential or nested presentation views. ([source](https://revealjs.com/scroll-view/))
- [Navigation Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/navigation-controllers.md) — Defines custom navigation logic to dictate how presentations advance, skip slides, or traverse specific content paths. ([source](https://revealjs.com/auto-slide/))
- [Presentation Layout Controls](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/presentation-layout-controls.md) — Toggle between standard slide views and grid-based overviews programmatically using built-in navigation methods. ([source](https://revealjs.com/overview/))
- [Slide Navigation Links](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/slide-navigation-links.md) — Creates deep-linkable navigation paths to specific slides using unique identifiers or horizontal and vertical coordinate indexing. ([source](https://revealjs.com/links/))
- [PDF Exporting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/pdf-exporting.md) — Generate portable document format files from presentations using browser-based print workflows and specific query parameters. ([source](https://revealjs.com/pdf-export/))
- [Presentation Modes](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/presentation-modes.md) — Toggles between various operational states including overview grids, auto-play sequences, and help overlays. ([source](https://revealjs.com/api/))
- [Gradient Backgrounds](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/gradient-backgrounds.md) — Applies linear, radial, or conic CSS gradients directly to slide backgrounds for enhanced visual styling. ([source](https://revealjs.com/backgrounds/))
- [Text Scaling Utilities](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/text-scaling-utilities.md) — Resize text automatically to fit within slide boundaries without overflowing. ([source](https://revealjs.com/layout/))
- [Theme Customization Engines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/theme-customization-engines.md) — Author custom CSS files to override default visual themes and apply unique styling across all slides. ([source](https://revealjs.com/themes/))
- [Slide Visibility Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-visibility-management.md) — Remove specific slides from the document object model during initialization by applying visibility attributes. ([source](https://revealjs.com/slide-visibility/))
- [Theme Style Customizations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/theme-style-customizations.md) — Adjust global design tokens like colors and spacing by modifying CSS custom properties on the root element. ([source](https://revealjs.com/themes/))
- [Syntax Highlighting Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/text-editors/syntax-highlighting-components.md) — Integrate code blocks with automatic line numbering, range highlighting, and indentation normalization via dedicated components. ([source](https://revealjs.com/react/))

### Software Engineering & Architecture

- [Custom Module Implementations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations.md) — Extend core functionality by implementing custom modular plugins. ([source](https://revealjs.com/creating-plugins/))
- [Lifecycle Event Buses](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/reactive-messaging/reactive-event-driven-systems/lifecycle-event-buses.md) — Broadcasts state changes and navigation events through a centralized bus to trigger plugin execution and component updates.
- [Lifecycle and Loading Frameworks](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/lifecycle-loading-frameworks.md) — Provides a runtime registry for loading, listing, and retrieving plugin instances throughout the application lifecycle. ([source](https://revealjs.com/plugins/))
- [Embedded Presentation Interfaces](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/application-integration/embedded-presentation-interfaces.md) — Hosts interactive slide decks within larger web applications while retaining full control over internal navigation and state.
- [Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures.md) — Register external scripts that hook into the core lifecycle to expand functionality through modular plugins.

### Web Development

- [Responsive Scaling Utilities](https://awesome-repositories.com/f/web-development/layout-engines/responsive-scaling-utilities.md) — Scale presentation containers using CSS transforms to maintain consistent aspect ratios across viewports.
- [Custom Layout Implementations](https://awesome-repositories.com/f/web-development/layout-engines/custom-layout-implementations.md) — Disable default scaling and centering to enable manual CSS-based layout positioning. ([source](https://revealjs.com/presentation-size/))
- [Lazy Loading Strategies](https://awesome-repositories.com/f/web-development/performance-optimizations/lazy-loading-strategies.md) — Defer the loading of media and iframe content until slides are near the viewport to optimize performance. ([source](https://revealjs.com/media/))

### Part of an Awesome List

- [Developer Tools](https://awesome-repositories.com/f/awesome-lists/devtools/developer-tools.md) — Framework for creating HTML-based presentations.
- [Developer Utilities](https://awesome-repositories.com/f/awesome-lists/devtools/developer-utilities.md) — Framework for creating HTML-based presentations.
- [Presentation Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/presentation-frameworks.md) — Flexible framework for creating web-based slide presentations.
- [Sliders and Carousels](https://awesome-repositories.com/f/awesome-lists/devtools/sliders-and-carousels.md) — Framework for building HTML-based presentations.
- [Desktop And Presentation](https://awesome-repositories.com/f/awesome-lists/productivity/desktop-and-presentation.md) — HTML-based presentation framework.
- [Presentation Tools](https://awesome-repositories.com/f/awesome-lists/productivity/presentation-tools.md) — Framework for building beautiful HTML-based presentations.

### Business & Productivity Software

- [Remote Speaker Note Systems](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/speaker-tools/remote-speaker-note-systems.md) — Facilitates remote speaker note viewing on secondary devices via a server-side plugin architecture. ([source](https://revealjs.com/speaker-view/))

### Graphics & Multimedia

- [Incremental Rendering Systems](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/ui-reconciliation-composition/incremental-rendering-systems.md) — Updates visual state incrementally by toggling visibility classes on nested elements to reveal content in sequence.
- [Image Lightboxes](https://awesome-repositories.com/f/graphics-multimedia/immersive-interactive-systems/media-interactivity/image-lightboxes.md) — Triggers full-screen visual overlays for images by applying specific data attributes to standard HTML elements. ([source](https://revealjs.com/lightbox/))

### Programming Languages & Runtimes

- [ES Module Integrations](https://awesome-repositories.com/f/programming-languages-runtimes/language-ecosystems-tooling/module-management/module-systems/es-module-integrations.md) — Import as a native module to support modern browser workflows and modular plugin architectures. ([source](https://revealjs.com/initialization/))

### Scientific & Mathematical Computing

- [KaTeX Configurations](https://awesome-repositories.com/f/scientific-mathematical-computing/numerical-mathematical-foundations/mathematical-typesetting-engines/katex-configurations.md) — Integrates mathematical typesetting by configuring custom delimiters and library loading paths for the rendering engine. ([source](https://revealjs.com/math/))