Skip to content
Get packs

Guide · Open source

How to use Spectacle: build React slides and live code demos

Updated · written with AI from the project's own documentation and checked against our catalogue data

Spectacle is a ReactJS based presentation library by Formidable Labs. You write slides as React components in JSX, so a deck is ordinary code that can run live examples during a talk. This guide covers what you need, how to install the package, and how to think about building slides with it.

SpectacleFormidableLabs/spectacle · ★ 10.2k · MIT

Quick start

  1. 1Check prerequisites. Confirm Node.js and npm are installed on your machine.
  2. 2Install the package. Run npm install spectacle in your project folder.
  3. 3Read the docs. Open the docs site linked from the README to learn how presentations are structured.
  4. 4Write your first slides. Create slides as React components using JSX.
  5. 5Embed a live example. Add a running code example inside a slide where your talk needs one.
  6. 6Keep the deck in version control. Store the project in Git so changes to slides are tracked.

What you need before you install Spectacle

Spectacle is distributed as an npm package, so you need Node.js and npm on your machine. The project is built on React, so it fits best if you already know how to write React components and JSX.

Spectacle is a code-based library. The README describes it as a ReactJS based presentation library and does not mention a visual slide editor, so plan to build your slides in code.

  • Node.js and npm installed
  • Basic familiarity with React components and JSX

Install the spectacle package

Add Spectacle to your project with npm. The README gives this single install command for the spectacle package.

npm install spectacle

Build slides as React components

Because Spectacle slides are JSX, each slide is written as React code rather than dragged together in an editor. This is what lets you put a live, running code example directly inside a slide.

Keep your deck in a normal project folder. Since the slides are plain code, you can store them in version control alongside the rest of your work, which the library's intended audience of teams often does.

  • Write slides as JSX components in your React project
  • Embed live code examples inside the talk
  • Track changes to the deck with version control

Get help and read the docs

The README points to a docs site for details on using the library. The docs source lives in the repository's docs folder.

If you have a question, the README asks you to submit an issue using the question template in the Spectacle GitHub repository. You can also open an issue or make a pull request to improve the documentation.

  • Read the docs site linked from the README
  • Ask questions by opening an issue with the Question template
  • Suggest documentation fixes through pull requests

Understand the project's maintenance status

The README states that Formidable is actively working on Spectacle and expects to keep working on it for the foreseeable future. Bug reports, feature requests and pull requests are welcome. Contribution details are in the project's contributing guide.

What people use it for

  • Giving a technical talk that runs live code examples between slides
  • Building a conference deck as a React project that lives in a Git repository
  • Creating slides for a team that already reviews changes through pull requests

Frequently asked questions

How do I install Spectacle?

Install it from npm with npm install spectacle. The README lists Node.js and npm as the prerequisites.

Is Spectacle free to use?

Spectacle is released under the MIT licence, according to its repository details. Check the licence file in the repository for the full terms.

Do I need to know React to use Spectacle?

Yes. Spectacle is a React library and slides are written as React components in JSX, so you need to be comfortable with React.

Does Spectacle have a drag-and-drop slide editor?

The README describes Spectacle as a code-based library and does not mention a visual editor. If you want drag-and-drop slides, it is not the right tool.

Can I embed live code in my slides?

Yes. Because slides are ordinary React code, you can embed live, running code examples inside a talk, which is the main reason to choose Spectacle.

What are alternatives to Spectacle?

Comparable projects include reveal.js, Slidev and MDX Deck. Pick based on whether you want to build slides in React specifically.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Spectacle suits React developers who want slides as code, especially for technical talks with live demos. It is a poor fit for people who want a drag-and-drop editor or who do not write code, so look at a visual tool instead.

Install options & downloads