Example 1

undefined

const name = "hello world";
if(name === 'hello') {
  console.log('world');
}

Svelte + Reveal.js = ❤

Lets have fun!

Getting started

Configure your Presentation in config.js
Create your Slides in src/slides
Add your Slides in Presentation.svelte

Auto-Animate Example

This will fade out


  

{count}

Auto-Animate Example

This will fade out

This element is unmatched


  
    function Example() {
      New line!
      const [count, setCount] = useState(0);
    }

Line Height & Letter Spacing

Swapping list items

One
Two
Three

Swapping list items

Two
One
Three

Swapping list items

Two
Three
One

SLIDE 1

Animate Anything

SLIDE 2

With Auto Animate

SLIDE 3

With Auto Animate

SLIDE 3

With Auto Animate

data-auto-animate-id="a"

A1

data-auto-animate-id="a"

A1

A2

data-auto-animate-id="b"

B1

data-auto-animate-id="b"

B1

B2

Slide 1
Slide 2
Slide 3
Slide 4

data-background: #00ffff

data-background: #bb00bb

data-background: lightblue

data-background: #ff0000

data-background: rgba(0, 0, 0, 0.2)

data-background: salmon

Background applied to stack

Background applied to slide inside of stack

Background image

data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"

Same background twice (1/2)

Same background twice (2/2)

Video background

Iframe background

Same background twice vertical (1/2)

Same background twice vertical (2/2)

Same background from horizontal to vertical (1/3)

Same background from horizontal to vertical (2/3)

Same background from horizontal to vertical (3/3)

Barebones Presentation

This example contains the bare minimum includes and markup required to run a reveal.js presentation.

No Theme

There's no theme included, so it will fall back on browser defaults.

Fit Text

Resizes text to be as large as possible within its container.

FIT

FIT

HELLO WORLD

BOTH THESE TITLES USE FIT-TEXT

Stretch

Makes an element as tall as possible while remaining within the slide bounds.


                                          Stretch Example
                                          
                                          Image byline

Stretch Example

Image byline

Stack

Stacks multiple elements on top of each other, for use with fragments.


                                          
                                            <img class="fragment" width="450" height="300" src="...">
                                            <img class="fragment" width="300" height="450" src="...">
                                            <img class="fragment" width="400" height="400" src="...">

Stack Example

One

Two

Three

Four

Stack Example

fade-in-then-out fragments

HStack

Stacks multiple elements horizontally.


                                          
                                            <img width="450" height="300" src="...">
                                            <img width="300" height="450" src="...">
                                            <img width="400" height="400" src="...">

HStack Example

One

Two

Three

VStack

Stacks multiple elements vertically.


                                          
                                            <img width="450" height="300" src="...">
                                            <img width="300" height="450" src="...">
                                            <img width="400" height="400" src="...">

VStack Example

One

Two

Three

## The Lorenz Equations `\[begin{aligned} \dot{x} & = \sigma(y-x) \ \dot{y} & = \rho x - y - xz \ \dot{z} & = -\beta z + xy \end{aligned} \]`

reveal.js Math Plugin

Render math with KaTeX, MathJax 2 or MathJax 3

The Lorenz Equations

\begin{align} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{align}

The Cauchy-Schwarz Inequality

\[ \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \]

The probability of getting \(k\) heads when flipping \(n\) coins is

\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]

An Identity of Ramanujan

\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

A Rogers-Ramanujan Identity

\[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\]

Maxwell’s Equations

\[ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} \]

TeX Macros

Here is a common vector space: \[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\] used in functional analysis.

The Lorenz Equations

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

The Cauchy-Schwarz Inequality

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \]

The probability of getting \\(k\\) heads when flipping \\(n\\) coins is

\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]

An Identity of Ramanujan

\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

A Rogers-Ramanujan Identity

\[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\]

Maxwell’s Equations

TeX Macros

Here is a common vector space: \[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\] used in functional analysis.