Demo Flows

Slideshow Demo

Navigate through presentation slides using React Flow as the interface

How to Navigate
Control the slideshow presentation

Mouse Navigation

Click on any slide to navigate to it. The view will automatically center on the selected slide.

Keyboard Controls

  • • Arrow Keys: Navigate between slides
  • • Space: Next slide
  • • Shift + Space: Previous slide
  • • Home: Go to first slide
  • • End: Go to last slide

Slide Content

Each slide can contain Markdown content, allowing for rich text formatting including headers, lists, and emphasis.

Try This

  • • Use arrow keys to navigate
  • • Click on different slides
  • • Zoom in/out to see more slides
  • • Pan around to explore the flow
Features Demonstrated
  • Custom Slide Nodes
  • Keyboard Navigation
  • Viewport Control
  • Markdown Rendering
  • Dynamic Layouts
Use Cases
  • • Interactive presentations
  • • Educational content
  • • Documentation walkthroughs
  • • Story-driven interfaces
  • • Tutorial systems