Announcing Spectacle Boilerplate MDX

Formidable is thrilled to announce the release of Spectacle Boilerplate MDX. Now you can write your Spectacle presentations in markdown while seamlessly including React components and JSX.

While we think Spectacle is already great for writing presentations, it's possible that writing your presentations in Spectacle with MDX support is even better.

Wait, what's MDX?

Not familiar with MDX? No worries! It's basically markdown that allows you to use JSX syntax, including import and export statements. We think this makes a ton of sense for writing a presentation—while it's great to have the underlying functionality be in React, sometimes doing the actual writing in markdown feels more natural. With MDX you can let your writing flow more freely without sacrificing any of the functionality you've come to know and love from Spectacle.

You can also read up more about MDX at mdxjs.com—they do a deep-dive on the syntax and explain how you can add it to your own projects.

What does Spectacle MDX look like?

Here's a presentation written in standard React syntax (from our original Spectacle Boilerplate):

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["zoom", "slide"]} transitionDuration={500} theme={theme}>
        <Slide transition={["zoom"]} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            Spectacle Boilerplate
          </Heading>
          <Text margin="10px 0 0" textColor="tertiary" size={1} fit bold>
            open the presentation/index.js file to get started
          </Text>
        </Slide>
        <Slide transition={["fade"]} bgColor="tertiary">
          <Heading size={6} textColor="primary" caps>Typography</Heading>
          <Heading size={1} textColor="secondary">Heading 1</Heading>
          <Heading size={2} textColor="secondary">Heading 2</Heading>
          <Heading size={3} textColor="secondary">Heading 3</Heading>
          <Heading size={4} textColor="secondary">Heading 4</Heading>
          <Heading size={5} textColor="secondary">Heading 5</Heading>
          <Text size={6} textColor="secondary">Standard text</Text>
        </Slide>
        <Slide transition={["fade"]} bgColor="primary" textColor="tertiary">
          <Heading size={6} textColor="secondary" caps>Standard List</Heading>
          <List>
            <ListItem>Item 1</ListItem>
            <ListItem>Item 2</ListItem>
            <ListItem>Item 3</ListItem>
            <ListItem>Item 4</ListItem>
          </List>
        </Slide>
        <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
          <BlockQuote>
            <Quote>Example Quote</Quote>
            <Cite>Author</Cite>
          </BlockQuote>
        </Slide>
      </Deck>
    );
  }
}

And here's a nearly-identical presentation written in MDX (from Spectacle Boilerplate MDX):

# Spectacle MDX!

**open the presentation/index.mdx file to get started**

---
export default DarkSlide

export const transition = ['zoom']

# Write your Spectacle Presentations in Markdown
## And seamlessly use React Components  
**How sweet is that**  
**(super sweet)**

---

![datboi](https://pbs.twimg.com/media/CkjFUyTXEAEysBY.jpg)


---

<RegularComponent/>

---

###### Typography

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Standard Text

---

###### Standard List

- Item 1
- Item 2
- Item 3
- Item 4

---

> Example Quote

<Cite>Author</Cite>

---
export default CodeSlide

class SuperCoolComponent extends React.Component {
  render() {
    return (
      <p>code slide works in markdown too whaaaaat</p>
    );
  }
}

Pretty cool, right? Feels more like plain-text writing than the first example, which makes it easier to read when reviewing your notes and your key points, but doesn't compromise the ability to easily demo React components. In other words, it's the ideal way to write a presentation about React, in React.

Anyway, we hope that you try this out and that you love it. As always, we welcome and encourage issue submissions and pull requests to Spectacle if you find anything that needs to be fixed or want to add some cool new features.

Finally, I'd like to give a huge shout-out to Ken Wheeler for the incredible work he put into this, which made it so easy for me to shepherd it to release.

Now go forth and blow everyone away with your amazing presentations!

References and Links

• Spectacle-Boilerplate-MDX
• Spectacle
• MDX Syntax