# Spectacle — Build Interactive Presentations with React

> Spectacle is a React-based presentation library that lets developers create slide decks using JSX components, with built-in animations, themes, and live code editing.

## Install

Save in your project root:

# Spectacle — Build Interactive Presentations with React

## Quick Use
```bash
npx create-spectacle
cd my-presentation
npm start
# Open http://localhost:3000 to view slides
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-a0283974
Author: AI Open Source