Welcome to Reveal.js

A Beautiful Presentation Framework

Press Space or arrow keys to navigate

What is Reveal.js?

Reveal.js is an open-source HTML presentation framework that enables anyone with a web browser to create beautiful presentations.

  • 🎨 Beautiful themes and transitions
  • 📝 Markdown support
  • 💻 Code syntax highlighting
  • 📱 Mobile-friendly
  • 🔌 Extensible with plugins

Navigation

You can navigate in multiple directions:

  • ← → for horizontal slides
  • ↑ ↓ for vertical slides
  • Press down arrow to see a vertical slide

Vertical Slide

This is a nested vertical slide!

Press down again for more, or right to continue horizontally.

More Vertical Content

You can nest as many vertical slides as you want.

Press up to go back or right to continue.

Code Highlighting

Reveal.js supports beautiful syntax highlighting:


def greet(name):
    """Greet someone with a friendly message."""
    
    message = f"Hello, {name}!"
    print(message)
    return message

result = greet("World")
        

Use data-line-numbers to highlight specific lines

JavaScript Example


// Async/await example
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

// Usage
fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(err => console.error(err));
        

Custom Backgrounds

You can set custom background colors for each slide.

Press down to see more background options.

Different Color

Each slide can have its own background.

Gradient Background

You can also use gradients!

Slide Transitions

This slide uses a zoom transition.

Other options include:

  • none
  • fade
  • slide
  • convex
  • concave
  • zoom

Fragment Animations

Content can appear incrementally:

Fade in

Slide up while fading in

Highlight in red

Grow

Shrink

Speaker Notes

Press S to open the speaker view with notes.

This is useful for presentations where you need presenter notes.

Useful Keyboard Shortcuts

Space / Arrow keys Navigate slides
F Fullscreen mode
S Speaker notes view
O / Esc Slide overview
B / . Pause (black screen)
? Show help

Thank You!

Questions?

Press Esc or O to see slide overview
Press ? to see all keyboard shortcuts