# What is liebstoeckel?

**liebstoeckel** is a code-first presentation engine. You author slides in **MDX** (prose) and **TSX** (anything interactive), theme them from one central place, and ship a single portable `.html` file per deck.

It is built on **Bun + React 19 + Motion + Tailwind v4**, authored in **MDX + TSX**, and themed from **one place** so the same engine can ship many presentations under the same or different corporate brands.

## What makes it different
**One portable file**
`liebstoeckel build` produces a single `.html` with JS, CSS, and assets inlined. No server, no CDN. The file also embeds the deck's own source by default, so `liebstoeckel eject` can turn it back into an editable project.

**Live sessions**
An optional live server turns the same file into a shared session: a CRDT (Yjs) syncs state across every device, and a plugin system adds polls, Q&A, and reactions. Offline, plugins render a fallback.

**Built for agents**
The CLI works for a coding agent as well as a person: `--json` output, a readable component registry, `build --check` for validation without an artifact, and `liebstoeckel skill install` to teach the agent the workflow.

**Design lives in one place**
A brand is one typed token object: colors, fonts, spacing, motion, backgrounds. Slides reference *semantic* tokens (`primary`, not `blue-500`), so a deck re-skins by switching `data-brand`.

## Who it's for

liebstoeckel is **technical-first**: it assumes you're comfortable in a code editor. There is no WYSIWYG drag-and-drop editor. That's an explicit non-goal. In exchange you get version control, real components, typed themes, and a plugin SDK.

## How the pieces fit

- **engine**: the brand-agnostic deck runtime (slides, steps, Magic Move, presenter view, navigation, the live/plugin layer).
- **theme**: the token model and the brand → CSS-variable pipeline.
- **components**: themed MDX primitives + `Magic` + the atmospheric background.
- **plugin-sdk / plugin-ui**: build live, collaborative plugins.
- **live-server / present-relay**: present to a room (LAN) or the public internet.
- **thumbnails**: build-time slide thumbnails for the overview grid.
- **cli**: one `liebstoeckel` command for the whole workflow, from `new` to `build`, `live`, `export`, and `push` (see the [CLI reference](https://docs.liebstoeckel.app/reference/cli/)).

[Get started](https://docs.liebstoeckel.app/guides/getting-started/)