Skip to content

Export to Reveal.js

Molkit exports a presentation as one self-contained HTML file built on Reveal.js. The file bundles the Reveal.js runtime, theme CSS, your slide content, chemistry SVGs, and speaker notes, so you can open it directly in a browser or hand it to someone without any other assets.

Opening the export dialog

Use File > Export HTML Presentation… or press Ctrl+E while in presentation mode. The Present menu in the presentation workspace has the same entry as Export HTML….

Dialog options

  • Title and Author: written into the document title and meta tags. The title also becomes the filename, sanitized to safe characters.
  • Source (slides page mode only): export canvas slides as SVG captures, or export the HTML slides themselves.
  • Transition: Fade, Slide, Convex, Concave, Zoom, or None. Per-slide transitions set in the editor override this default.
  • Navigation controls and Progress bar toggles.
  • Slide Numbers: off, simple (3), or fraction (3/12).
  • Talk Timer: off or 5 to 60 minutes. When set, the export includes an elapsed-time bar.

The dialog also shows the slide count, whether animations are included, and an estimated file size.

Theme (Molkit Academic, Modern, Classic, Dark, Minimal, Chemistry) and font are not chosen here. They come from the presentation settings dialog and are baked into the export.

What the exported file contains

The build pipeline re-captures every chemistry region from its backing slide at export time, so the file always embeds the freshest SVG. Slides with SMIL animations include a small playback runtime: auto mode plays the animation when the slide appears, click mode steps through animation breakpoints with each click, using Reveal.js fragments. Speaker notes are embedded per slide.

To keep those chemistry diagrams looking right anywhere, the export automatically embeds metric-compatible font fallbacks for any Arial, Helvetica, Times, or Courier text they use, so labels render correctly even on phones, tablets, or other machines that lack those system fonts. This is the same protection as the SVG export’s Mobile-safe rendering option, applied automatically with no setting to toggle. Only the fonts and characters actually used are embedded, so the added size is small.

Vendored libraries are inlined: Reveal.js 5.1.0 plus the Zoom, Search, and Menu plugins, GSAP, an animate.css subset, and a presenter toolkit with a laser pointer and chalkboard overlay.

Using the exported file

Standard Reveal.js keyboard navigation applies: arrow keys and Space to advance, Esc for the overview. Additional keys wired in the export:

  • S opens a speaker notes popup that follows the current slide.
  • M opens the slide navigation menu.
  • Ctrl+Shift+F searches slide text.
  • Alt+Click zooms into a slide element.

To print as PDF, append ?print-pdf to the URL and press Ctrl+P (a comment in the file’s head documents this).

Offline behavior and caveats

  • The file works offline with two exceptions: the presentation’s theme fonts load from the Google Fonts CDN, and Lottie animations load their player from a CDN. Without a connection those fall back to system fonts and blank Lottie containers. The chemistry diagrams’ own fonts are embedded directly, so they are unaffected.
  • The export injects a global CSS reset (zeroed box-sizing, margin, padding) to match the Molkit editor, so slide layouts render identically. Custom slide CSS should not depend on browser default margins.
  • Per-slide CSS is scoped to its slide by ID prefix. Global directives such as @keyframes and @media are not scoped and apply document-wide.
  • The speaker notes popup reuses a fixed window name, so two exported presentations open on the same origin share one notes window.

See also