Introducing Spectacle's Enhanced Architecture

February 10, 2021

As we enter the new year we at Formidable have made some refinements and fixes to Spectacle. This new version builds upon the rewrite of Spectacle last year and the great response we’ve received from the community.

Improved Markdown Slide Support

We have introduced three new components to improve our Markdown support in Spectacle. The <Markdown /> component allows for content within a slide to be translated to Spectacle components such as a heading or list. There are two components available to create slides without a slide component: <MarkdownSlide /> and <MarkdownSlides />. This is a change in API from the prior version and an example usage is shown below:

<MarkdownSlide> # Heading for Slide This is a single slide composed using Markdown. </MarkdownSlide> <MarkdownSlideSet> # Markdown Slide Sets Let you write a sequence of slides using Markdown. --- # This is the Second Slide in the Set Using the `---` delimiter creates a new slide in the set. Notes: Anything here will be limited to the presenter display </MarkdownSlideSet>

Improvements to Code Pane

One of the biggest uses of Spectacle is presenting code to audiences. We built in the ability to highlight ranges of lines of code within your pane. The highlightRanges prop accepts an array of lines or a sequence of lines. Each highlight will appear on slide navigation when the right arrow key is pressed.

How to use it

  • <CodePane highlightRanges={[1, 3]} ... /> will create a single highlight from lines 1 to 3.
  • <CodePane highlightRanges={[1, [6, 8]]} ... /> will create two highlights that range between the listed line numbers. As you can see below the first range is the single line of code at line 1 and the second range is the group of lines between 6 and 8.
Spectacle screenshot 1
Spectacle screenshot 2

Presenting Transient Behavior With useSteps

When components have complex prop-driven behavior, it can sometimes be difficult to show how they behave as their props change. Spectacle 7 provides the useSteps hook to help drive components with interactivity.

For example, suppose you wanted to show how this animated component works:

const Rotator = ({ angle, children, }) => { const springStyle = useSpring({ transform: `rotate(${angle}deg)` }); return ( <animated.div style={springStyle}> {children} </animated.div> ); };

With useSteps, you can create "driver" components which are integrated with your presentation, and use them as easily as you'd use an <Appear />. The implementation of <Appear /> uses this hook itself, under the hood.

const PROPS_FOR_DEMO = [ { angle: 30 }, { angle: 60 }, { angle: 90 }, ]; const RotatorDemo = () => { const { isActive, step, placeholder } = useSteps(ANGLES_FOR_DEMO.length); const rotatorProps = PROPS_FOR_DEMO[step] ?? { angle: 0 }; return ( <> {isActive ?? ( <Rotator {...rotatorProps}> <p>`Rotated ${rotatorProps.angle}°`</p> </Rotator> {placeholder} </> ); }; const RotatorDemoSlide = () => ( <Slide> <Appear>This text will appear at step 1...</Appear> <RotatorDemo /> <Appear>...and this text will appear after the Rotator is finished!</Appear> <Slide> );

Spectacle brings several under-the-hood improvements that improve the overall experience with a couple API changes based on community feedback. The Spectacle CLI is a great way to generate a new deck and quickly try out all the latest features. Within Formidable we want to extend a special thanks to my colleagues Christian Ipanaque and Urmit Patel for their hard work in making this release possible. 👏

Related Posts

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.

Progress Towards OSS Sustainability

August 28, 2019
Open source sustainability has been an increasingly visible problem in recent years. The problem is too big for any one person, or any one company to solve, but at Formidable, we're hoping to make a very small, local dent by making open source work more sustainable for our business and for our engineers.

Announcing Spectacle Boilerplate MDX

October 15, 2018
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.