PUBLIC
PRESENTATION FRAMEWORK
01 / 13
ZERO DEPENDENCIES

Presentator
Swiss Deck Gen

Programmatic HTML presentation generator. Swiss editorial design. Real animations. Math. Diagrams. Presenter window. All from JSON or Markdown.

(C) devsimsek · smsk.dev
PUBLIC
WHAT WE COVER

Framework

01
Input & Build
JSON or Markdown with frontmatter. Single CLI command.
02
Layouts & Blocks
11 layouts, math, diagrams, code, columns, timeline.
03
Runtime & Polish
Animations, canvas waves, cursor FX, presenter window.

Everything you need to build decks that don't look like PowerPoint.

(C) devsimsek · smsk.dev
PUBLIC
"The best presentation framework is the one you actually enjoy using. Also the one that makes you look like a designer even if you can't pick a font to save your life."
Every developer, after discovering Presentator

Swiss editorial design baked in. Inter font. Proper type scale. Grid system. Zero decisions needed.

(C) devsimsek · smsk.dev
PUBLIC
BY THE NUMBERS
04 / 13
FRAMEWORK STATS

Presentator at a Glance

11
Layout Types
8
Animation Recipes
0
NPM Dependencies
2
Input Formats
Key Insight: Single build.js file generates a self-contained HTML. No install needed. CDNs loaded only when you use math or diagrams.
[ image: Architecture diagram ]
(C) devsimsek · smsk.dev
PUBLIC
GETTING STARTED · terminal
05 / 13
CLI USAGE

Build Command

# JSON input
node build.js deck.json dist/index.html

# Markdown input (human friendly)
node build.js deck.md dist/index.html

# That's it. Open index.html.
Zero npm install. Zero config. One command.
(C) devsimsek · smsk.dev
PUBLIC
ARCHITECTURE
06 / 13
HOW IT WORKS

Build
Pipeline

(C) devsimsek · smsk.dev
PUBLIC

We can play videos too!

Watch my brother doing his thing!

(C) devsimsek · smsk.dev
PUBLIC
LAYOUT SYSTEM
08 / 13
11 BUILT-IN LAYOUTS

Choose Your Layout

📄
Text & Content
title, quote, agenda. Cover slides, pull quotes, table of contents.
📊
Data & Metrics
metric-grid, eda-grid, columns. KPIs, charts, side-by-side comparisons.
🎯
Visual & Flow
split, card-row, timeline, code, image-full. Statements, roadmaps, demos.

Each layout auto-selects the right animation. You just write the content.

(C) devsimsek · smsk.dev
PUBLIC
JSON DECK SPEC · slide.json
09 / 13
SLIDE DEFINITION

Example Slide Spec

{
  "layout": "metric-grid",
  "theme": "light",
  "titleMain": "Key Metrics",
  "titleItalic": "& Correlations",
  "metrics": [
    { "value": "41,188", "label": "Samples" },
    { "value": "11.3%", "label": "Positive" }
  ],
  "insight": "Class imbalance makes accuracy misleading.",
  "blocks": [
    { "type": "math", "value": "E = mc^2" }
  ]
}
Blocks support text, math, diagram, and code types. Inline $math$ works anywhere.
(C) devsimsek · smsk.dev
PUBLIC
ANIMATION SYSTEM
10 / 13
8 RECIPES

Entrance Animations

01 - HERO
Title slides
Chrome fades in, kicker drops, title rises, subtitle follows. Dramatic but clean.
02 - GRID
Card layouts
Grid-reveal and stagger animate cards one by one with scale and fade.
03 - SPLIT
Statement slides
Left panel slides from left, right from right. Items cascade sequentially.
(C) devsimsek · smsk.dev
PUBLIC
PROJECT
11 / 13
DEVELOPMENT

Version History

v1.0
Core
5 layouts, basic animations, JSON only
v1.1
Polish
Fullscreen, presenter panel, touch swipe
v1.2
Content
KaTeX, Mermaid, Markdown, 6 new layouts, canvas waves
v2.0
Next
Custom themes, plugins, export to PDF
(C) devsimsek · smsk.dev
PUBLIC
RUNTIME FEATURES
12 / 13
EVERYTHING INCLUDED

Batteries Included

🎨
Visual Polish
Canvas wave background, cursor glow and trail, click ripple effects. All configurable.
🎤
Presenter Tools
Pop-out window with speaker notes, elapsed timer, prev/next controls, keyboard nav.
⌨️
Power User
Grid overview (Esc), low-power mode (B), click-to-reveal build steps, progress bar.

Also: KaTeX math rendering, Mermaid diagrams, touch swipe, fullscreen present mode.

(C) devsimsek · smsk.dev
PUBLIC
01

Zero Dependencies

No npm install. No webpack. No framework. Just Node.js and a browser.

02

Dual Input

JSON for programs, Markdown for humans. Same output either way.

03

Self-Contained Output

Single index.html with everything inlined. Host anywhere. Works offline.

BUILD → PRESENT → IMPRESS

Swiss.
Editorial.
Presentator.

Star the repo. Build a deck. Look like you know what you're doing.

(C) devsimsek · smsk.dev