title: Why kazam
shell: deck
eyebrow: kazam
subtitle: A tour in 7 slides
slides:
- label: Cover
hide_label: true
components:
- type: image
src: /assets/favicon.svg
alt: kazam
max_width: 96
align: center
- type: header
title: "Why kazam"
subtitle: "YAML in, themed static HTML out"
align: center
- label: The problem
components:
- type: header
title: Docs, decks, and dashboards all want a static site
- type: before_after
items:
- title: The usual tradeoff
before: Markdown is fast to write but rarely renders like a real product page
after: A custom Next.js app
after_context: that nobody wants to maintain for a docs site
- title: Slide tools
before: PowerPoint/Keynote lock content into binary files and one operator
after: A YAML file per slide
after_context: committed alongside the code it describes
- title: Internal tools
before: A random Flask app spun up for a one-off internal dashboard
after: A YAML emitter + kazam
after_context: whoever writes the data can ship the UI
- label: How it works
components:
- type: header
title: YAML in, HTML out
subtitle: "Four steps, no frontend build system"
- type: card_grid
connector: arrow
cards:
- title: Write YAML
description: One file per page. Structured components, not free-form HTML.
- title: "`kazam build`"
description: A single Rust binary walks the directory and renders each page.
- title: Themed output
description: Every page picks up the site's theme, shell, and nav — no per-page boilerplate.
- title: Ship static HTML
description: Drop it on S3, Pages, Vercel, or any host that serves files.
- label: What you get
components:
- type: header
title: What kazam gives you out of the box
- type: stat_grid
columns: 4
stats:
- label: Components
value: "30+"
detail: Cards, decks, tables, timelines, stats, more
color: default
- label: Runtime JS deps
value: "0"
detail: Inline scripts only for tabs, accordions, deck nav
color: green
- label: Build artifact
value: 1 binary
detail: "`cargo install` and go"
color: default
- label: Themes
value: "2 + overrides"
detail: Dark, light, plus any color token you want to pin
color: default
- label: Three shells
components:
- type: header
title: One framework, three surfaces
- type: card_grid
cards:
- title: standard
badge:
label: docs, landing, dashboards
description: Scroll page with a site-bar, nav, components. This page uses it.
color: teal
- title: document
badge:
label: briefs, one-pagers
description: Centered card, print-optimized, exports clean to PDF. No nav.
color: green
- title: deck
badge:
label: slides
description: Full-viewport slides with keyboard nav and PDF export.
color: yellow
- label: Using it today
components:
- type: header
title: Real sites, no frontend team
- type: blockquote
body: "Built kazam and replaced an app in less than a day."
attribution: Tyler Diderich
- type: callout
variant: info
title: This deck is itself a kazam deck
body: Open `examples/deck.yaml` to see the 30 lines of YAML behind these slides.
- label: Get started
components:
- type: header
title: Get running in under a minute
- type: steps
numbered: true
items:
- title: Install
detail: "`cargo install --git https://github.com/tdiderich/kazam`"
- title: Scaffold
detail: "`kazam init my-site` — drops a starter `kazam.yaml` and `index.yaml`"
- title: Dev loop
detail: "`kazam dev my-site --port 3000` — live reload on YAML change"
- title: Ship
detail: "`kazam build my-site --out dist --release` — minified HTML/CSS, ready to upload"