svelte-reveal.js

svelte-reveal.js is a very convinient reveal.js wrapper for Svelte.

You can see a demonstration of the default reveal.js presentation using Svelte, SvelteKit and svelte-reveal.js.

If you want to port this library to another framework, I'd be glad to convert this repo to a monorepo to make the maintenance easier.

reveal.js is a window based library and is not SSR friendly. Though, it still works with static rendering!

Please, use v1 for Svelte 3 and 4 and v2 for Svelte 5.

Installation

Install svelte-reveal.js with your favorite package manager

# npm
npm i -D svelte-reveal.js reveal.js

# pnpm
pnpm i -D svelte-reveal.js reveal.js

# yarn
yarn add --dev svelte-reveal.js reveal.js

Usage

<script>
    import { RevealJsContext, Slide, SvelteRevealHMR, white } from 'svelte-reveal.js';
</script>

<RevealJsContext themes="{[white]}">
    <!-- use SvelteRevealHMR in dev to enable hot module reloading -->
    <SvelteRevealHMR />

    <Slide>
        <h1>Hello world!</h1>
    </Slide>
</RevealJsContext>

Recommendation

I highly recommend to use the hash option set to true to add the current slide number to the URL hash so that reloading the page/copying the URL will return you to the same slide. See the option configuration below.

In order to do that, you should add your presentation inside a destructured slug route (/[...slug]) and use the hash option:

<RevealJsContext options={{ hash: true }}>

API Reference

RevealJsContext

The component <RevealJsContext> loads reveal.js and initialize a Reveal context.

Props	Type	Description
options	Reveal.Options	optional — reveal.js options. See the official documentation and the typescript source code. Do not pass plugins through this props, they would be overriden. Use the plugins props instead
reveal	Reveal.Api	bindable — reveal.js presentation object.
loaded	boolean	bindable — false by default and turns true when the presentation is loaded. Can be used to display a loading screen

If you want a specific route for each slide, do provide the option { hash: true } and make sure that your presentation is wrapped in a /[...slug]/+page.svelte folder to ensure the page is being redirected to your presentation.

Plugins

To load aspecific reveal.js plugin, import it from the library and pass it in the plugins props:

<script lang="ts">
    import { RevealJsContext, markdown, white } from 'svelte-reveal.js';
</script>

{#if plugins}
    <RevealJsContext
        options={{
            controls: true,
            progress: true,
            center: true,
            hash: true,
        }}
        plugins={[markdown]}
        themes={[white]}
    >
        ...
    </RevealJsContext>
{/if}

The available plugins are: highlight (code blocks), markdown, search, notes, math and zoom. Learn more in the official documentation.

You need an extra theme for the highlight plugin. Both available are exported by this library: monokai and zenburn.

Themes

To load a built-in theme, import it from the library and pass it in the themes props.

The available themes are: black, blackContrast, beige, blood, league, night, moon, sky, simple, serif, solarized, white and whiteContrast.

<script>
    import { RevealJsContext, solarized } from 'svelte-reveal.js';
</script>

<RevealJsContext themes="{[solarized]}">
    <!-- ... -->
</RevealJsContext>

Slide

The component <Slide> displays a slide. This is the base building block of reveal.js.

All data-attributes used by reveal.js have been exposed as Svelte props:

• autoAnimate: data-auto-animate, boolean
• autoAnimateEasing: data-auto-animate-easing, string
• autoAnimateId: data-auto-animate-id, string
• autoAnimateRestart: data-auto-animate-restart, boolean
• autoslide: data-autoslide, number
• background: data-background, string
• backgroundColor: data-background-color, string
• backgroundGradient: data-background-gradient, string
• backgroundIframe: data-background-iframe, string
• backgroundImage: data-background-image, string
• backgroundInteractive: data-background-interactive , boolean
• backgroundOpacity: data-background-opacity, string
• backgroundPosition: data-background-position, string
• backgroundRepeat: data-background-repeat, string
• backgroundSize: data-background-size, string
• backgroundTransition: data-background-transition, string
• backgroundVideo: data-background-video, string
• backgroundVideoLoop: data-background-video-loop, string
• backgroundVideoMuted: data-background-video-muted, string
• charset: data-charset, string
• id:: data-id, string
• markdown: data-markdown, boolean | string
• notes: data-notes, string
• separator: data-separator, string
• separatorNotes: data-separator-notes, string
• separatorVertical: data-separator-vertical, string
• state: state, string
• timing: data-timing, number
• transition: data-transition, 'fade' | 'slide' | 'convex' | 'concave' | 'zoom'
• transitionSpeed: data-transition-speed, "slow" | "fast"
• visibility: data-visibility, "hidden"

Code

The component <Code> displays a block of code. This component requires the highlight plugin. See the official documentation about Code.

You need an extra theme for the highlight plugin. Two of which are exported by this library.

All data-attributes used by reveal.js have been exposed as Svelte props:

fragment props:

• fragment:: fragment class, boolean
• autoslide:: data-auotslide, number
• id:: data-id, string
• fragmentIndex:: data-fragment-index, number

code props:

• contenteditable: contenteditable, string
• language: set as a classname, string
• lineNumbers:: data-line-numbers, boolean | string
• lineStartFrom:: data-ln-start-from, string
• noescape:: data-noescape, boolean
• trim:: data-trim, boolean

Write the code with a line return, starting with a raw indentation:

<code>
    {@html `
    <script>
        let name = 'world';
    </script>

    <h1>Hello {name}!</h1>
    `}
</code>

Notes

The component <Notes> allows you to write a side note that will only be displayed in the speaker view. This component requires the note plugin. See the official documentation about Speaker view.

There is no props for this component.

<Notes> This is a very convenient way to write a speaker note </Notes>

Alternatively, you can also use the Slide notes props to define a note.

SvelteRevealHMR

The component <SvelteRevealHMR> enables hot module reloading (HMR) in dev on your presentation. It's not working by default because Reveal.js adds classes to the DOM that Svelte isn't aware of and cleans up when it performs HMR.

Prerendering

If you use the hash option set to true, 2 conditions should be met if you want to prerender your app:

1. have a link to one of the slides of your presentation
2. set the svelte config option: prerender: { handleMissingId: 'warn' }. You can define a function instead of the warn string to let other errors make the build fail (see Svelte documentation).

Acknowledgements

• svelte-slides is a template for using reveal.js I was inspired by.