Spectacle — Build Interactive Presentations with React

Introduction

Spectacle is a presentation framework built on React. Instead of clicking through a GUI slide editor, developers write slides as JSX components, version them in Git, and deploy them as web apps. It supports animations, presenter mode, and embedded live code editors.

What Spectacle Does

• Renders slide decks as React component trees in the browser
• Provides built-in layout primitives for headings, lists, code blocks, and images
• Supports slide transitions, animations, and step-through reveals
• Includes a presenter mode with speaker notes and slide previews
• Embeds live-editable code blocks for technical talks

Architecture Overview

Spectacle uses a Deck component that manages slide state, keyboard navigation, and URL-based routing. Each Slide component renders its children as flex-box content. The animation system uses React Spring for declarative transitions between steps. Themes are defined as JavaScript objects controlling colors, fonts, and spacing, and can be swapped at the Deck level.

Self-Hosting & Configuration

• Scaffold a project: npx create-spectacle
• Write slides in src/index.js or .tsx using Spectacle components
• Customize the theme by passing a theme object to the Deck component
• Deploy as a static site: npm run build produces HTML/JS output
• Export slides to PDF via the built-in print stylesheet

Key Features

• Slides are React components, enabling dynamic content, data fetching, and interactivity
• Markdown mode allows writing slides in MDX for simpler decks
• Presenter mode shows current slide, next slide, speaker notes, and a timer
• Code highlighting with live editing lets audiences interact during talks
• Version control with Git tracks every slide change

Comparison with Similar Tools

• Slidev — Vue-based with Markdown; Spectacle uses JSX and React
• reveal.js — HTML/Markdown framework; Spectacle is React-native with component composition
• Marp — Markdown-to-slide CLI; simpler but less interactive than Spectacle
• Google Slides/Keynote — GUI editors with collaboration; Spectacle is code-first for developer audiences

FAQ

Q: Can I write slides in Markdown instead of JSX? A: Yes. Spectacle supports MDX, letting you mix Markdown with React components in the same file.

Q: How do I add animations to slides? A: Use the Appear component to animate children in sequence, or apply custom React Spring transitions.

Q: Can I embed live code in slides? A: Yes. The CodePane component supports syntax highlighting, and you can add editable code blocks with community plugins.

Q: How do I export slides to PDF? A: Open the presentation in your browser, append ?exportMode=true to the URL, and use the browser print dialog.

Sources

• https://github.com/FormidableLabs/spectacle
• https://commerce.nearform.com/open-source/spectacle/