|
| 1 | +--- |
| 2 | +title: Introduction |
| 3 | +order: 1 |
| 4 | +sidebar_position: 1 |
| 5 | +--- |
| 6 | + |
| 7 | +import Tabs from '@theme/Tabs'; |
| 8 | +import TabItem from '@theme/TabItem'; |
| 9 | +import defaultDeckImg from '../website/static/img/default-deck.png' |
| 10 | +import presenterModeImg from '../website/static/img/presenter-mode.png' |
| 11 | +import animatedPresentationImg from '../website/static/img/presentation-mode.gif' |
| 12 | + |
| 13 | +Spectacle is a React-based library for creating sleek presentations using React or Markdown that gives you the ability to live demo your code and use React libraries in your slides. |
| 14 | + |
| 15 | +<img src={defaultDeckImg} style={{ width: '40rem'}} /> |
| 16 | + |
| 17 | +## How to get started with Spectacle |
| 18 | + |
| 19 | + |
| 20 | +<Tabs> |
| 21 | + <TabItem value="spectacle-cli" label="Create Spectacle CLI" default> |
| 22 | + The fastest and easiest way to get started with Spectacle is to use the Create Spectacle CLI. This will create a new Spectacle project with a default deck and all the necessary dependencies. |
| 23 | + |
| 24 | + There are four different kinds of templates you can use to create your Spectacle project: |
| 25 | + |
| 26 | + 1. ⚡️ **One Page** - A single HTML file using [htm](https://github.com/developit/htm) that self contains everything you need. Since it does not require a server to run your presentation, this is the recommended option for quickly spinning up a deck. |
| 27 | + 2. 📄 **Markdown** - An app that uses Markdown for your presentation’s content with support for [Markdown Slide Layouts](md-slide-layouts). This is a React app that uses webpack and imports the Markdown content using Spectacle’s [`MarkdownSlideSet`](api-reference#markdown-components) component. |
| 28 | + 3. 🏗️ **React using Vite** - An app that lets you build your presentation in React and uses Vite for building and running. This is the recommended option if you plan on using a number of additional npm libraries in your presentation. |
| 29 | + 4. 🏗️ **React using webpack** - An app that lets you build your presentation in React and uses webpack for building and running. |
| 30 | + |
| 31 | + **To get started use `npx` or `pnpm dlx` to run the `create-spectacle` cli:** |
| 32 | + |
| 33 | + ```bash |
| 34 | + |
| 35 | + $ npx create-spectacle |
| 36 | + |
| 37 | + ``` |
| 38 | + |
| 39 | + This will create a new Spectacle presentation in a directory of your deck’s name or one page file in the current directory. |
| 40 | + |
| 41 | + |
| 42 | + </TabItem> |
| 43 | + <TabItem value="autoPlay" label="Manual Installation" default> |
| 44 | + |
| 45 | + 1. Install Spectacle by running `npm add spectacle`. |
| 46 | + |
| 47 | + 2. In your main entry file, return the following Spectacle starter: |
| 48 | + |
| 49 | + ```tsx |
| 50 | + import { Deck, Slide, Heading, DefaultTemplate } from 'spectacle'; |
| 51 | + |
| 52 | + function App() { |
| 53 | + return ( |
| 54 | + <Deck template={<DefaultTemplate />}> |
| 55 | + <Slide> |
| 56 | + <Heading>Welcome to Spectacle</Heading> |
| 57 | + </Slide> |
| 58 | + </Deck> |
| 59 | + ); |
| 60 | + } |
| 61 | + |
| 62 | + export default App; |
| 63 | + ``` |
| 64 | + |
| 65 | + :::info |
| 66 | + |
| 67 | + If you are using NextJS with App Router, Spectacle needs to be rendered inside a client component. You can read more about this [here](https://nextjs.org/docs/app/building-your-application/rendering/client-components). |
| 68 | + |
| 69 | + ::: |
| 70 | + |
| 71 | + |
| 72 | + </TabItem> |
| 73 | +</Tabs> |
| 74 | + |
| 75 | +## Presenter Mode |
| 76 | + |
| 77 | +Spectacle also has a presenter mode that allows you to view your slides and notes on one screen while your audience views your slides on another. To use presenter mode, open a second browser window and visit your deck’s local server and enable it by using the key command. You can find more information about presentation controls [here](presenting-controls). |
| 78 | + |
| 79 | +<img src={presenterModeImg} style={{ width: '40rem'}} /> |
| 80 | +<img src={animatedPresentationImg} style={{ width: '40rem'}} /> |
| 81 | + |
| 82 | + |
| 83 | +## Documentation, Contributing, and Source |
| 84 | + |
| 85 | +For more information about Spectacle and its components, check out [the docs](https://formidable.com/open-source/spectacle). |
| 86 | + |
| 87 | +Interested in helping out or seeing what's happening under the hood? Spectacle is maintained [on Github](https://github.com/FormidableLabs/spectacle) and you can [start contributing here](https://github.com/FormidableLabs/spectacle/blob/main/CONTRIBUTING.md). |
| 88 | + |
| 89 | +For any questions, feel free to [open a new question on Github](https://github.com/FormidableLabs/spectacle/issues/new?template=question.md). |
0 commit comments