js presentation

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome , Safari or Firefox browser.

impress.js *

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

visualize your big thoughts

and tiny ideas

by positioning , rotating and scaling them on an infinite canvas

the only limit is your imagination

want to know more?

one more thing...

have you noticed it’s in 3D * ?

Use a spacebar or arrow keys to navigate. Press 'P' to launch speaker console.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

The HTML Presentation Framework

hakimel/reveal.js

Folders and files, repository files navigation.

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com .

The framework comes with a powerful feature set including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX typesetting , syntax highlighted code and an extensive API .

Want to create reveal.js presentation in a graphical editor? Try https://slides.com . It's made by the same people behind reveal.js.

Hakim's open source work is supported by GitHub sponsors . Special thanks to:

Getting started

• 🚀 Install reveal.js
• 👀 View the demo presentation
• 📖 Read the documentation
• 🖌 Try the visual editor for reveal.js at Slides.com
• 🎬 Watch the reveal.js video course (paid)

Releases 47

Sponsor this project, used by 786k.

Contributors 322

• JavaScript 59.5%

Top 10 JavaScript frameworks to create presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal.js ( 67.1k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress.js ( 37.5k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Slidev ( 31.5k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.3k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.7k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.3k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.2k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.4k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

md2googleslides ( 4.4k ⭐) — Generate Google Slides from markdown & HTML. Run from the command line or embed in another application. While it does not yet produce stunningly beautiful decks, you are encouraged to use this tool for quickly prototyping presentations.

PptxGenJS ( 2.5k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

You might also like

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Table of contents:

• jQuery HTML Presentation Frameworks
• Vanilla JS HTML Presentation Frameworks

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an iframe or add your own custom behavior using our JavaScript API.

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

• 10 Best Mobile-friendly One Page Scroll Plugins
• Prev: Weekly Web Design & Development News: Collective #330
• Next: Weekly Web Design & Development News: Collective #331

You Might Also Like

7 Best JavaScript Timeago Plugins For Human-readable Datetime Format

Top 100 Best Free jQuery Plugins From 2013

7 Best Youtube Lazy Loaders To Improve Page Speed (2024 Update)

10 Best JavaScript Dark Mode Solutions (2024 Update)

Top 100 Best Free jQuery Plugins From 2014

10 Best Free GDPR Cookie Consent Banner Plugins In JavaScript

Add Your Review

Mastering reveal.js

This video course that will teach you how to everything you need to know to create great looking presentations with reveal.js.

We'll start from the basics of installing reveal.js, creating slides and configuring your presentation. Then we'll work our way up to more interesting topics like presenting syntax highlighted code, animating slide content with Auto-Animate and using the speaker view. In the advanced videos we'll explore the reveal.js JavaScript API, plugin creation and how to customize keyboard bindings. (See full list of videos .)

Who is this for?

The course is aimed at people who are new to reveal.js as well as those of you who already understand the fundamentals but are ready to explore the full feature set.

You'll need to have a basic understanding of HTML, CSS and JavaScript. HTML is the backbone of reveal.js and used extensively throughout the course. CSS and JavaScript are mostly used for advanced videos on topics such as creating custom themes, working with the reveal.js API and editing the source code.

Who is presenting?

👋 I'm Hakim—a Swedish front-end developer and the creator of reveal.js. I co-founded and am currently working on Slides.com —a presentation platform and graphical editor built on top of reveal.js. Beyond that I love to work on visual demos and experiments at hakim.se .

I released the first version of reveal.js 10 years ago (!) and couldn't have imagined that it would eventually grow to be used by hundreds of thousands of people. I hope you'll join in and experience first hand why so many choose to create their presentations with reveal.js!

• 5h 39m total runtime
• Stream in HD
• Download in 4K
• Free updates

The course is sold via Gumroad . VAT is added at the time of purchase, if applicable. 100% money back if the course isn't a good fit for you—no questions asked.

Table of Contents

The course is divided into relatively short videos so that you can easily skip topics that aren't relevant to you or that you are already familiar with. The total runtime is 5.5 hours.

Slides.com — the reveal.js presentation editor.

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Image Backgrounds

Repeated image backgrounds, background transitions.

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide" .

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

• Try the online editor
• Source code on GitHub
• Follow me on Twitter

BY Hakim El Hattab / hakim.se

We've detected that you are using an unsupported browser. Please upgrade your browser to Internet Explorer 10 or higher.

Impress.js: Beyond the Presentation

Reinvent the presentation. <br>use impress.js and the power of css3 transforms and transitions to create a presentation for the modern browser..

This hackathon has ended

View schedule

@bartaz and ChallengePost invite designers and developers to reinvent the presentation using impress.js. impress.js is an open source presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Check out the  official demo  and  more examples  on the wiki page!

Create a browser-based presentation using impress.js that conveys content in a compelling way (≤20 slides). Choose a topic you’re already thinking about, or find a presentation or speech online and reinvent it with impress.js (check out TED , slideshare , history.com speeches , or any other resource you like).

Use existing impress.js features and add or extend features to create a browser-based presentation. Examples of potential new features include:

• new ways of navigating the presentation;
• sub-steps (showing hidden content without changing the slide);
• adding or moving steps during the presentation;
• new configuration options;
• new events; or
• anything else you can think of!

Eligibility

• Participants:   Individuals at least the age of majority where they reside at time of entry; Teams of eligible individuals
• Countries:  Global, except where prohibited by U.S. or local law

Requirements

• a browser based presentation using impress.js (≤20 slides);
• one or more screenshots of your presentation (for the gallery); and
• pull requests on the impress.js GitHub page (optional)

Hackathon Sponsors

$ 1,200 in prizes

Judges' Picks (2)

iPad mini 16 GB (Estimated retail value plus shipping and tax: $400)

Popular Choice

Devpost achievements.

Submitting to this hackathon could earn you:

How to enter

• Click “Register” to sign up.
• Visit the impress.js GitHub repo   to access examples and resources.
• Create a browser presentation (≤20 slides) . Pick a topic or find a presentation or speech online and reinvent it using impress.js. Use existing impress.js features and, if you want, add or extend features.
• Contribute pull requests. You are encouraged, but not required, to add to the project on GitHub.
• Submit your presentation by providing: 1) a URL where your presentation can be viewed; 2) screenshots of your presentation (for the site gallery); 3) link(s) to an existing presentation or speech which inspired you (optional); and 4) link(s) to any pull requests entered on the impress.js GitHub page .

Sera Koo Senior Interaction Designer, IDEO

Bartek Szopka Project Owner, impress.js

Javier de la Torre CEO and founder, Vizzuality

Judging Criteria

• Creative use of impress.js Includes creative use of existing impress.js features or API
• Presentation design Includes visual appeal using transitions and transforms, correspondence of the presentation and slides to the content, and content hierarchy and density
• Potential contribution Includes potential contribution to the impress.js project by adding or extending features

Tell your friends

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

A framework for easily creating beautiful presentations using HTML. Check out the live demo .

reveal.js comes with a broad range of features including nested slides , Markdown contents , PDF export , speaker notes and a JavaScript API . There’s also a fully featured visual editor and platform for sharing reveal.js presentations at slides.com .

Table of contents

Online editor, element attributes, slide attributes, configuration, presentation size, dependencies, ready event, auto-sliding, keyboard bindings, touch navigation, lazy loading, slide changed event, presentation state, slide states, slide backgrounds, parallax background, slide transitions, internal links, fragment events, code syntax highlighting, slide number, overview mode, fullscreen mode, embedded media, stretching elements, postmessage api, share and print speaker notes, server side speaker notes, master presentation, client presentation, socket.io server, basic setup, folder structure, more reading.

• Changelog : Up-to-date version history.
• Examples : Presentations created with reveal.js, add your own!
• Browser Support : Explanation of browser support and fallbacks.
• Plugins : A list of plugins that can be used to extend reveal.js.

Presentations are written using HTML or Markdown but there’s also an online editor for those of you who prefer a graphical interface. Give it a try at https://slides.com .

Instructions

Here’s a barebones example of a fully working reveal.js presentation:

The presentation markup hierarchy needs to be .reveal > .slides > section where the section represents one slide and can be repeated indefinitely. If you place multiple section elements inside of another section they will be shown as vertical slides. The first of the vertical slides is the “root” of the others (at the top), and will be included in the horizontal sequence. For example:

It’s possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your <section> elements and wrap the contents in a <textarea data-template> like the example below. You’ll also need to add the plugin/markdown/marked.js and plugin/markdown/markdown.js scripts (in that order) to your HTML file.

This is based on data-markdown from Paul Irish modified to use marked to support GitHub Flavored Markdown . Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

External Markdown

You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the data-separator attribute defines a regular expression for horizontal slides (defaults to ^\r?\n---\r?\n$ , a newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide’s speaker notes (defaults to note: ). The data-charset attribute is optional and specifies which charset to use when loading the external file.

When used locally, this feature requires that reveal.js runs from a local web server . The following example customises all available options:

Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.

Special syntax (in html comment) is available for adding attributes to the slide <section> elements generated by your Markdown.

Configuring marked

We use marked to parse Markdown. To customise marked’s rendering, you can pass in options when configuring Reveal :

At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.

The configuration can be updated after initialization using the configure method:

All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.

See below for a list of configuration options related to sizing, including default values:

If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings:

Reveal.js doesn’t rely on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:

You can add your own extensions using the same syntax. The following properties are available for each dependency object:

• src : Path to the script to load
• async : [optional] Flags if the script should load after reveal.js has started, defaults to false
• callback : [optional] Function to execute when the script has loaded
• condition : [optional] Function which must return true for the script to be loaded

To load these dependencies, reveal.js requires head.js (a script loading library) to be loaded before reveal.js.

A ‘ready’ event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already ‘ready’ you can call Reveal.isReady() .

Note that we also add a .ready class to the .reveal element so that you can hook into this with CSS.

Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides:

When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying autoSlideStoppable: false in your reveal.js config.

You can also override the slide duration for individual slides and fragments by using the data-autoslide attribute:

To override the method used for navigation when auto-sliding, you can specify the autoSlideMethod setting. To only navigate along the top layer and ignore vertical slides, set this to Reveal.navigateRight .

Whenever the auto-slide mode is resumed or paused the autoslideresumed and autoslidepaused events are fired.

If you’re unhappy with any of the default keyboard bindings you can override them using the keyboard config option:

You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the touch config option to false when initializing reveal.js.

If there’s some part of your content that needs to remain accessible to touch events you’ll need to highlight this by adding a data-prevent-swipe attribute to the element. One common example where this is useful is elements that need to be scrolled.

When working on presentation with a lot of media or iframe content it’s important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the viewDistance configuration option.

To enable lazy loading all you need to do is change your “src” attributes to “data-src” as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.

The Reveal object exposes a JavaScript API for controlling navigation and reading state:

A ‘slidechanged’ event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.

Some libraries, like MathJax (see #226 ), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.

The presentation’s current state can be fetched by using the getState method. A state object contains all of the information required to put the presentation back as it was when getState was first called. Sort of like a snapshot. It’s a simple object that can easily be stringified and persisted or sent over the wire.

If you set data-state="somestate" on a slide <section> , “somestate” will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

Furthermore you can also listen to these changes in state via JavaScript:

Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a data-background attribute to your <section> elements. Four different types of backgrounds are supported: color, image, video and iframe.

Color Backgrounds

All CSS color formats are supported, like rgba() or hsl().

Image Backgrounds

By default, background images are resized to cover the full page. Available options:

| Attribute | Default | Description | | :————————— | :——— | :———- | | data-background-image | | URL of the image to show. GIFs restart when the slide opens. | | data-background-size | cover | See background-size on MDN. | | data-background-position | center | See background-position on MDN. | | data-background-repeat | no-repeat | See background-repeat on MDN. |

Video Backgrounds

Automatically plays a full size video behind the slide.

Iframe Backgrounds

Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it’s not possible to interact with it by default. To make your background interactive, you can add the data-background-interactive attribute.

Background Transitions

Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing backgroundTransition: 'slide' to the Reveal.initialize() call. Alternatively you can set data-background-transition on any section with a background to override that specific transition.

If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional).

Make sure that the background size is much bigger than screen size to allow for some scrolling. View example .

The global presentation transition is set using the transition config value. You can override the global transition for a specific slide by using the data-transition attribute:

You can also use different in and out transitions for the same slide:

It’s easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute ( <section id="some-slide"> ):

You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an enabled class when it’s a valid navigation route based on the current slide.

Fragments are used to highlight individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide. Here’s an example: http://revealjs.com/#/fragments

The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:

Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.

The display order of fragments can be controlled using the data-fragment-index attribute.

When a slide fragment is either shown or hidden reveal.js will dispatch an event.

Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.

By default, Reveal is configured with highlight.js for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using <mark> to call out a line of code, add the data-noescape attribute to the <code> element.

If you would like to display the page number of the current slide you can do so using the slideNumber and showSlideNumber configuration values.

Press “Esc” or “o” keys to toggle the overview mode on and off. While you’re in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:

Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.

Add data-autoplay to your media element if you want it to automatically start playing when the slide is shown:

If you want to enable or disable autoplay globally, for all embedded media, you can use the autoPlayMedia configuration option. If you set this to true ALL media will autoplay regardless of individual data-autoplay attributes. If you initialize with autoPlayMedia: false NO media will autoplay.

Note that embedded HTML5 <video> / <audio> and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a data-ignore attribute.

Embedded iframes

reveal.js automatically pushes two post messages to embedded iframes. slide:start when the slide containing the iframe is made visible and slide:stop when it is hidden.

Sometimes it’s desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide. This can be done by adding the .stretch class to an element as seen below:

Limitations:

• Only direct descendants of a slide section can be stretched
• Only one descendant per slide section can be stretched

The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here’s an example showing how you’d make a reveal.js instance in the given window proceed to slide 2:

When reveal.js runs inside of an iframe it can optionally bubble all of its events to the parent. Bubbled events are stringified JSON with three fields: namespace, eventName and state. Here’s how you subscribe to them from the parent window:

This cross-window messaging can be toggled on or off using configuration flags.

Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use Google Chrome or Chromium and to be serving the presentation from a webserver. Here’s an example of an exported presentation that’s been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.

Export dimensions are inferred from the configured presentation size . Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the pdfMaxPagesPerSlide config option, for example Reveal.configure({ pdfMaxPagesPerSlide: 1 }) ensures that no slide ever grows to more than one printed page.

Print stylesheet

To enable the PDF print capability in your presentation, the special print stylesheet at /css/print/pdf.css must be loaded. The default index.html file handles this for you when print-pdf is included in the query string. If you’re using a different HTML template, you can add this to your HEAD:

• If you want to include speaker notes in your export, you can append showNotes=true to the query string: http://localhost:8000/?print-pdf&showNotes=true
• Open the in-browser print dialog (CTRL/CMD+P).
• Change the Destination setting to Save as PDF .
• Change the Layout to Landscape .
• Change the Margins to None .
• Enable the Background graphics option.
• Click Save .

Alternatively you can use the decktape project.

The framework comes with a few different themes included:

• black: Black background, white text, blue links (default theme)
• white: White background, black text, blue links
• league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0)
• beige: Beige background, dark text, brown links
• sky: Blue background, thin dark text, blue links
• night: Black background, thick white text, orange links
• serif: Cappuccino background, gray text, brown links
• simple: White background, black text, blue links
• solarized: Cream-colored background, dark green text, blue links

Each theme is available as a separate stylesheet. To change theme you will need to replace black below with your desired theme name in index.html:

If you want to add a theme of your own see the instructions here: /css/theme/README.md .

Speaker Notes

reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven’t written any notes. Press the ‘s’ key on your keyboard to open the notes window.

A speaker timer starts as soon as the speaker view is opened. You can reset it to 00:00:00 at any time by simply clicking/tapping on it.

Notes are defined by appending an <aside> element to a slide as seen below. You can add the data-markdown attribute to the aside element if you prefer writing notes using Markdown.

Alternatively you can add your notes in a data-notes attribute on the slide. Like <section data-notes="Something important"></section> .

When used locally, this feature requires that reveal.js runs from a local web server .

If you’re using the external Markdown plugin, you can add notes with the help of a special delimiter:

Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the showNotes config value set to true . Notes will appear along the bottom of the presentations.

When showNotes is enabled notes are also included when you export to PDF . By default, notes are printed in a semi-transparent box on top of the slide. If you’d rather print them on a separate page after the slide, set showNotes: "separate-page" .

Speaker notes clock and timers

The speaker notes window will also show:

• Time elapsed since the beginning of the presentation. If you hover the mouse above this section, a timer reset button will appear.
• Current wall-clock time
• (Optionally) a pacing timer which indicates whether the current pace of the presentation is on track for the right timing (shown in green), and if not, whether the presenter should speed up (shown in red) or has the luxury of slowing down (blue).

The pacing timer can be enabled by configuring by the defaultTiming parameter in the Reveal configuration block, which specifies the number of seconds per slide. 120 can be a reasonable rule of thumb. Timings can also be given per slide <section> by setting the data-timing attribute. Both values are in numbers of seconds.

In some cases it can be desirable to run notes on a separate device from the one you’re presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:

Install Node.js (4.0.0 or later)

• Run npm install
• Run node plugin/notes-server

Multiplexing

The multiplex plugin allows your audience to view the slides of the presentation you are controlling on their own phone, tablet or laptop. As the master presentation navigates the slides, all client presentations will update in real time. See a demo at https://reveal-js-multiplex-ccjbegmaii.now.sh/ .

The multiplex plugin needs the following 3 things to operate:

• Master presentation that has control
• Client presentations that follow the master
• Socket.io server to broadcast events from the master to the clients

More details:

Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter’s) computer. (It’s safer to run the master presentation from your own computer, so if the venue’s Internet goes down it doesn’t stop the show.) An example would be to execute the following commands in the directory of your master presentation:

• npm install node-static

If you want to use the speaker notes plugin with your master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute node plugin/notes-server in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server.

You can then access your master presentation at http://localhost:1947

Example configuration:

Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via http://example.com/path/to/presentation/client/index.html , with the configuration below causing them to connect to the socket.io server as clients.

Server that receives the slideChanged events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:

• npm install
• node plugin/multiplex

Or you can use the socket.io server at https://reveal-js-multiplex-ccjbegmaii.now.sh/ .

You’ll need to generate a unique secret and token pair for your master and client presentations. To do so, visit http://example.com/token , where http://example.com is the location of your socket.io server. Or if you’re going to use the socket.io server at https://reveal-js-multiplex-ccjbegmaii.now.sh/ , visit https://reveal-js-multiplex-ccjbegmaii.now.sh/token .

You are very welcome to point your presentations at the Socket.io server running at https://reveal-js-multiplex-ccjbegmaii.now.sh/ , but availability and stability are not guaranteed.

For anything mission critical I recommend you run your own server. The easiest way to do this is by installing now . With that installed, deploying your own Multiplex server is as easy running the following command from the reveal.js folder: now plugin/multiplex .

socket.io server as file static server

The socket.io server can play the role of static file server for your client presentation, as in the example at https://reveal-js-multiplex-ccjbegmaii.now.sh/ . (Open https://reveal-js-multiplex-ccjbegmaii.now.sh/ in two browsers. Navigate through the slides on one, and the other will update to match.)

It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don’t want to use speaker notes). (Open https://reveal-js-multiplex-ccjbegmaii.now.sh/ in two browsers. Navigate through the slides on one, and the other will update to match. Navigate through the slides on the second, and the first will update to match.) This is probably not desirable, because you don’t want your audience to mess with your slides while you’re presenting. ;)

If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the MathJax library. To use it you’ll need to include it as a reveal.js dependency, find our more about dependencies here .

The plugin defaults to using LaTeX but that can be adjusted through the math configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you’ll need to download a copy of the library and adjust the mathjax configuration value.

Below is an example of how the plugin can be configured. If you don’t intend to change these values you do not need to include the math config object at all.

Read MathJax’s documentation if you need HTTPS delivery or serving of specific versions for stability.

Installation

The basic setup is for authoring presentations only. The full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.

The core of reveal.js is very easy to install. You’ll simply need to download a copy of this repository and open the index.html file directly in your browser.

Download the latest version of reveal.js from https://github.com/hakimel/reveal.js/releases

Unzip and replace the example contents in index.html with your own

Open index.html in a browser to view it

Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.

• Clone the reveal.js repository $ git clone https://github.com/hakimel/reveal.js.git
• Navigate to the reveal.js folder $ cd reveal.js
• Install dependencies $ npm install
• Serve the presentation and monitor source files for changes $ npm start

Open http://localhost:8000 to view your presentation

You can change the port by using npm start -- --port=8001 .

• css/ Core styles without which the project does not function
• js/ Like above but for JavaScript
• plugin/ Components that have been developed as extensions to reveal.js
• lib/ All other third party assets (JavaScript, CSS, fonts)

MIT licensed

Copyright (C) 2017 Hakim El Hattab, http://hakim.se