herobrauni / spectacle

ReactJS based Presentation Library

Spectacle

A ReactJS-based Presentation Library.

Looking for a quick preview of what you can do with Spectacle? Check out our live Demo Deck here.

Have a question about Spectacle? Submit an issue in this repository using the "Question" template.

Contents

• Getting Started
  • Classic Spectacle
  • Spectacle MDX
  • One Page
• Basic Concepts
  • Main file
  • Themes
    • createTheme(colors, fonts)
  • Development
  • Build & Deployment
  • Presenting
  • Controls
  • Fullscreen
  • PDF Export
• Tag API
  • Main Tags
    • Deck
    • Slide (Base)
    • Notes
    • MarkdownSlides
  • Layout Tags
    • Layout
    • Fit
    • Fill
  • Markdown Tag
    • Markdown
  • Magic Tag
    • Magic
  • Element Tags
    • Appear
    • Anim
    • BlockQuote, Quote and Cite (Base)
    • CodePane (Base)
    • Code (Base)
    • ComponentPlayground
    • GoToAction (Base)
    • Heading (Base)
    • Image (Base)
    • Link (Base)
    • List & ListItem (Base)
    • S (Base)
    • Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)
    • Text (Base)
    • Typeface
  • Base Props
• Third Party Extensions
• FAQ
• Maintenance Status

FAQ

How can I easily style the base components for my presentation?

Historically, custom styling in Spectacle has meant screwing with a theme file, or using !important overrides. We fixed that. Spectacle is now driven by emotion, so you can bring your own styling library, whether it's emotion itself, or something like styled-components or glamorous. For example, if you want to create a custom Heading style:

import styled from 'react-emotion';
import { Heading } from 'spectacle';

const CustomHeading = styled(Heading)`
  font-size: 1.2em;
  color: papayawhip;
`;

Can I write my presentation in TypeScript?

Yes, you can! Type definitions are shipped with the library, so you can import Spectacle components into any .tsx presentation without additional installation steps.

Updated type definitions for the Spectacle API can be found at the root of this repository.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.