hakimelreveal.js

70,586 stars16,808 forksJavaScriptmit3 views

Reveal.js

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.

Features

Presentation Markdown Parsers - Presentation frameworks support Markdown content by registering a plugin to parse slide content using a standard Markdown processor.
Declarative Slide Engines - A presentation runtime that manages slide navigation, state persistence, and lifecycle events through a configuration-driven interface.
DOM-Based Slide Orchestrators - Manages presentation state by dynamically manipulating the document object model to show or hide slide containers.
Presentation Configurations - Presentation frameworks allow configuring behavior by passing an options object during initialization to control navigation, progress bars, slide numbering, and other display settings.
Presentation Navigation Systems - Presentation frameworks provide navigation between slides, fragments, and directions using absolute indices or relative commands while querying available movement routes.
Web-Based Presentation Authoring Tools - Creating interactive, browser-based slide decks using HTML, Markdown, or JavaScript with support for complex layouts and animations.
Plugin Systems - Presentation frameworks support extending functionality by registering built-in modules for features like markdown rendering, syntax highlighting, speaker notes, and math equations.
Presentation Deck Rendering - Presentation frameworks provide declarative React wrappers that manage slide structure, initialization, and cleanup to support vertical stacks and custom backgrounds.
Auto-Animation Transitions - Presentation frameworks support animating elements automatically between slides by matching content or explicit identifiers to enable smooth transitions for position, style, and layout changes.
Code Highlight Animations - Presentation frameworks support stepping through multiple sequential code highlights within a single block by defining pipe-separated line number ranges in data attributes.
Code Line Highlighting - Presentation frameworks support displaying line numbers and highlighting specific lines or ranges within code blocks using data attributes, including support for custom starting line offsets.
Fragment Sequence Controllers - Presentation frameworks allow controlling the sequence in which slide elements appear by assigning specific index values to fragment elements using a dedicated data attribute.
Lifecycle Event Listeners - Presentation frameworks provide hooks to listen for the initialization of the presentation to trigger custom logic or API calls once all dependencies are loaded.
Lifecycle Management - Presentation frameworks provide direct access to core document elements within the presentation container to perform custom styling or manual manipulation of the viewport and background layers.
Markdown Slide Renderers - Presentation frameworks provide React components to convert markdown files into slides, supporting custom separators, speaker notes, and element attributes.
Multi-Instance Presentation Managers - Presentation frameworks support running multiple independent presentations on the same page by creating class instances for specific document elements and configuring them for embedded sizing.
Navigation Controls - Presentation frameworks support adding directional navigation buttons to slides that automatically update their enabled state based on available movement paths.
Presentation Lifecycle Management - Presentation frameworks support removing a presentation from the page by cleaning up document modifications, detaching event listeners, and destroying all active plugins to restore original state.
Presentation Plugin Architectures - Presentation frameworks support registering custom plugins during initialization or at runtime, supporting asynchronous initialization by returning promises.
Presentation Slide Management - Presentation frameworks provide utilities to retrieve specific slide elements, count total slides, or manipulate the document structure by removing hidden slides.
Slide Configuration Attributes - Presentation frameworks support applying custom attributes to generated slide sections using comment-based syntax to configure background colors, transitions, or other slide-level properties.
Slide State Management - Presentation frameworks allow querying the current navigation state to determine if the user is at the start, end, or a specific type of slide.
Slide Transition Engines - Building engaging visual experiences with custom fragment sequences, parallax backgrounds, and smooth element animations between slide states.
Transition Effects - Presentation frameworks support applying visual transition effects like fading, sliding, or zooming between slides and backgrounds.
Vertical Slide Stacks - Presentation frameworks support nesting section elements within a parent section to enable multi-directional navigation.
Presentation Synchronization - Presentation frameworks support synchronizing slides across multiple audience devices in real-time, allowing a master presenter to control navigation for all viewers.
Speaker Tools - Presentation frameworks support displaying elapsed time, wall-clock time, and pacing indicators in the speaker window to help presenters manage their speed.
Animation Configuration Settings - Presentation frameworks allow configuring animation timing, easing, and behavior for entire presentations, specific slides, or individual elements using data attributes or global settings.
Animation Sequence Managers - Presentation frameworks allow controlling animation grouping and sequence breaks between adjacent slides using unique identifiers and restart flags to manage complex transition flows.
Code Presentation Utilities - Presentation frameworks allow specifying the programming language of a code snippet by adding a language class attribute to override automatic language detection.
Fragment Transitions - Presentation frameworks support applying multiple sequential visual transitions to the same element by nesting fragment-enabled containers within one another.
Gradient Backgrounds - Presentation frameworks support applying linear, radial, or conic CSS gradients to slide backgrounds to create smooth color transitions.
Media Lightboxes - Presentation frameworks support opening images, videos, or links in a full-screen overlay when clicked by adding specific data attributes.
Media Playback Controls - Presentation frameworks support configuring media elements to automatically play when a slide becomes visible, with global settings to override individual behavior.
Navigation Configurations - Presentation frameworks support choosing between default, linear, or grid-based movement patterns for arrow key inputs in mixed horizontal and vertical decks.
Navigation Controllers - Presentation frameworks allow defining custom navigation functions to control how the presentation advances during auto-slide, such as skipping vertical slides or changing traversal order.
Plugin Architectures - A modular framework that allows developers to extend core functionality through custom hooks, event listeners, and external content loaders.
Presentation Event Systems - Presentation frameworks support bubbling internal presentation events to the parent window as stringified JSON objects for real-time monitoring.
Presentation Integrations - Presentation frameworks provide React-specific adapters to manage initialization lifecycles and element references to ensure stable rendering and prevent duplicate instances.
Presentation Layout Controls - Presentation frameworks support switching between the standard slide view and the grid-based overview layout programmatically using JavaScript.
Presentation Modes - Presentation frameworks allow toggling between modes like overview, auto-slide, and pause, or displaying help overlays to control the user experience during a live presentation.
Presentation State Serialization - Presentation frameworks allow capturing and restoring the current slide position and settings by serializing the internal state into a snapshot object for persistence or synchronization.
Scrollable Presentation Modes - Presentation frameworks support flattening slide decks into a linear flow to allow navigation like a standard web page.
Slide Layout Utilities - Presentation frameworks support aligning slide content vertically within the viewport by toggling a setting that centers elements based on slide height.
Slide Navigation Links - Presentation frameworks support linking to specific slides within a presentation by referencing their unique ID or their horizontal and vertical index positions.
Slide Numbering Controls - Presentation frameworks support hiding specific slides from the progress bar and numbering system by applying a visibility attribute.
Slide Timing Configurations - Presentation frameworks support overriding the default slide duration for specific slides or fragments by adding a custom attribute to the HTML element.
Slide Visibility Management - Presentation frameworks support removing specific slides from the document object model upon initialization by applying a visibility attribute.
Text Scaling Utilities - Presentation frameworks support resizing text to the largest possible dimensions that fit within slide boundaries without overflowing.
Theme Customization Engines - Presentation frameworks support authoring new CSS files or modifying blank documents to define unique visual styles for slides and elements.
Video Backgrounds - Presentation frameworks support displaying full-screen video backgrounds with support for looping, muting, and opacity adjustments.
Initialization Routines - Presentation frameworks support initializing a presentation covering the full viewport using a configuration object and a promise-based lifecycle to detect when the deck is ready.
HTML Presentation Frameworks - A web-based engine that renders slide decks from standard markup, supporting complex layouts, nested transitions, and interactive content.
Web-Native Slide Decks - A browser-based presentation format that leverages standard web technologies to enable responsive layouts, media embedding, and cross-platform compatibility.
Remote Presentation Controls - Managing live presentations with synchronized speaker notes, remote navigation, and real-time audience tracking across multiple devices.
PDF Exporting - Presentation frameworks support exporting to PDF by appending a query parameter to the URL and using the browser's native print functionality with specific layout settings.
Lifecycle Event Buses - Coordinates initialization, navigation, and plugin execution through a centralized event bus that broadcasts state changes to all components.
Responsive Scaling Utilities - Calculates and applies CSS scale transforms to the presentation container to ensure content fits perfectly within varying viewport dimensions.
Custom Layout Implementations - Presentation frameworks allow disabling automatic scaling and centering behaviors to create responsive layouts using custom CSS rules for precise element positioning.
Custom Plugin Definitions - Presentation frameworks support defining custom plugins by providing an initialization function, a unique identifier, and an optional cleanup function.
Slide Navigation Controls - Presentation frameworks support jumping to a specific slide by entering its numeric index, coordinate pair, or unique identifier string.
Slide State Management - Presentation frameworks support applying custom CSS classes and triggering events whenever a slide becomes active to enable dynamic styling.
Technical Presentation Formats - Presenting code-heavy content with syntax highlighting, line-specific focus, and mathematical formula rendering directly within a slide deck.
Remote Speaker Note Systems - Presentation frameworks support running speaker notes on a separate device from the presentation display using a server-based plugin.
Advanced Code Highlighters - Presentation frameworks support highlighting code blocks within Markdown content, including line-specific highlighting, step-by-step sequences, and custom line number offsets.
Plugin Lifecycle Managers - Presentation frameworks support managing registered plugins at runtime by checking for their existence, retrieving specific instances, or listing all active plugins.
Plugin Architectures - Allows modular expansion of core functionality by registering external scripts that hook into the presentation lifecycle and configuration.
Touch Navigation Interfaces - Presentation frameworks support enabling touch-based navigation by swiping horizontally or vertically, with options to disable the feature globally or on specific elements.
Presentation Method Invocations - Presentation frameworks support invoking presentation methods from a parent window and receiving return values via message callbacks.
Incremental Rendering Systems - Tracks internal slide progress by toggling visibility classes on nested elements to reveal content in a predefined sequential order.
Embedded Presentation Interfaces - Embedding interactive presentations into larger web applications or dashboards while maintaining control over navigation, state, and lifecycle.
KaTeX Configurations - Presentation frameworks support configuring the KaTeX typesetting engine to render math, including custom delimiters, remote or local library loading, and specific tag exclusion.
Image Lightboxes - Presentation frameworks support displaying images in a full-screen overlay by adding a specific data attribute to image elements.
Iframe Lightboxes - Presentation frameworks support opening external websites in a full-screen iframe overlay by adding a specific data attribute to links.
Video Lightbox Playback - Presentation frameworks support playing videos in a full-screen overlay by adding a specific data attribute to media or image elements.
ES Module Integrations - Presentation frameworks support importing as an ES module for use in modern browser scripts or custom build processes to enable modular plugin integration and bundling.
Lazy Loading Strategies - Presentation frameworks support loading media and iframe content only when slides are near the current view to improve performance.
Speaker Note Systems - Presentation frameworks support enabling speaker notes by including the plugin script and registering it to display presenter-specific content in a separate window.
Slide Lifecycle Hooks - Presentation frameworks provide hooks to listen for slide changes to update external libraries or trigger custom animations immediately when the user navigates to a new slide.
In-Out Transition Configurations - Presentation frameworks support defining distinct entry and exit animations for individual slides by appending specific suffixes to transition names.
Syntax Highlighting Components - Presentation frameworks provide React components to display code blocks with automatic line numbering, range highlighting, and indentation normalization.
Theme Style Customizations - Presentation frameworks support overriding default styles by modifying CSS custom properties on the root element to adjust colors, fonts, and spacing.
Scroll Snapping Configurations - Presentation frameworks support controlling how the presentation aligns with slides during scrolling by choosing between mandatory, proximity-based, or continuous free-scrolling modes.