{"id":12058,"library":"spectacle","title":"Spectacle: React Presentation Framework","description":"Spectacle is an actively maintained, ReactJS-powered library for creating interactive and dynamic presentations. As of version 10.2.3, it provides a comprehensive suite of React components (e.g., `Deck`, `Slide`, `FlexBox`, `Heading`) that enable developers to build highly customizable slideshows using standard web technologies. The library typically receives regular patch and minor updates, addressing bug fixes and introducing new features like the recent `FitText` component in v10.2.0. Spectacle differentiates itself by allowing the full power of React and its ecosystem to be leveraged for presentation design, offering a developer-centric alternative to traditional presentation software and enabling complex animations, data visualizations, and interactive elements directly within slides.","status":"active","version":"10.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/FormidableLabs/spectacle","tags":["javascript","typescript"],"install":[{"cmd":"npm install spectacle","lang":"bash","label":"npm"},{"cmd":"yarn add spectacle","lang":"bash","label":"yarn"},{"cmd":"pnpm add spectacle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering React components.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Spectacle is an ESM-first library. CommonJS `require` may lead to incorrect bundling or runtime errors, especially with named exports.","wrong":"const { Deck } = require('spectacle');","symbol":"Deck","correct":"import { Deck, Slide, Heading, Text } from 'spectacle';"},{"note":"Most Spectacle components are named exports. Attempting to import them as default exports will result in undefined.","wrong":"import FlexBox from 'spectacle';","symbol":"FlexBox","correct":"import { FlexBox } from 'spectacle';"},{"note":"While `import * as` works, directly importing `createTheme` is the idiomatic way to configure themes for your presentation.","wrong":"import * as spectacle from 'spectacle'; const theme = spectacle.createTheme(...);","symbol":"createTheme","correct":"import { createTheme } from 'spectacle';"}],"quickstart":{"code":"import React from 'react';\nimport {\n  Deck,\n  Slide,\n  Heading,\n  Text,\n  Box,\n  FlexBox,\n  createTheme,\n} from 'spectacle';\n\nconst theme = createTheme(\n  {\n    primary: 'white',\n    secondary: '#1F2022',\n    tertiary: '#03A9F4',\n    quaternary: '#CECECE',\n  },\n  {\n    primary: 'Inter',\n    secondary: 'Helvetica',\n  }\n);\n\nfunction Presentation() {\n  return (\n    <Deck theme={theme}>\n      <Slide backgroundColor=\"primary\">\n        <Heading color=\"secondary\">Welcome to Spectacle!</Heading>\n        <Text color=\"tertiary\">\n          A ReactJS Powered Presentation Framework\n        </Text>\n      </Slide>\n      <Slide backgroundColor=\"secondary\">\n        <FlexBox height=\"100%\" flexDirection=\"column\" justifyContent=\"center\" alignItems=\"center\">\n          <Heading fontSize=\"h2\" color=\"primary\">Key Features</Heading>\n          <Box margin=\"20px 0\">\n            <Text color=\"quaternary\">🔥 Full React Ecosystem</Text>\n            <Text color=\"quaternary\">🎨 Highly Customizable Themes</Text>\n            <Text color=\"quaternary\">🚀 Interactive Slides</Text>\n          </Box>\n        </FlexBox>\n      </Slide>\n      <Slide backgroundColor=\"tertiary\">\n        <Heading fontSize=\"h3\" color=\"primary\">Get Started</Heading>\n        <Text color=\"secondary\">\n          Install with `npm install spectacle react react-dom`\n        </Text>\n        <Text color=\"secondary\">\n          Then run your React app!\n        </Text>\n      </Slide>\n    </Deck>\n  );\n}\n\nexport default Presentation;","lang":"typescript","description":"This quickstart demonstrates how to create a basic Spectacle presentation using the `Deck`, `Slide`, `Heading`, `Text`, `Box`, and `FlexBox` components, along with a custom theme."},"warnings":[{"fix":"Upgrade `spectacle` to `10.2.2` or later. Review your component code for any direct access or reliance on `defaultProps` on Spectacle components; prefer using props directly.","message":"Spectacle v10.2.2 replaced `defaultProps` with the `attrs` method for React 19 compatibility. While primarily an internal change, consumers relying on direct access or manipulation of `defaultProps` on Spectacle components in older versions (pre-10.2.2) may experience unexpected behavior or build failures when upgrading to React 19. Ensure you are on Spectacle `10.2.2` or newer for React 19 support.","severity":"breaking","affected_versions":"<10.2.2"},{"fix":"Always use the latest version of `create-spectacle` for scaffolding new projects: `npx create-spectacle@latest`.","message":"The `create-spectacle` CLI tool, used for scaffolding new projects, was updated in `create-spectacle@0.4.0` to use an ESM/import map-based one-page setup. Older `create-spectacle` versions might generate projects with outdated configurations or module resolution patterns.","severity":"gotcha","affected_versions":"<create-spectacle@0.4.0"},{"fix":"Ensure your project's `react` and `react-dom` versions satisfy Spectacle's peer dependency requirement (`>=18.0.0`). Use `npm ls react react-dom` to check installed versions and `npm install react@^18.0.0 react-dom@^18.0.0` to update if necessary.","message":"Spectacle requires `react` and `react-dom` as peer dependencies. Mismatched versions between Spectacle and your project's React installation (e.g., Spectacle expecting React 18 but your project using React 17) can lead to various runtime errors, including issues with hooks or rendering.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `spectacle@10.2.3` or newer to restore correct heading styling.","message":"The `Heading` component's secondary color styling was inadvertently lost in v10.2.2 due to the internal `defaultProps` replacement. This was fixed in v10.2.3. If using v10.2.2, your headings might not apply the correct theme color.","severity":"gotcha","affected_versions":"10.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure all Spectacle components are imported as named exports: `import { Deck, Slide } from 'spectacle';`.","cause":"Incorrectly importing Spectacle components, e.g., using `import Component from 'spectacle';` instead of `import { Component } from 'spectacle';`.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."},{"fix":"Upgrade your project's `react` and `react-dom` dependencies to `^18.0.0` or higher to match Spectacle's peer dependency requirements. Example: `npm install react@^18 react-dom@^18`.","cause":"React version mismatch. Spectacle versions >=10.2.2 require React 18 or higher. If your project uses an older React version, this error can occur.","error":"TypeError: Cannot read properties of undefined (reading 'Fragment')"},{"fix":"Ensure your project is configured for ESM and use `import { ... } from 'spectacle';` syntax. If using webpack, ensure `resolve.fullySpecified: false` is not set or that your `tsconfig.json` `module` option is appropriate (e.g., `esnext`, `node16`).","cause":"Mixing CommonJS `require()` syntax with an ESM-first library, or incorrect module resolution configuration in older bundlers.","error":"Module not found: Error: Can't resolve 'spectacle' in '...' OR `ReferenceError: exports is not defined`"}],"ecosystem":"npm"}