DOCSEARCHbyAlgolia
Submit Docs

Spectacle Documentation

repository·main·Indexed 26 days ago

https://github.com/formidablelabs/spectacle

A ReactJS-based presentation library for creating slide decks using React components and Markdown/MDX. The ecosystem includes the core spectacle package, create-spectacle for project scaffolding, and spectacle-mdx-loader for webpack integration. It provides a comprehensive set of API components including Deck, Slide, and various typography, layout, and table tags, as well as animation tools like the Stepper component, Appear component, and useSteps hook.

Tokens
24K
Snippets
40
Records
113
Agent score
95%

What's inside Spectacle

  1. Overview of Spectacle

    main
    Spectacle is a ReactJS-based presentation library. It is distributed as a monorepo containing the core spectacle package, various example implementations (JS, MD, MDX, TS), and supporting tools like create-spectacle and spectacle-mdx-loader.

  3. Initialize a new Spectacle project with create-spectacle

    main

    Use create-spectacle to generate a boilerplate for your Spectacle presentation. You can run the generator using your preferred package manager. After running the command, you will be prompted to provide project details, and a new directory will be created based on the project name provided.

    yarn create spectacle # yarn
npm create spectacle # npm
npx create-spectacle # using npx
pnpm create spectacle # using pnpm

  4. Export Spectacle slides to PDF

    main

    You can export your presentation to PDF by appending query parameters to your presentation URL. This flattens the presentation, allowing you to use your browser's 'Print to PDF' functionality.

    • Standard Export: Append ?exportMode=true to the URL to flatten the slides for PDF export.
    • Black & White Export: Append ?exportMode=true&printMode=true to the URL to generate a printer-friendly, flattened, black & white version of your slideshow.

  5. Get started with Spectacle using the CLI

    main

    The fastest way to start a new Spectacle project is using the create-spectacle CLI. This tool sets up a new project with a default deck and all necessary dependencies.

    Available templates:

    • One Page: A single HTML file using htm. Recommended for quick decks as it requires no server.
    • Markdown: A React app using webpack that uses Markdown for content via the MarkdownSlideSet component.
    • React using Vite: A React app using Vite. Recommended if you plan to use many additional npm libraries.
    • React using webpack: A React app using webpack.
    $ npx create-spectacle

  9. Use TypeScript with Spectacle

    main
    Spectacle has first-class TypeScript support. Types are shipped directly with the package, so you can use Spectacle in .ts or .js presentations without importing separate type definitions. TypeScript is the default language for Spectacle and the create-spectacle CLI, requiring no additional configuration.

  10. Use Scaled Spacing with the `space` theme key

    main

    The space key is an array of integer values used as a scale for margin, padding, and grid-gap. You can access a specific value from the scale by passing its index as a numeric prop to a component.

    Example with a custom scale:

    let theme = {
  space: [16, 24, 32]
};

// Using index 2 (which is 32) for padding
<Text padding={2}>Hello World</Text>
    let theme = {
  space: [16, 24, 32]
};

<Text padding={2}>Hello World</Text>