# formidablelabs/spectacle

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/formidablelabs-spectacle).**

10,136 stars · 699 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/FormidableLabs/spectacle
- Homepage: https://commerce.nearform.com/open-source/spectacle/
- awesome-repositories: https://awesome-repositories.com/repository/formidablelabs-spectacle.md

## Topics

`keynote` `presentation` `react` `reactjs` `slides` `spectacle`

## Description

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.

## Tags

### Part of an Awesome List

- [Presentation Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/presentation-frameworks.md) — Builds slide decks using React components and JSX syntax for live-coding presentations.
- [Resources](https://awesome-repositories.com/f/awesome-lists/more/resources.md) — Listed in the “Resources” section of the Awesome Redux awesome list.

### User Interface & Experience

- [Presentation Deck Rendering](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/presentation-deck-rendering.md) — Wraps the entire presentation and carries overarching slide logic, theme, and template context. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Presentation Authoring](https://awesome-repositories.com/f/user-interface-experience/widget-frameworks/jsx/presentation-authoring.md) — Enables creating slide decks using React components and JSX syntax for interactive presentations.
- [JSX Rendering Components](https://awesome-repositories.com/f/user-interface-experience/jsx-rendering-components.md) — Renders slides as React components using JSX syntax for declarative layout and composition.
- [Slide Template Overlays](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/html-template-renderers/template-component-renderers/slide-template-overlays.md) — Renders a persistent overlay on every slide, typically containing controls and progress indicators. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Live Code Execution](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/live-code-execution.md) — Supports live coding demonstrations with real-time code execution directly within slides.
- [Presenter View Synchronization](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presenter-view-synchronization.md) — Implements a dual-view presenter mode showing notes, timer, and upcoming slides on a separate screen.
- [Slide Navigation Controls](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/slide-navigation-links/slide-navigation-controls.md) — Controls presentation flow with arrow keys and shortcuts for overview, presenter, and fullscreen modes.
- [Presenter Views](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/presentation-modes/presenter-views.md) — Shows slide notes, a timer, and the upcoming slide in a separate view for the presenter. ([source](https://commerce.nearform.com/open-source/spectacle/docs/presenting-controls))
- [Speaker Views](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/presentation-modes/speaker-views.md) — Provides a presenter mode with speaker notes, timer, and upcoming slide preview on a separate screen.
- [Slide Layout and Styling](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling.md) — Offers a set of predefined slide layout components for common visual structures. ([source](https://commerce.nearform.com/open-source/spectacle/docs/react-slide-layouts))
- [Slide Content Authoring](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-content-authoring.md) — Defines slide content and layout using React components and JSX syntax within the framework. ([source](https://commerce.nearform.com/open-source/spectacle/docs/))
- [JSX-Authored Decks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-content-authoring/presentation-decks/jsx-authored-decks.md) — Creates presentations with declarative JSX markup and supports MDX for mixed Markdown and React content.
- [Slide Wrappers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-content-authoring/slide-wrappers.md) — Ships a Slide component that wraps each presentation slide and supports transition overrides. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Web-Based Presentation Authoring Tools](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/web-based-presentation-authoring-tools.md) — Offers a component-based approach to authoring slides with themes, layouts, and animations.
- [Markdown Slide Renderers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/web-based-presentation-authoring-tools/markdown-slide-renderers.md) — Converts Markdown text into slide components, supporting single slides or multi-slide decks. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Styling and Theming Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems.md) — Applies consistent visual styling by mapping semantic theme tokens to colors, typography, and spacing.
- [Slide Text Rendering](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/content-specific-styling/rendered-content-styling/slide-text-rendering.md) — Renders textual content like headings, paragraphs, and lists with theme-based styling. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Stepped Animation Controllers](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/stepped-animation-controllers.md) — Provides a hook-based step sequence mechanism to control component visibility across slide steps. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Presentation Theming](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching/presentation-theming.md) — Sets a consistent color palette and typography across all slides by mapping semantic labels to CSS values. ([source](https://commerce.nearform.com/open-source/spectacle/docs/themes))
- [Vertical Column Layouts](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/vertical-column-layouts.md) — Divides slides into row-based column layouts using JSON configuration and section delimiters. ([source](https://commerce.nearform.com/open-source/spectacle/docs/md-slide-layouts))
- [Speaker Note Displays](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presenter-view-synchronization/speaker-note-displays.md) — Renders notes visible only in presenter mode, hidden from the audience view. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [PDF Exporting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/pdf-exporting.md) — Generates a printer-friendly PDF export of the slideshow for distribution.
- [Persistent Overlays](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-content-authoring/persistent-overlays.md) — Provides a template overlay component that renders persistent elements on every slide. ([source](https://commerce.nearform.com/open-source/spectacle/docs/themes))
- [Speaker Note Displays](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/speaker-tools/remote-presentation-controls/speaker-note-displays.md) — Shows slide notes and preview on a separate screen while the audience sees the main presentation. ([source](https://commerce.nearform.com/open-source/spectacle/docs/))
- [Keyboard Shortcuts](https://awesome-repositories.com/f/user-interface-experience/presentation-navigation/keyboard-shortcuts.md) — Moves forward or backward through slides using arrow keys and toggles modes with shortcuts. ([source](https://commerce.nearform.com/open-source/spectacle/docs/presenting-controls))
- [Syntax Highlighters](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighters.md) — Displays code blocks with syntax highlighting, line numbers, and range highlighting. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))
- [Single Code Panes](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces/tabbed-code-blocks/multi-pane-code-displays/single-code-panes.md) — Places a single code pane on a slide with an optional title and language specification. ([source](https://commerce.nearform.com/open-source/spectacle/docs/react-slide-layouts))
- [Layout and Structural Components](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/layout-structural-components.md) — Includes structural layout components like boxes, flex containers, and grids for slide content. ([source](https://commerce.nearform.com/open-source/spectacle/docs/api-reference))

### Content Management & Publishing

- [MDX Content Management](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/mdx-content-management.md) — Processes MDX files through a webpack loader to convert Markdown with JSX into slide components.
- [Presentation Loaders](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/mdx-processors/presentation-loaders.md) — Provides a webpack loader that transforms MDX files into Spectacle slide components. ([source](https://commerce.nearform.com/open-source/spectacle/docs/extensions))
- [Centered Slide](https://awesome-repositories.com/f/content-management-publishing/markdown-documentation/template-driven-generators/content-layouts/centered-slide.md) — Provides a centered content layout that places all slide content in a single column. ([source](https://commerce.nearform.com/open-source/spectacle/docs/md-slide-layouts))

### Education & Learning Resources

- [Presentation Platforms](https://awesome-repositories.com/f/education-learning-resources/interview-preparation/live-coding-platforms/presentation-platforms.md) — Enables developers to demo code directly within slides using React and JSX syntax.

### Web Development

- [Presentation Authoring](https://awesome-repositories.com/f/web-development/mdx-components/presentation-authoring.md) — Processes MDX files to combine Markdown content with React components for slide creation.