What is spectacle?

formidablelabs/spectacle — explained in plain English

Analysis updated 2026-06-24

★ 10,130TypeScriptAudience · developerComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((repo))
    What it does
      Browser slide decks
      JSX slide authoring
      Live code demos
    Tech Approach
      React components
      JSX syntax
      Monorepo structure
    Key Features
      Live code execution
      Web-based output
      Shareable as URL
    Use Cases
      Developer talks
      Tech conferences
      Workshop demos
    Audience
      Developers
      Tech presenters
    Contribution
      Bug reports
      Pull requests
      Docs in repo

mindmap root((repo)) What it does Browser slide decks JSX slide authoring Live code demos Tech Approach React components JSX syntax Monorepo structure Key Features Live code execution Web-based output Shareable as URL Use Cases Developer talks Tech conferences Workshop demos Audience Developers Tech presenters Contribution Bug reports Pull requests Docs in repo

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Build a conference talk slide deck using React components instead of PowerPoint and host it as a shareable webpage.

USE CASE 2

Create a live coding demonstration inside a slide presentation where code actually runs in the browser during your talk.

USE CASE 3

Share your developer presentation as a URL so attendees can follow along on any device without downloading a file.

USE CASE 4

Embed interactive code examples in a technical workshop presentation that participants can view and modify in real time.

What is it built with?

TypeScriptReactJSXJavaScript

How does it compare?

	formidablelabs/spectacle	numman-ali/openskills	tweenjs/tween.js
Stars	10,130	10,130	10,119
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	moderate	easy	easy
Complexity	2/5	2/5	2/5
Audience	developer	vibe coder	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires a React development environment and familiarity with JSX syntax to write slide components.

So what is it?

Spectacle is a library for building presentation slide decks using React, a popular JavaScript framework for building web interfaces. Instead of using a traditional tool like PowerPoint or Keynote, you write your slides as React components using JSX, which is a syntax that mixes JavaScript and HTML-like markup. The result is a presentation that runs in a web browser. The project is maintained by Formidable Labs (now part of NearForm) and is described as actively supported. The main package is called spectacle, and this GitHub repository is a monorepo, meaning it contains the core library alongside related tools and examples in a single place. The README for this repository is brief and mostly links out to the external documentation site for detailed usage guidance. The core value of the library, per its description, is that it lets you write slide content using JSX syntax and also live-demo code directly within a presentation, which makes it particularly suited to developer-focused talks where showing running code is part of the content. The project is open source and accepts bug reports, feature requests, and pull requests. Documentation source lives in the repository itself under a docs folder.

Copy-paste prompts

Prompt 1

Using Spectacle, write the JSX code for a three-slide presentation: a title slide, a bullet point slide, and a slide with a live code demo that renders a React component.

Prompt 2

How do I add a live code execution block to a Spectacle slide so the audience can see a React component render in real time during my conference talk?

Prompt 3

How do I deploy my Spectacle presentation as a static website so I can share it as a URL with my audience instead of sending a file?

Prompt 4

What is the monorepo structure of the Spectacle project and which npm package should I install to get started building slides?

Prompt 5

How do I style a Spectacle slide with a custom font, background color, and code syntax highlighting theme?

Frequently asked questions