Webflow to Reveal.js

Convert structured sectioned landing pages into stunning interactive presentations dynamically, in-place, right inside the browser.

Premium Capabilities

In-Place Conversion

Direct DOM processing. Zero CORS setup needed since the scripts run directly on the page, preserving all local assets, fonts, and inline configurations.

Layout Translation

Translates double-column grids, headers, images, and text scaling from responsive layouts into perfectly proportioned Reveal.js slide layouts.

Color Mapping

Automatically scans local and linked stylesheets to resolve column background colors, dynamically applying light or dark slide themes.

Three Simple Steps

1

Include the Script

Add a single JS script bundle from jsdelivr/unpkg or your custom CDN to the footer of your webpage.

2

Define your Slides

The script scans the DOM for standard <section> elements, skipping standard layout wrappers like header, nav, or footer components.

3

Trigger the Presentation

Add a button with class w2r-trigger or append ?reveal=1 to the URL. The script handles the transition instantly.

Simple Integration

Paste this snippet into the Webflow Page Custom Code block before the closing body tag:

<!-- Load webflow2reveal library -->
<script src="https://cdn.jsdelivr.net/npm/webflow2revealjs@latest/dist/index.global.js"></script>

<!-- Add a trigger button anywhere on your Webflow canvas -->
<a href="#" data-w2r-trigger class="w2r-trigger">View Slides</a>

Ready to Present?

Click the button below to turn this landing page into a slide presentation immediately and test the interface.