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.

FormidableLabsspectacle

Features

Star history