Introducing SparkLumina v1.0

What is SparkLumina?

SparkLumina (formerly TeachBoardOpenEDU) is an AI-powered collaborative whiteboard for teaching, brainstorming, and visual creation. It is built on top of the open-source Excalidraw engine and extends it with real-time multi-user collaboration, AI drawing, AI teaching assistants, a chat-driven board agent, and session recording with export to video.

The goal is simple: focus your ideas, explain everything. Whether you're tutoring a student step-by-step, co-creating a diagram with colleagues, or building an illustrated story frame-by-frame, SparkLumina provides the canvas and tools to do it — with AI assistance and seamless collaboration.

Five Core Features

1. Collaborative Whiteboard

The foundation of SparkLumina is a shared infinite canvas where multiple users can draw, annotate, and edit at the same time. Real-time synchronization is powered by Socket.IO — every stroke, shape, and text change is broadcast to the room instantly. Live cursors show where each collaborator is working, and a version-based conflict resolution strategy ensures that concurrent edits merge correctly without overwriting each other. Rooms are created on demand; share the room ID and anyone can join via browser.

2. AI Smart Drawing (AISidebar)

Describe what you want in natural language, and the AI draws it on the canvas. The AISidebar streams ExcalidrawElementSkeleton objects — rectangles, ellipses, diamonds, arrows, and text — as the model generates them. A two-level selector (subject × chart type) lets you choose styles like "science diagram," "journal planner," or "illustration." Elements are sanitized, converted to native Excalidraw elements via convertToExcalidrawElements, and applied to the shared canvas. Optional TTS narration keeps audio and visuals in sync. You can export the result as PNG, SVG, or .excalidraw.

3. AI Teaching (LectureSidebar)

For educators and students, LectureSidebar provides step-by-step problem solving. Paste a problem, and the AI breaks it down into clear steps with structured板书 (board content), visual annotations, and spoken narration. Each step can include LaTeX-rendered formulas, SVG handwriting animations, and interactive Q&A — you can ask follow-up questions at any point. The teaching flow is designed to feel like a one-on-one tutor session.

4. Board Agent (ExAgent)

ExAgent is a chat-driven canvas controller. You talk to it in plain language ("Create a blue circle in the center," "Move the rectangle to the right," "Delete all ellipses") and it executes the corresponding actions on the Excalidraw canvas. Supported operations include create, update, delete, move, resize, rotate, freehand pen, clear, and more. Actions are streamed as JSON from the backend and applied incrementally. ExAgent is context-aware: it can operate on selected shapes, points, or regions you specify, and it integrates with a todo list and chat history for complex multi-step workflows.

5. Recording & Playback

Capture your session — including AI-generated content and TTS — as video. The frontend uses the browser MediaRecorder API to record a mixed stream (canvas via captureStream plus synthesized audio). The output is WebM; it is then sent to the backend, where ffmpeg converts it to MP4 (H.264 + AAC) for broad compatibility. Frame-by-frame playback and timeline scrubbing are supported, and recordings can be exported for async learning or sharing.

Architecture Overview

SparkLumina uses a three-layer stack:

• Frontend: React 18.3, TypeScript 5.7, Excalidraw 0.18, Vite 6.0. The main UI lives in a Next.js-based website and a Vite-based whiteboard app. All canvas logic goes through the Excalidraw imperative API.

• Backend (Node.js): Express for HTTP APIs and Socket.IO for WebSocket. The Node server handles room management, canvas synchronization (canvas-change, remote-changes), user presence, live cursors, and the ExAgent streaming endpoint (/api/agent/stream). Recording conversion (WebM → MP4) runs server-side via ffmpeg.

• AI Service (Python FastAPI): A separate Python service handles LLM calls for smart drawing, teaching, and ExAgent. It exposes streaming endpoints and returns structured JSON (skeletons, steps, actions) that the frontend consumes in real time.

Why Excalidraw as the Foundation?

Excalidraw was chosen for several reasons:

1. Open source and embeddable — Full control over rendering and behavior.
2. Infinite canvas — No artificial boundaries; zoom and pan are smooth and intuitive.
3. Rich element model — Text, rectangles, ellipses, diamonds, arrows, images, frames; all with bindings (e.g., arrows between shapes).
4. Official conversion API — convertToExcalidrawElements accepts a skeletal JSON format, making it straightforward to inject AI-generated content into the scene.
5. Active ecosystem — Regular updates and community support.

By building on Excalidraw, we avoid reinventing the canvas and focus on collaboration, AI integration, and teaching workflows.

What's Next?

The roadmap includes:

• Phase 3 (in progress): Export to PNG/SVG/Excalidraw; video recording with audio; portal website; PDF import and annotation; template library and community sharing.
• Phase 4 (planned): User authentication and accounts; persistent rooms with database storage; team workspaces and permissions; LMS integrations (Canvas, Moodle); mobile apps (iOS/Android).

SparkLumina v1.0 delivers the core experience. The five features above are production-ready, and we're iterating on polish, performance, and new capabilities. Try the demo, contribute on GitHub, and stay tuned for more updates.