Lumina Engine

🎨 Layouts & Gallery

Lumina includes 7 built-in layouts ready to use. Just set the type property in your JSON:

| Layout | Description | Visual Preview | | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Statement | Bold title slides for introductions, transitions, or key messages. Supports title, subtitle, and background. type: "statement" | | | Features | Auto-grid layout for showcasing features, benefits, or stats. Adapts columns based on item count. type: "features" | | | Timeline | Horizontal timeline with snap navigation. Great for roadmaps, history, or process flows. type: "timeline" | | | Steps | Numbered step-by-step guide. Perfect for tutorials, instructions, or procedures. type: "steps" | | | Half | Split layout with image on one side, content on the other. Fully responsive. type: "half" | | | Chart | Data visualization with Chart.js. Supports bar, line, pie, and doughnut charts. type: "chart" ⚠️ Requires chart.js | | | Flex | Declarative auto-layout system. Define structure with rows, columns, and nested containers. type: "flex" | |

[!TIP] > Embedded Mode: All layouts can be rendered in compact containers (dashboards, widgets) by using the compact: true option.

[!TIP] > See the Code: Click on the dropdowns below to see the exact JSON used to generate these slides.

{
  "type": "timeline",
  "title": "Project History",
  "timeline": [
    {
      "date": "2023",
      "title": "Inception",
      "description": "The idea is born."
    },
    {
      "date": "2024",
      "title": "Launch",
      "description": "First public release."
    }
  ]
}

{
  "type": "chart",
  "chartType": "bar",
  "title": "Quarterly Revenue",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
      { "label": "Revenue", "values": [120, 150, 180, 220], "color": "c:p" }
    ]
  }
}

🎭 Theming

Lumina includes 6 beautiful theme presets out-of-the-box. Just pass the name:

const engine = new Lumina("#app", { theme: "ocean" });

| Theme | Description | Preview | | :----------- | :---------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | | default | Clean blue on dark. Professional. | | | ocean | Cyan on slate. Calm and focused. | | | midnight | Indigo on black. Bold and dramatic. | | | forest | Emerald greens. Natural and fresh. | | | cyber | Neon pink. Sci-fi futuristic. | | | latte | Light mode. Warm amber on cream. | |

⚡ Quick Start

1. Install

# Core installation
npm install lumina-slides

# With Chart support (optional - only if using chart slides)
npm install lumina-slides chart.js

2. Implementation

Lumina is a Framework Agnostic class. It mounts to any DOM node.

import { Lumina } from "lumina-slides";
import "lumina-slides/style.css";

const engine = new Lumina("#app", {
  theme: "dark",
  loop: true,
});

// Load Data (From your API, or static)
engine.load({
  meta: { title: "Demo Deck" },
  slides: [
    { type: "statement", title: "Hello World", subtitle: "Powered by Lumina" },
  ],
});

🤖 Building Agents?

We have a dedicated guide for that.

[!IMPORTANT] > Read the Agent Integration Guide

Learn about:

• Streaming: How to pipe token streams directly into the engine.
• Aliases: Improve latency by 30% using t instead of title.
• Feedback Loops: How to let the AI know what the user is clicking.

Token Optimization

Lumina includes a built-in normalizer. Your LLM can output "lazy" JSON to save money.

| Concept | Standard | Short Alias | | :------------- | :----------- | :---------- | | Header | title | t | | Sub-Header | subtitle | s | | Picture | image | img | | Background | background | bg |

📚 Documentation & Resources

| Resource | Description | | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------- | | 📖 Full Documentation | Complete guides, examples, and live playground | | 🔧 API Reference | TypeDoc-generated API docs with all methods and types | | 🤖 Agent Integration Guide | How to integrate Lumina with AI agents (OpenAI, Anthropic, etc.) | | 📝 LLM System Prompt | Ready-to-use system prompt for your AI to generate slides | | 🎮 Live Playground | Try Lumina in your browser with live JSON editing |