fancy-slides

Building a presentation tool requires months of work: slide layouts, animations, themes, editor chrome, keyboard navigation, speaker notes. PowerPoint and Google Slides demand desktop bloat or vendor lock-in; open libraries like reveal.js focus on viewers, not authoring. Teams rebuilding presentation UX from scratch waste engineering on solved problems — positioning, drag-handles, property panels, animation sequencing. fancy-slides solves this in a JSON-friendly, agent-first package: pure data schema so LLMs emit decks directly, controlled state so humans and agents edit the same slide without conflicts, and MCP bridges so agents author presentations the way a person would.

fancy-slides exports two twin surfaces: SlideViewer for read-only playback (keyboard-driven, supports entrance animations and speaker notes) and DeckEditor for authoring (toolbar, slide rail, inspector, full editing). The deck schema is pure JSON — a Deck holds slides, each with positioned SlideElements (text, image, chart, code, table, shape, embed). Every element has a stable id; animations are simple objects (animation: { effect, trigger, duration, … }), not closures. Themes are registrable objects, not CSS-in-JS. useDeckState and reduceDeck hook for controlled mutations; DeckActivity events broadcast on every edit so agents track who changed what. A registry export allows swapping renderers for optional peers (fancy-echarts, fancy-code) so slides scale from simple text-only to rich dashboards.

Install with npm install @particle-academy/fancy-slides @particle-academy/react-fancy. To display a deck, import SlideViewer, pass a Deck object and optional theme, and include the styles: import { SlideViewer } from "@particle-academy/fancy-slides"; import "@particle-academy/fancy-slides/styles.css"; <SlideViewer deck={myDeck} />. To build an editor, use DeckEditor with controlled state: const [deck, setDeck] = useState(initialDeck); <DeckEditor value={deck} onChange={setDeck} />. For agent bridges, export registry and wire DeckActivity events to your MCP server.