webflow2reveal turns a structured, sectioned Webflow page
into an interactive Reveal.js slide deck.
It reads your existing <section> elements, infers slide
layouts and background colours from the page's own CSS, and wraps everything
in a Reveal scaffold — no manual slide authoring.
What it does
Webflow page → parse CSS bg-colours → pick slide <section>s →
normalize DOM (split / image / text / badge layouts) →
score luminance (light/dark) → inject Reveal.js 5.1 →
static index.html / in-place browser deck
A Webflow export is already a stack of full-width <section>s with consistent
class names. webflow2reveal treats each qualifying section as one slide, throws
away chrome (nav, footer, menu, banner), and rebuilds the inner markup into a
predictable structure (slide-section, slide-split-layout, slide-column,
slide-text-container, slide-image-cover, slide-badge) that a single
bundled stylesheet then sizes to a 1440×900 stage.
Background colours are not guessed at random — they are resolved from the
page’s own inline and linked stylesheets, then each slide is classified
slide-light-bg or slide-dark-bg by perceptual luminance so text contrast
stays correct.
Pick your implementation
- Python — build-time. Fetches a URL
or reads a local HTML file, writes a self-contained
index.html, optionally serves it. Install-free viauvx webflow2reveal. - JavaScript — run-time, in the
browser. Drop one
<script>into a Webflow page and a?reveal=1URL or a.w2r-triggerbutton transforms the live page into slides in place.
Both share the same normalization algorithm. The difference is when it runs: once at build time (Python) versus on demand in the visitor’s browser (JS).
Working straight from the Webflow Designer? The In Webflow guide walks through embedding the library in Webflow’s custom-code slots, wiring a “View as slides” button, configuring both tools from one code block, and compiling a static deck.
Two ways to present the same deck
Every generated deck understands a ?view=scroll query parameter that switches
Reveal.js into its native scroll view — the same content reads either as a
classic full-screen slideshow or as a vertically scrolling page.
Try it
The interactive demo is an ordinary landing
page. Click View as Slides (or append ?reveal=1) and the JavaScript
library converts it to a Reveal deck in place, with a close button to return.
License
MIT. See the GitHub repo.