jlantunez/webslides
Webslides
WebSlides is an open-source tool for creating HTML presentations, landing pages, and longform articles directly in the browser. It provides a full-screen slide deck system where each section element becomes an individual slide with horizontal and vertical navigation, keyboard shortcuts, touch gestures, and remote presenter support.
The project distinguishes itself by offering over 40 pre-built slide components such as covers, cards, quotes, and flexible block grids that can be assembled without writing custom layout code. It includes built-in support for embedding rich media like background images and videos, YouTube embeds, Google Maps, and charts, along with a large icon library and typography classes for styling content.
Beyond presentations, WebSlides can be used to design marketing landing pages and compose scrollable, visually rich articles with consistent vertical rhythm and responsive grid layouts. The tool also supports slide deck automation through timed auto-advance and direct URL linking to specific slides.
Features
- HTML Slide Decks - Creates full-screen HTML presentations with keyboard, touch, and remote navigation for live talks.
- Slide Assembly Components - Provides ready-made blocks such as covers, cards, and quotes for building slides without custom layout code.
- Slide Content Styling Classes - Positions and aligns text, images, and components using pre-built CSS classes for typography, backgrounds, and cards.
- Rich Media Integration - Provides a library of over 40 pre-built slide components for embedding rich media into presentations.
- Slide Rich Media Components - Adds background images, videos, quotes, and cards using over 40 built-in components for visual storytelling.
- CSS Component Libraries - Provides pre-built typography, background, card, and flexible block classes for styling slide content.
- Slide Component Classes - Ships over 40 pre-built slide components assembled entirely through CSS class application.
- Auto-Filling Column Grids - Creates auto-filling, equal-height columns from a list with variant presets for features, metrics, and plans.
- Slide Background Images - Places fullscreen or positioned background images on slides with optional overlays and animations.
- Slide Navigation Adapters - Handles slide movement through keyboard arrow keys, swipe gestures, and remote presenter events via a unified system.
- Slide Deck Components - Assembles slides from ready-made blocks such as covers, cards, and quotes without writing custom layout code.
- Media and Background Integration - Provides CSS classes for fullscreen background images, videos, and YouTube embeds with overlay controls.
- Slide Navigation Controls - Moves between slides using keyboard shortcuts, swipe gestures, remote presenters, or click-to-nav with permalink support.
- Slide Grid Alignments - Positions text and images to any of nine grid locations for flexible slide layouts.
- Prebuilt Slide Components - Provides ready-made layouts such as covers, cards, and quotes to quickly assemble presentation content.
- Presentation Navigation - Moves between slides using arrow keys, a presenter remote, or direct URL links to any specific slide.
- Responsive Grid Layouts - Arranges content into a flexible grid with auto-fill columns and predefined sidebar-main layouts.
- Slide Architectures - Renders each HTML section element as a full-screen slide with CSS transforms and JavaScript navigation.
- Predefined Typography Classes - Formats text with predefined classes for landing pages, introductions, subtitles, and labels.
- Longform Article Layouts - Structures scrollable, visually rich articles with typography and media support for narrative content.
- Autoplaying YouTube Embeds - Ships autoplaying YouTube embeds with loop and mute options triggered by slide lifecycle events.
- Slide Background Colors - Sets a slide's background to a predefined corporate, general, or transparent color via a CSS class.
- Card Layouts - Arranges content into a card of a specified width for side-by-side text and media.
- Slide Background Overlays - Applies a semi-transparent dark or light overlay on background images to improve text readability.
- Vertical Rhythm Systems - Applies a vertical rhythm based on multiples of 8 to keep text and elements evenly aligned.
- Slide Icon Libraries - Inserts over 500 SVG icons from a bundled icon set to enhance visual communication on slides.
- Presentation Landing Pages - Assembles marketing or portfolio landing pages using pre-built CSS components and a flexible grid layout system.
- Slide Image Alignments - Positions an image to the left, right, or center of its container using a single CSS class.
- Timed Slide Advancements - Automatically advances slides on a configurable timer for hands-free or kiosk presentations.
- Video Backgrounds - Plays a hosted or YouTube video as a fullscreen background on a slide with an optional overlay.
- Slide Navigation Links - Jumps directly to a particular slide via a URL permalink for easy sharing and referencing.
- Permalink Slide Links - Enables direct URL hash addressing for each slide, supporting deep linking and sharing without server-side routing.
- Timed Auto-Advance - Automatically transitions slides on a configurable timer using JavaScript intervals for hands-free presentations.
- Gradient Backgrounds - Fills a slide's background with a horizontal, vertical, or radial gradient using a single class.
- Slide Numbering Configurations - Displays the current slide number and total count to orient the audience during presentations.
- Responsive Grid Systems - Arranges content into auto-filling, equal-height columns with variants for features, gallery, metrics, and plans.
- Slide Deck Automation - Automatically advances slides on a timer and links to specific slides via URL permalinks.
- Desktop And Presentation - HTML-based presentation builder.
