FormidableLabs/spectacle
Spectacle
Spectacle is a React-based presentation framework that enables developers to author slide decks using JSX and MDX syntax. It provides a component-driven approach to building presentations, where slides are composed as React components with declarative layouts, theme-driven styling, and step-based animation sequencing.
The framework distinguishes itself through its support for live coding demonstrations within slides, allowing presenters to execute and display code directly during a talk. It includes a presenter mode with dual-view architecture that shows speaker notes, a timer, and upcoming slides on a separate screen while the audience sees the main presentation. Keyboard-driven navigation, a command palette overlay, and fullscreen mode toggle provide comprehensive control over slide flow, while a printer-friendly PDF export option allows for distribution of the deck.
Spectacle offers a range of predefined slide layouts including centered content, columns, code blocks, images, tables, and quotes, all styled through a theme-driven system that maps semantic tokens to colors, typography, and spacing. The framework processes MDX files through a webpack loader, enabling authors to combine Markdown content with React components, and includes a development server with project scaffolding for quick setup.
Features
- Presentation Frameworks - Builds slide decks using React components and JSX syntax for live-coding presentations.
- Presentation Deck Rendering - Wraps the entire presentation and carries overarching slide logic, theme, and template context.
- Presentation Authoring - Enables creating slide decks using React components and JSX syntax for interactive presentations.
- MDX Content Management - Processes MDX files through a webpack loader to convert Markdown with JSX into slide components.
- Presentation Loaders - Provides a webpack loader that transforms MDX files into Spectacle slide components.
- Presentation Platforms - Enables developers to demo code directly within slides using React and JSX syntax.
- JSX Rendering Components - Renders slides as React components using JSX syntax for declarative layout and composition.
- Slide Template Overlays - Renders a persistent overlay on every slide, typically containing controls and progress indicators.
- Live Code Execution - Supports live coding demonstrations with real-time code execution directly within slides.
- Presenter View Synchronization - Implements a dual-view presenter mode showing notes, timer, and upcoming slides on a separate screen.
- Slide Navigation Controls - Controls presentation flow with arrow keys and shortcuts for overview, presenter, and fullscreen modes.
- Presenter Views - Shows slide notes, a timer, and the upcoming slide in a separate view for the presenter.
- Speaker Views - Provides a presenter mode with speaker notes, timer, and upcoming slide preview on a separate screen.
- Slide Layout and Styling - Offers a set of predefined slide layout components for common visual structures.
- Slide Content Authoring - Defines slide content and layout using React components and JSX syntax within the framework.
- JSX-Authored Decks - Creates presentations with declarative JSX markup and supports MDX for mixed Markdown and React content.
- Slide Wrappers - Ships a Slide component that wraps each presentation slide and supports transition overrides.
- Web-Based Presentation Authoring Tools - Offers a component-based approach to authoring slides with themes, layouts, and animations.
- Markdown Slide Renderers - Converts Markdown text into slide components, supporting single slides or multi-slide decks.
- Styling and Theming Systems - Applies consistent visual styling by mapping semantic theme tokens to colors, typography, and spacing.
- Slide Text Rendering - Renders textual content like headings, paragraphs, and lists with theme-based styling.
- Presentation Authoring - Processes MDX files to combine Markdown content with React components for slide creation.
- Centered Slide - Provides a centered content layout that places all slide content in a single column.
- Stepped Animation Controllers - Provides a hook-based step sequence mechanism to control component visibility across slide steps.
- Presentation Theming - Sets a consistent color palette and typography across all slides by mapping semantic labels to CSS values.
- Vertical Column Layouts - Divides slides into row-based column layouts using JSON configuration and section delimiters.
- Speaker Note Displays - Renders notes visible only in presenter mode, hidden from the audience view.
- PDF Exporting - Generates a printer-friendly PDF export of the slideshow for distribution.
- Persistent Overlays - Provides a template overlay component that renders persistent elements on every slide.
- Speaker Note Displays - Shows slide notes and preview on a separate screen while the audience sees the main presentation.
- Keyboard Shortcuts - Moves forward or backward through slides using arrow keys and toggles modes with shortcuts.
- Syntax Highlighters - Displays code blocks with syntax highlighting, line numbers, and range highlighting.
- Single Code Panes - Places a single code pane on a slide with an optional title and language specification.
- Layout and Structural Components - Includes structural layout components like boxes, flex containers, and grids for slide content.
- Resources - Listed in the “Resources” section of the Awesome Redux awesome list.
