Anna.js
Generate, preview, and build Markdown presentations with terminal animations, live code, Mermaid diagrams, and audience interaction.
@elyracode/anna wires Elyra to Anna.js, a slide engine that turns plain Markdown into a fully interactive presentation. The agent can scaffold a deck from a topic, edit individual slides, preview them with live‑reload in the browser, and build a self‑contained HTML bundle (offline/PWA ready) for conferences without Wi‑Fi.
Install
elyra install npm:@elyracode/anna
Requires the Anna.js CLI:
npm install -g @kwhorne/anna.js
Tools
| Tool | Description |
|---|---|
generate_presentation |
Generate a complete Anna.js presentation from a topic or project context |
preview_presentation |
Start the Anna dev server with live reload and open the deck in your browser |
build_presentation |
Build a self‑contained HTML bundle (with optional offline/PWA support) |
Commands
| Command | Description |
|---|---|
/presentation [topic] |
Generate a new presentation on the given topic |
/slides [file] |
Preview an existing presentation |
Skills
The bundled anna-js skill loads the complete Anna.js syntax reference into the agent — slide separators, fragments, terminal blocks, code playgrounds, Mermaid diagrams, component layouts, speaker notes, and themes. With the skill active the agent generates valid Anna Markdown on the first try.
Examples
Generate
> Create a presentation about our project architecture
> Generate slides for a Kubernetes intro with terminal demos and diagrams
> Add a slide with a Mermaid flowchart showing the auth flow
/presentation API onboarding guide
Preview
> Preview slides.md in the browser
/slides
/slides docs/my-deck.md
The agent starts the Anna dev server, opens your default browser, and reloads automatically as the markdown file changes.
Build
> Build the presentation as offline HTML
> Bundle the deck as a PWA for the conference
The output is a single HTML file (with optional service worker) that runs without an internet connection.
What the agent can produce
| Capability | Notes |
|---|---|
| Slide structure | Horizontal navigation with ---, vertical with -- |
| Fragments | Step‑by‑step reveals on a single slide |
| Terminal animations | Realistic typing effects with timing |
| Live code playgrounds | JS, HTML, CSS with console output |
| Mermaid diagrams | Flowcharts, sequence diagrams, gantt charts, … |
| Component layouts | Columns, comparison, timeline, stats, cards, quotes |
| Speaker notes | Hidden notes accessible from the presenter view |
| Themes | 11 built‑in themes (dark and light) |
| Offline / PWA | Conference‑ready bundles without external dependencies |
Related
@elyracode/design-tools— preview Tailwind designs in the browser, useful for designing slides- Anna.js on GitHub