Slide
Type .slide in the first line of an input cell and start writing Markdown slide on a new line:
.slide
# Presentation Title
You can also create presentations using the WLJS Notebook.
# Presentation Title
You can also create presentations using the WLJS Notebook.
Slide cells inherit the features of Markdown cells, WLX and HTML, event listeners for slide events, fragment animations, and the option to export all slides as PDF.
To enter fullscreen mode, press the f key after focusing (click) on a slide.
To enable virtual pointer, press the q key after focusing (click) on a slide.
Use the project feature (Ctrl-Shift-Enter or ⌘-Shift-Enter) of cell properties to show slides in a separate window. Note that the slide cell will also be evaluated within the context of a new window
Advanced Slides
A guide on advanced presentation with event handling and effects
Component-based markup
An advanced guide on making interactive component-based presentations
Basics
Creating Individual Slides
Each .slide cell creates a single presentation slide. You can write multiple slides across different cells in your notebook:
.slide
# First Slide
Content for the first slide
.slide
# Second Slide
Content for the second slide
Separating Slides Within a Cell
Within a single .slide cell, you can create multiple slides by separating them with ---:
.slide
# First Slide
This is the first slide
---
# Second Slide
This is the second slide
---
# Third Slide
This is the third slide
Merging All Slides
To combine all slides from different cells across your notebook into a single presentation, use the plural form:
.slides
Thank you for the attention
This will merge and render all slide cells in the notebook as one continuous presentation, allowing you to navigate through all slides sequentially.
Layout
Standard text to the left, full-height layout:
.slide
<!-- .slide: class="slide-standard" -->
# Title
Content
Scrollable slide
.slide
<!-- .slide: class="slide-standard-scroll" -->
## Title
<br/><br/><br/>
...large content goes
<br/><br/><br/>
...large content goes
<br/><br/><br/>
...large content goes
<br/><br/><br/>
<br/><br/><br/>
...large content goes
<br/><br/><br/>
...large content goes
<br/><br/><br/>
...large content goes
<br/><br/><br/>
Rows
Use plain HTML and plain CSS (or our predefined classes) to create rows and columns:
.slide
# Example
<div class="flex justify-between">
<div>
## Subtitle 1
Content goes...
</div>
<div>
## Subtitle 2
Content goes...
</div>
</div>
Add extra line breaks to separate HTML tags and embeded Markdown code.
Or create your custom layout components using WLX.
Fragments
Fragments allow you to reveal content incrementally on a slide. Use the <!-- .element: class="fragment" --> comment syntax to make elements appear one at a time when you advance the presentation:
.slide
# Incremental Content
This appears first
<!-- .element: class="fragment" -->
This appears second
<!-- .element: class="fragment" -->
This appears third
<!-- .element: class="fragment" -->
Fragment Animations
You can customize how fragments appear using different animation classes:
.slide
# Fragment Animations
Fade in
<!-- .element: class="fragment fade-in" -->
Fade out
<!-- .element: class="fragment fade-out" -->
Slide up while fading in
<!-- .element: class="fragment fade-up" -->
Slide down while fading in
<!-- .element: class="fragment fade-down" -->
Slide left while fading in
<!-- .element: class="fragment fade-left" -->
Slide right while fading in
<!-- .element: class="fragment fade-right" -->
Fades in, then out on next step
<!-- .element: class="fragment fade-in-then-out" -->
Fades in, then semi-out
<!-- .element: class="fragment fade-in-then-semi-out" -->
Highlight red
<!-- .element: class="fragment highlight-red" -->
Highlight green
<!-- .element: class="fragment highlight-green" -->
Highlight blue
<!-- .element: class="fragment highlight-blue" -->
Grow
<!-- .element: class="fragment grow" -->
Shrink
<!-- .element: class="fragment shrink" -->
Fragment Order
Control the order in which fragments appear using the data-fragment-index attribute:
.slide
# Custom Fragment Order
Appears third
<!-- .element: class="fragment" data-fragment-index="3" -->
Appears first
<!-- .element: class="fragment" data-fragment-index="1" -->
Appears second
<!-- .element: class="fragment" data-fragment-index="2" -->
Backgrounds
Background Colors
Add background colors to individual slides using HTML attributes:
.slide
<!-- .slide: data-background-color="#ff0000" -->
# Red Background
This slide has a red background
Background Images
Set background images for more visual presentations:
.slide
<!-- .slide: data-background-image="https://example.com/image.jpg" -->
# Image Background
Content over the background image
Background Options
Customize background behavior with additional attributes:
.slide
<!-- .slide: data-background-image="image.jpg" data-background-size="cover" data-background-position="center" data-background-opacity="0.5" -->
# Custom Background
- `data-background-size`: `cover`, `contain`, or specific size
- `data-background-position`: Position of the image
- `data-background-opacity`: Opacity from 0 to 1
Transitions
Slide Transitions
Control how slides transition using the data-transition attribute:
.slide
<!-- .slide: data-transition="zoom" -->
# Zoom Transition
Available transitions: `none`, `fade`, `slide`, `convex`, `concave`, `zoom`
Plain HTML Support
Slide cells support plain HTML mixed with Markdown syntax and WLX. This allows you to embed rich content like websites, videos. For example:
.slide
<iframe
style="margin-left:auto; margin-right:auto; border-radius: 10px"
width="600"
height="500"
src="https://wljs.io/">
</iframe>
WLX Integration (Data-driven Slides)
Slide cells inherit features from the WLX cell type, similar to Markdown cells. This feature enables dynamic, interactive content within your presentations:
.slide
Today is <Now/>
or embed an entire interactive plot
pts = RandomReal[10, {100, 2}];
MyFigure = ListLinePlot[pts[[Last@FindShortestTour[pts]]], Epilog->{Point[pts]}, ImageSize->500]
.slide
Compute and plot the shortest tour through 100 random points:
<MyFigure/>
Advanced Slides
A guide on how to make dynamic event-based slides, use components and layout helpers
Component-based markup
An advanced guide on how to build reusable components for slides and more
LaTeX Support
Slides use KaTeX as the rendering engine for mathematical equations. Wrap inline equations in single $ symbols, or use $$ for block equations:
.slide
# Mathematical Equations
Inline equation: $E = mc^2$
Block equation:
$$
E = \\hbar \\omega
$$
Animated equations
This particular technique was developed by Cian Luke Martin and is essentially a post-processing engine for SVGs generated from LaTeX equations
You can create Manim-like animated equations:
.slide
## Animated LaTeX
$$
\\begin{align*}
\\mathbf{E}(t,x) &= \\sum_{\\omega} \\mathbf{E}_0^{\\omega} ~ exp\\Big( i\\omega t - \\frac{i\\hat{n}(\\omega) \\omega x}{c}\\Big) \\\\ &= \\sum\\mathbf{E}_0^{\\omega} \\colorbox{white}{$exp(-\\frac{\\alpha x}{2})$} ~exp\\Big(i\\omega t - \\frac{i n \\omega x}{c}\\Big)
\\end{align*}
$$ <!-- .element: data-eq-speed="0.1" -->
See additional features:
Backslashes
For full compatibility with Markdown syntax, escape all backslashes in LaTeX commands. Write \\alpha instead of \alpha.
See Markdown cells for more information
Drawings
Slides integrate the Excalidraw editor for creating drawings directly within your presentations. To create a drawing, type: !![]
This will open the Excalidraw editor, and the resulting drawing will be saved as an SVG image in the output cell.
Export Options (Share)
You can export slides in multiple formats:
- Export notebook as a standalone HTML file
- Export only slides as a PDF file
Auto-upload Images
Slides support automatic image uploading:
- Drop a file: Drag and drop image files directly onto your slide
- Paste a media file: Copy an image and paste it directly into the slide editor
Events
To capture events such as slide or fragment reveals, use SlideEventListener:
.slide
# 1st Slide
Nothing
---
# 2nd Slide
A message pops up
Another message <!-- .element: class="fragment" data-fragment-index="1" -->
<SlideEventListener Id={"myEvent"}/>
Before evaluating, attach an event handler:
EventHandler["myEvent", {
"Slide" -> (Print["Hey there!"]&),
"fragment-1" -> (Print["Hey there from fragment!"]&)
}]
The identifier acts as an event object with these patterns:
"Slide"— fired when a slide is revealed"Mounted"- fired when the presentation is ready to show"Left"- fired when you left the slide"Destroy"- fired when this slide cell was destroyed"fragment-INDEX"— fired when a fragmentINDEXis revealed
Check out the examples on triggered animations and more:
Misc
Embedding PDFs or Websites
With full HTML support, you can embed a local PDF:
.slide
<embed width="800" height="500" src="/attachments/antisymmetry.pdf"/>
Or an entire website:
.slide
<iframe width="800" height="500" src="https://wikipedia.com" style="border: none; border-radius: 4px"/>
The Marquee element
This element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.
.slide
# Title
<marquee>Hello World</marquee>
Mark
This HTML element represents text which is marked or highlighted
.slide
# Title
<mark>salamander</mark>
JavaScript Code
Any script tag will execute after slides are mounted and scoped to the slide (aka module):
.slide
<div id="dtext">Hello World</div>
<script>
document.getElementById('dtext').style.background = "yellow"
</script>
If you use unique id for elements on the slide, please, remove the output cell before reevaluating the input one. Otherwise two identical elements might coexist on the same page, which then cause issues with bindings to JS.