Announcing Spectacle Boilerplate MDX

October 15, 2018
Emma BrillhartEmma Brillhart

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!

Related Posts

Introducing Spectacle's Enhanced Architecture

February 10, 2021
Introducing Spectacle's all new architecture, which includes several under-the-hood improvements that improve the overall experience with a couple API changes based on community feedback.
Carlos Kelly
Matt Hink

A New Generation For Spectacle

March 10, 2020
At Formidable we spent the last five months working on a rewrite of Spectacle. We started with some clear goals to set Spectacle up well for the future: a modern internal architecture that’s easier to contribute to, faster authoring experience, consistent theming system, and the elimination of external boilerplates and scripts. Welcome to Spectacle 6!
Carlos Kelly
Kylie Stewart

New Spectacle Lander

April 1, 2019
Formidable and the Spectacle team are excited to announce the launch of the new Spectacle lander on the Formidable website! We've updated the branding and brought the lander more in line with our company's overall brand.
Emma Brillhart