hakimel/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2024-08-15 16:40:35 +03:00
Code Issues Projects Releases Wiki Activity
Page: Plugins, Tools and Hardware
Pages
Articles & Tutorials Browser Support Example Presentations Home Plugins, Tools and Hardware https: github.com hakimel reveal.js.wiki.git
0 Plugins, Tools and Hardware
Martino edited this page 2024-06-14 22:03:08 +02:00
Table of Contents

Online editor

If you want to create reveal.js presentations in a graphical editor, try Slides.com. It's made by reveal.js' author @hakimel.

Plugins

A list of reveal.js plugins. Feel free to add your own!

reveal.js-plugins (Demos)
a collection of plugins including:
  • Animate: A plugin for animations using SVG.js.
  • Anything: A plugin for adding plots, charts, animated SVGs,or anything else inside an HTML object using a JSON string and a javascript function.
  • Audio slideshow: A plugin for audio playback and recording.
  • Chalkboard: A plugin adding a chalkboard and slide annotation.
  • Chart: A plugin for using Chart.js.
  • Custom controls: A plugin for customization of controls.
  • Fullscreen: A simple plugin allowing to use fullscreen slides.
  • Load content: A plugin allowing to load external content into the body of HTML-elements.
  • Seminar: a plugin providing interaction capabilities with other hosts and participants (e.g. slide events, chalkboard drawings, Q&A, polls).
  • Poll: a plugin providing online polls (based on the seminar plugin).
  • Questions: a plugin adding Q&As to slide decks (based on the seminar plugin).

reveal.js-mermaid-plugin: a plugin rendering Mermaid diagrams in browser, such as state charts, class diagrams, flowchart and many more. No external rendering server is required.

revealjs-animated: A simple to use plugin to add custom animations, based on the Web Animation API, to your presentations. (Demo)

reveal-mark-plugin: Mark.js-powered highlighting of arbitrary text

pubnub-remote-control-plugin: Remote control a presentation using a web page or a Telegram bot via PubNub API.

menu: A slideout menu to quickly jump to any slide by title. Also optionally changes the theme and sets the default transition. (Demo)

toolbar A toolbar to quickly access reveal.js functionality such as fullscreen, notes and pause. (Demo) - compatible with reveal.js-menu

remeal: Fully featured customizable remote control tool. Powerful yet extremely simple in use.

d3js-plugin D3.js plugin to embed dynamic visualizations with transitions triggered by slide navigation (Demo)

RevealVizScroll: a plugin to create d3 visualizations similar to scrollytelling that transition nicely on your slides. (Demo Bigger Demo)

reveal.js-drawer: Enables you to draw over your slides, keeps drawings between slides. (Demo)

diagram-plugin: Plugin to add diagrams with transitions triggered by slide navigation, based on D3.js (Demo)

reveald3: Plugin to embed single/multiple dynamic javascript-based (D3.js, Vega, Vega-lite, Semiotic, etc ...) visualizations into slides with transitions triggered by slide navigation, with full support of reveal.js data-fragment-index. (Demo)

a11y: Slide accessibility plugin

PdfExport: Easly switch between screen and the built-in PDF export mode by pressing a shortcut key.

AltMode: Switch between multiple alternative configuartion presets eg. screen and presentation mode, day and night mode, etc. by pressing a shortcut key.

HelpButton: Open the help screen by pressing a button.

ThemeOverride: Override the themes of reveal.js and highlight.js

fullscreen: Display fullscreen images in the content section of slides, using the entire available window area, with options contain or cover mimicking the display behavior of background images.

attribution: Display attribution texts in an unobtrusive way, sideways along the right edge of the viewport. When resizing the viewport or toggling full screen mode, the attribution text sticks persistently to the right edge of the viewport.

reveal.js-animate: Integration of the animation library animate.css with global or local configuration based on animation, repetition and speed parameters. Demo.

fullscreen-img: Use fullscreen images in slides (note there are several versions of this plugin floating about)

notell: Control reveal.js remotely from another browser tab or device

revealremote: Control your reveal.js presentation from a browser on any device with network connectivity

wave-plugin: Advance through your reveal.js presentation slides by waving in front of your webcam (Demo)

gamepad-plugin: Use your gamepad as a remote to advance through your slides

joycon-plugin: Use your JoyCon as a remote to advance through your slides (inspired by the above plugin)

tagcloud-plugin: Tagcloud generator

reveal-wordcloud: Wordcloud generator using wordcloud2.js for beautiful wordclouds.

per-slide theme override: Custom theme per slide using data-theme

otf-fragment-order: Make fragments appear in an order of your choosing while giving the presentation

math-katex-plugin Formula rendering with KaTeX (instead of MathJax)

code-focus: Focus on specific lines of code blocks. (Demo)

jump-plugin: Jump between slides by typing the number followed by enter

leap-motion: Navigate slides with your Leap Motion controller with an added "laser pointer" bonus

css-snippet: Live css editing in code blocks.

TOC-Progress: LaTeX Beamer-like progress indicator according to table of contents. (Demo)

reveal.js-tableofcontents: A table of contents plugin to generate automatically a table of contents slide.

reveal.js-symbol-per-slide-progress: An alternative progress plugin to show every slide as single symbol and the symbol of the current active slide in a different color.

Title-Footer Footer showing title of presentation. (Demo)

external: Load external files (HTML).

external: Load external Files (improved version, recursive inclusion and relative paths now possible)

RevealEditor: Editor for code demonstrations.

ga Google Analytics tracking for Reveal.js presentations.

mqtt-plugin: Plugin to add real-time data retrieving over MQTT to your slides.

sampler: Embed code samples taken directly from source files in your slides.

EmbedCode: Embed external code files, in whole or in part, without copy-pasting all of their content. Alternative to the above-mentioned sampler.

PrintRevealNotes: Print the speaker notes from a reveal.js presentation

embed-video: Embed local media (including live video) into a reveal.js presentation

ppt2reveal: Powerpoint macro to reveal

ace: Embed ACE editors into a reveal.js presentation (Demo)

speech: Navigate slides with your voice (Demo)

run-in-terminal: Add executable code examples

coursemod: Courseware plugin

KaTeX-for-reveal KaTeX support (alternative to MathJax)

elapsed-time-bar Add progress bar of elapsed time (Demo)

explicit-link Easier typing with explicit links (links with same href and text) (Source)

tts_basics: Basic Text-To-Speech - Have your show read out loud (Demo)

badges: Add badges to your code snippets (or other stuff)

Spotlight: Allows to highlight the current mouse position with a spotlight

Dummy-Mouse-Pointer: Create a presentation pointer tracking mouse movement

notes-pointer: A mouse-based "laser pointer" like spotlight and mouse-pointer, but that lets you point in the speaker view

Typed: Implement a typewriter effect using Type.js - Demo and Github

Quizzes: Include simple, dynamic quizzes in your reveal.js presentation - Demo

Mapbox-GL: Embed interactive map slides- Demo

zero-index-main: This plugin sets your vertical 0 index as your main deck. Whenever you change your slide horizontally your vertical index will be set to zero.

Skip fragments: This plugin lets you skip all fragments on a slide by pressing a shortcut key.

OneTimer A plugin to animate fragments only once, so that going to a previous slide shows final fragment state(s).

Martino's plugins (overview page): a collection including:

  • Simple menu: A simple plugin for a menubar or a header or footer with an auto-generated menu. It checks if a slide is in a 'chapter' and sets the active state in that menu. (Demo)
  • Appearance: A plugin that animates elements sequentially like in Powerpoint, using Animate.css. Perfect for online portfolios or other presentations with images. (Demo)
  • Multimodal: A plugin to show content like images, video and HTML in modal windows or lightboxes. (Demo)
  • FsFx: A plugin for a button or other element that enters or exits fullscreen, and toggles classes on elements. (Demo)
  • Verticator: A plugin that adds indicators to show the amount of slides in a vertical stack. Similar to the indicators at fullPage.js. (Demo)
  • Fontsfirst: A plugin that makes sure that remote or selfhosted fonts are loaded before initialising Reveal.js. If your audience uses an Adblocker and they do not see your Google font, use this plugin. (Demo)
  • Relativenumber: A simple plugin to get the slide number at a desired location. For example, in a menu bar. (Demo)
  • CopyCode: A simple plugin that automatically shows a 'copy' button in code blocks. (Demo)
  • Internation: A basic internationalization (i18n) or localization (i10n) plugin that lets the user choose a language for the presentation. Internation will also help you generate the JSON file that you start translating from. (Demo)
  • Doghouse: A plugin that will render Pug codeblocks when it starts, but it also works with live editing, which makes it great for presentations about Pug. (Demo)
  • Smallcontrol: A plugin that restyles the controls to make the vertical control elements smaller. (Demo)
  • Tagteam: A plugin that is used to dynamically show only certain sections in presentations when you don't want to show everything. It uses URL parameters to set the needed sections. (Demo)
  • CounterAct: CounterAct fixes a limitation of CSS counters that do not work in hidden slides, such as those that Reveal uses. This way, you can have nice numbers in your presentations again. (Demo)

ExternalCode: A simple plugin that lets you use code from external files in code blocks. (Demo, assuming I don't change the slides.)

Poll: A plugin to add an interactive poll to reveal.js slides. The quiz question and answers is shown on the slides, the audience can vote via their mobile phone, and the result is shown on the presentation slides as a bar chart.

PlantsUML: A plugin to write PlantsUML text-diagram descriptions into slides to generate class, sequence, or other UML diagrams, Entity-Relationship diagrams, and much more.

reveal-plantuml: A plugin that allow using PlantUML diagrams on HTML and Markdown slides. Simply put PlantUML diagrams in code block and the plugin will do the rest.

reveal.js-tracking: A plug-in that allows advanced tracking in reveal.js presentations (dwell times, link clicks, quizzes, slide transitions, etc.)

handwriting: A plug-in that provides simple handwriting option with a mouse, pen and touch in reveal.js presentations.

reveal-compiler-explorer: Click on code snippets to open them in Compiler Explorer.

reveal.js-pointer: Changes mouse into a pointer with an optional keybinding (Demo)

reveal-countdown: Lets you add a countdown timer to individual slides to set time limits on breaks, exercises, discussions etc.

reveal-livecode: Turn hljs code into live coding. With a data-edit target you can amaze your audience with live coding.

reveal.js-railroad: Adds support for railroad-diagrams

reveal.js-clipcode: Similar to reveal.js-copycode, adds a copy to clipboard option to code blocks

reveal.js-external-code: Use code from a file as the source for a code block (requires a server)

tldreveal: Another drawing/annotation plugin. Based on tldraw, with support for saving and loading annotations (demo)

Tools

Useful tools for working with reveal.js.

  • slides.com Visual editor for reveal.js, create presentations without knowing how to code.
  • runnable.com Live editable example of the source code.
  • prez Generate Reveal.js slideshows from a set of markdowns.
  • deck2pdf Command-line tool for converting decks to PDF
  • decktape Another command-line tool for converting decks to PDF using Puppeteer
  • uncloak Reveal.js theme editor to tweak colors and font styles in a live GUI.
  • cleaver Reveal-cleaver-theme enables you to easily create a very easy way reveal.js slideshow from a dummy markdown file.
  • hacker-slides Visual editor; A simple app that combines Ace Editor and RevealJS
  • kreator.js Visual editor; A GUI for reveal.js
  • generator-reveal Yeoman generator for reveal.js
  • reveal-cli CLI tool for scaffolding (and deploying to GH Pages) reveal.js presentations
  • fab setup.revealjs fabric script: Set up a reveal.js presentation with slides written in markdown
  • slide-builder for programmatically adding fragments/steps to a slide (useful for embedding multi-step visualisations)
  • present : reveal.js Workflow Automation for automating workflow using bash, reveal.js, external markdown. allowing features like import markdown, reuse markdown and markdown library.
  • markdown-presenter.html A reveal.js presentation allowing to load and present local markdown files such as this one.
  • mdshow Turn markdown files into beautiful presentations quickly. Simple and fast, but powerful 😄 (succeeded by slidesdown)
  • slidesdown Slideshows as fast as you can type Markdown. 🚀
  • GitPitch just markdown then git-commit on any branch within a GitHub, GitLab, BitBucket, GitBucket, Gitea or Gogs repo for instant online and offline presentations.
  • emacs-reveal Generate reveal.js presentations with audio explanations as OER from simple texts in Org Mode with GNU Emacs
  • deveal A reveal.js helper tool to create and manage a presentation using templates and parameters files
  • AwesomeSlides makes awesome HTML5/CSS slides by converting slides made with LibreOffice. Output slides are based on Reveal.js with the AwesomeSlides plugin, which applies fancy CSS themes to slides.
  • reveal-hugo is a complete Hugo theme for Reveal.js with a clean, intuitive way to organize slide content.
  • revealjs-tpl, a ready-to-go file compilation to create a reveal.js presentation using Pandoc.
  • Dispy, a simple graphical editor for RejealJS with managing and hosting your slides online.
  • MarkShow, A reveal.js presenter, with live editor and upload.
  • reveal-md, reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file.
  • RISE, a Jupyter Notebook extension to instantly turn your notebook into a live (executable) reveal.js-based presentation.
  • reveal-init, a Shell script for initiating Reveal.js presentation projects.
  • kslides.com, a Kotlin DSL wrapper for reveal.js.
  • Reveal-Pug-Scss-Starter, a small project to quickly start presentations with Reveal.js, using Pug (just try it out, you'll love it) and Scss.
  • streamlit-reveal-slides, create and add reveal.js HTML presentations to your Streamlit apps!

Hardware

Satechi SP-600 (Amazon)

7 keys plus laser: Linux udev keys binding

Equip Wireless Notebook Presenter 4-in-1 (Amazon)

Works well with Chrome. Linux Mint and Ubuntu-compatible. Features:

  • Mouse Pointer, Mouse Click
  • Slide forward, Slide back
  • Expose Mode (ESC)
  • Darken the Screen

MINIX NEO M1 2.4GHz Six-axis Air Mouse w/ Gyro (DealExtreme)

Should just work as an USB mouse/keyboard. Tested on Linux.

  • All 4 directional keys (left/right/up/down) and 'enter' (OK)
  • Mouse pointer, mouse left-click (but conveniently disabled when using the directional keys)
  • No ESC (expose mode) or darken-screen
  • Nice small USB dongle

MINIX NEO A2 Lite (successor to MINIX NEO M1)

Drawback: it has a lot of ways to mess things up (aka too many buttons), and a USB dongle that looks easy to lose... but I tried it on my Ubuntu 18.04 system, and it "just works!"