{"id":13944,"library":"reveal.js","title":"reveal.js: The HTML Presentation Framework","description":"reveal.js is an open-source framework for creating interactive, browser-based presentations using HTML, CSS, and JavaScript. The current stable version is 6.0.1, with frequent minor and patch releases addressing bugs and introducing new features, and major versions typically bringing significant architectural or feature additions (e.g., v5.0 introduced scroll view, v6.0 introduced an official React wrapper). Key differentiators include its extensibility via a rich API and plugins, support for nested slides, Markdown, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, and syntax-highlighted code. It stands out by allowing presentations to be consumed as traditional slides or as a scrollable web page, providing flexibility for different viewing contexts. The recent introduction of an official React wrapper (`@revealjs/react`) offers a component-based approach for building decks, appealing to modern web development workflows.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"git://github.com/hakimel/reveal.js","tags":["javascript","reveal","slides","presentation","typescript"],"install":[{"cmd":"npm install reveal.js","lang":"bash","label":"npm"},{"cmd":"yarn add reveal.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add reveal.js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"reveal.js is primarily designed for ESM usage in modern projects. While CommonJS might work with bundlers, direct `require` is not the idiomatic approach for current versions.","wrong":"const Reveal = require('reveal.js')","symbol":"Reveal","correct":"import Reveal from 'reveal.js'"},{"note":"The `initialize` method is part of the default `Reveal` export, not a separate named export. It must be called on the imported `Reveal` object.","symbol":"Reveal.initialize","correct":"import Reveal from 'reveal.js'; Reveal.initialize({...});"},{"note":"Plugins are typically imported from their specific paths within the `plugin` directory and often have an `.esm.js` suffix for ESM compatibility. The specific import path may vary slightly for other plugins like Math, Highlight, or Notes.","wrong":"import { Markdown } from 'reveal.js'","symbol":"RevealMarkdown","correct":"import RevealMarkdown from 'reveal.js/plugin/markdown/markdown.esm.js'"}],"quickstart":{"code":"import Reveal from 'reveal.js';\nimport Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';\nimport Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // Create a basic presentation structure\n document.body.innerHTML = `\n
\n
\n
\n

Hello reveal.js!

\n

This is your first slide.

\n
\n
\n \n
\n
\n

Features

\n
    \n
  • HTML & Markdown support
    • \n
  • Plugins for Math, Code Highlight, Notes
    • \n
  • Speaker View
    • \n
\n
\n
\n
\n `;\n\n let deck = new Reveal({\n plugins: [Markdown, Highlight],\n controls: true,\n progress: true,\n hash: true,\n center: true,\n transition: 'slide',\n // Optional: Enables scroll view for presentations.\n // Note: Scroll view is new in v5.0.0 and above.\n // scrollMode: 'paged'\n });\n\n deck.initialize();\n console.log('reveal.js initialized!');\n});\n","lang":"typescript","description":"This quickstart initializes a basic reveal.js presentation with two slides, demonstrating HTML and Markdown content, and integrating the Markdown and Highlight plugins. It shows how to set up the HTML structure and configure Reveal.js programmatically using ESM imports."},"warnings":[{"fix":"For new React projects, consider using `@revealjs/react` for a more streamlined and idiomatic integration. For existing projects, ensure your custom React wrappers are compatible with the core library's API changes.","message":"Version 6.0.0 introduced `@revealjs/react`, an official React wrapper. While it's a new feature, direct integration with React applications should now consider using this new package instead of custom component wrappers, as the wrapper provides idiomatic React components.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Review your presentation's layout and content for optimal display in scroll view if you plan to enable `scrollMode`. Test thoroughly, especially with images, videos, and complex layouts.","message":"Version 5.0.0 introduced 'scroll view' as a groundbreaking new feature, changing how presentations can be consumed. While it's optional, it represents a significant shift in presentation paradigms. Existing presentations might behave differently or require adjustments if enabling `scrollMode`.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always keep reveal.js updated to the latest stable version to benefit from security patches. Review any custom content injected into slides or through the API to ensure it's properly sanitized.","message":"Several security fixes related to XSS vulnerabilities have been implemented across versions (e.g., postMessage API, slide background). While patched in recent releases, older versions may be vulnerable.","severity":"gotcha","affected_versions":">=5.0.3"},{"fix":"Refer to the official documentation for the correct import paths for each plugin. Ensure you are using the `.esm.js` variant for ES Modules in modern build setups.","message":"Plugin imports often require specific paths (e.g., `reveal.js/plugin/markdown/markdown.esm.js`). Incorrect paths or attempting to import plugins directly from the main `reveal.js` package can lead to import errors or plugins not loading.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Consult the PDF export documentation (`revealjs.com/pdf-export/`) for best practices. Ensure your browser is up-to-date and consider adjusting `print` related CSS or `Reveal.config` options for better output.","message":"PDF export functionality can sometimes have issues with speaker notes, background images, or complex layouts not rendering as expected. This often requires specific configuration adjustments or an updated browser environment.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"search_vec":"'6.0.1':30 'addit':52 'address':37 'allow':98 'anim':82 'api':72 'appeal':136 'approach':132 'architectur':49 'auto':81 'auto-anim':80 'base':18,131 'bring':47 'browser':17 'browser-bas':16 'bug':38 'build':134 'code':93 'compon':130 'component-bas':129 'consum':102 'context':117 'creat':14 'css':22 'current':26 'deck':135 'develop':140 'differ':115 'differenti':65 'e.g':53 'export':84 'extens':68 'featur':42,51 'flexibl':113 'framework':5,12 'frequent':32 'highlight':92 'html':3,21 'includ':66 'interact':15 'introduc':40,55,59 'introduct':120 'javascript':24,142 'key':64 'latex':87 'major':44 'markdown':79 'minor':33 'modern':138 'nest':77 'new':41 'note':86 'offer':127 'offici':61,123 'open':10 'open-sourc':9 'page':111 'patch':35 'pdf':83 'plugin':74 'present':4,19,99,145 'provid':112 'react':62,124 'recent':119 'releas':36 'reveal':143 'reveal.js':1,6 'revealjs/react':126 'rich':71 'scroll':56 'scrollabl':109 'signific':48 'slide':78,105,144 'sourc':11 'speaker':85 'stabl':27 'stand':95 'support':75 'syntax':91 'syntax-highlight':90 'tradit':104 'typescript':146 'typeset':88 'typic':46 'use':20 'v5.0':54 'v6.0':58 'version':28,45 'via':69 'view':57,116 'web':110,139 'workflow':141 'wrapper':63,125","created_at":"2026-04-20T01:57:07.201793+00:00","updated_at":"2026-04-20T01:57:07.201793+00:00","problems":[{"fix":"Ensure `import Reveal from 'reveal.js';` is at the top of your module and that `new Reveal({...}).initialize()` is called after the DOM is ready.","cause":"The `Reveal` object was not correctly imported or is not available in the scope when `initialize()` is called.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'initialize')"},{"fix":"Verify the exact path for the plugin import. Most modern setups require `.esm.js` suffix, e.g., `import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';`.","cause":"Incorrect file path for a plugin import, or the plugin file does not exist at the specified location.","error":"Failed to load module script: The server responded with a non-zero status code 404 for a module script with source '.../plugin/markdown/markdown.js'."},{"fix":"Switch to ES Module imports: `import Reveal from 'reveal.js';` instead of `const Reveal = require('reveal.js');`.","cause":"Attempting to use `require()` for CommonJS imports in an ES Module context (e.g., in a browser with `type=\"module\"` or a modern Node.js project).","error":"ReferenceError: require is not defined"},{"fix":"Ensure `reveal.js` base and theme CSS files are linked correctly (`` and ``). Verify your HTML structure matches the `div.reveal > div.slides` expected by the framework.","cause":"Incorrect CSS styling or missing `reveal.js` CSS themes, or the presentation container is not properly sized.","error":"Slides are not full screen or are displaying with incorrect aspect ratio/margins."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://revealjs.com","github":"https://github.com/hakimel/reveal.js","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/reveal.js","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}