# SenangWebs Deck (SWD) A modern, lightweight JavaScript library for creating beautiful web-based presentations with multiple input formats (HTML, Markdown, JSON). [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) ![SenangWebs Deck Preview](https://raw.githubusercontent.com/a-hakim/senangwebs-deck/master/swd_preview.png) ## 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 ```bash npm install senangwebs-deck ``` ### Via CDN ```html ``` ## Quick Start ### HTML Attributes ```html

Welcome to SWD

Beautiful presentations made easy

Getting Started

Create amazing slides with minimal effort.

``` ### Markdown ```html

``` **slides.md:** ```markdown # Welcome to SWD Beautiful presentations made easy --- ## Getting Started Create amazing slides with minimal effort. ``` ### JSON ```javascript 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: | HTML Data Attribute | Config Option | Description & Options | | :--- | :--- | :--- | | `data-swd-theme` | `theme` | `light`, `dark`, `gradient`, `minimal`, `corporate`, `creative`, `academic`, `ocean`, `forest`, `mono` | | `data-swd-transition` | `transition` | `slide`, `fade`, `zoom`, `flip`, `none` | | `data-swd-transition-speed` | `transitionSpeed` | `fast` (300ms), `normal` (500ms), `slow` (800ms), or a custom speed in ms | | `data-swd-keyboard` | `keyboard` | `true` or `false` to toggle keyboard shortcuts | | `data-swd-controls` | `controls` | `true` or `false` to toggle navigation UI controls | | `data-swd-progress` | `progress` | `true` or `false` to toggle progress bar UI | | `data-swd-loop` | `loop` | `true` or `false` to loop from last to first slide | | `data-swd-autoplay` | `autoplay` | `true` or `false` to auto-play presentation | | `data-swd-autoplay-delay` | `autoplayDelay` | Delay between slides in milliseconds (default: `3000`) | | `data-swd-source` | `source` | Source format: `html`, `markdown`, or `json` | | `data-swd-markdown-url` | `markdownUrl`| Path to external markdown slides file | | `data-swd-json-url` | `jsonUrl` | Path to external JSON slides file | Example: ```html

``` 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 - [Getting Started Guide](docs/getting-started.md) - [Markdown Format Guide](docs/markdown-format.md) - [API Documentation](docs/api.md) - [Examples](examples/) ## 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](LICENSE) file for details. ## Acknowledgments - [Marked.js](https://marked.js.org/) - Markdown parsing - [DOMPurify](https://github.com/cure53/DOMPurify) - HTML sanitization