senangwebs-deck

v1.0.2

Published

18 days ago

A modern, lightweight JavaScript library for creating beautiful web-based presentations with multiple input formats (HTML, Markdown, JSON)

0High
0Medium
0Low

a-hakim

presentation slides deck markdown html json reveal slideshow

SenangWebs Deck (SWD)

A modern, lightweight JavaScript library for creating beautiful web-based presentations with multiple input formats (HTML, Markdown, JSON).

SenangWebs Deck Preview

Features

Multiple Input Formats: Create slides using HTML attributes, Markdown, or JSON
10+ Built-in Layouts: Cover, two-column, center, quote, image layouts, and more
10 Beautiful Themes: Light, dark, gradient, minimal, corporate, creative, academic, ocean, forest, and mono
Smooth Transitions: Slide, fade, zoom, flip animations
Keyboard & Touch Navigation: Full keyboard shortcuts and swipe gestures
Export Options: Export to PDF, HTML, or JSON
Responsive Design: Works on desktop, tablet, and mobile
Accessibility: WCAG 2.1 compliant with full keyboard navigation

Installation

Via NPM

npm install senangwebs-deck

Via CDN

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/senangwebs-deck/dist/swd.css"
/>
<script src="https://cdn.jsdelivr.net/npm/senangwebs-deck/dist/swd.js"></script>

Quick Start

HTML Attributes

<!DOCTYPE html>
<html>
    <head>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/senangwebs-deck/dist/swd.css"
        />
    </head>
    <body>
        <div id="presentation">
            <div
                data-swd-page
                data-swd-layout="cover"
                data-swd-background="gradient-blue"
            >
                <h1>Welcome to SWD</h1>
                <p>Beautiful presentations made easy</p>
            </div>

            <div data-swd-page data-swd-layout="default">
                <h2>Getting Started</h2>
                <p>Create amazing slides with minimal effort.</p>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/senangwebs-deck/dist/swd.js"></script>
        <script>
            const deck = new SWD('#presentation', {
                theme: 'light',
                transition: 'slide',
            });
        </script>
    </body>
</html>

Markdown

<div id="presentation" data-swd-source="markdown"></div>

<script>
    const deck = new SWD('#presentation', {
        source: 'markdown',
        markdownUrl: './slides.md',
        theme: 'light',
    });
</script>

slides.md:

<!-- slide: cover -->
<!-- background: gradient-blue -->

# Welcome to SWD

Beautiful presentations made easy

---

<!-- slide: default -->

## Getting Started

Create amazing slides with minimal effort.

JSON

const slides = {
    slides: [
        {
            layout: 'cover',
            title: 'Welcome to SWD',
            subtitle: 'Beautiful presentations made easy',
            background: 'gradient-blue',
        },
        {
            layout: 'default',
            title: 'Getting Started',
            content: 'Create amazing slides with minimal effort.',
        },
    ],
};

const deck = new SWD('#presentation', {
    source: 'json',
    data: slides,
});

Configuration & HTML Data Attributes

Initialize slide configurations directly on the presentation container element using standard HTML attributes:

Example:

<div 
  data-swd-id="presentation"
  data-swd-theme="dark"
  data-swd-transition="zoom"
  data-swd-transition-speed="650"
  data-swd-controls="true"
  data-swd-progress="true"
>
  <!-- slides go here -->
</div>

Named transition speeds and custom millisecond values work in both JavaScript options and HTML data attributes. For example, transitionSpeed: 'slow' and data-swd-transition-speed="800" both resolve to an 800ms transition.

Documentation

Available Layouts

cover - Full-screen title slide
default - Single column content
center - Centered content
two-cols - Split left/right columns
three-cols - Three equal columns
section - Section divider
quote - Large quote display
image-right - Content left, image right
image-left - Image left, content right
full-image - Full-screen image with overlay

Available Themes

light - Clean, bright theme
dark - Dark mode
gradient - Colorful gradients
minimal - Ultra-minimal
corporate - Professional business
creative - Bold and artistic
academic - Traditional scholarly
ocean - Cool, polished blue-green gradients
forest - Calm natural palette for grounded content
mono - High-contrast monochrome for technical decks

Keyboard Shortcuts

→ / ↓ / Space / PageDown - Next slide (or next fragment)
← / ↑ / PageUp - Previous slide (or previous fragment)
Home - First slide
End - Last slide
F / f - Toggle fullscreen
O / o - Toggle overview mode
P / p - Pause/resume auto-slide
Esc - Exit fullscreen or overview mode

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Acknowledgments

Marked.js - Markdown parsing
DOMPurify - HTML sanitization