Lumi AI Editor: An Intelligent Learning Material Generation Tool for Educational Scenarios

Introducing an AI-powered worksheet editor designed specifically for educational scenarios. It supports teachers in creating, editing, and exporting interactive learning materials via a conversational interface, is compatible with the H5P standard format, and helps lower the content creation barrier for digital teaching.

• Original Author/Maintainer: BIRNE7-e-V
• Source Platform: GitHub
• Original Title: Lumi-AI-Editor
• Original Link: https://github.com/BIRNE7-e-V/Lumi-AI-Editor
• Publication Date: 2026-06-16

Digital transformation in education has become an important trend in global education development. However, when teachers convert traditional teaching content into digital and interactive learning materials, they often face challenges such as high technical barriers, long production cycles, and fragmented tools. The Lumi AI Editor was created to address this pain point; it explores how artificial intelligence can serve as a practical tool to provide learning support in e-learning environments and reduce technical barriers to content creation. Developed by the German educational technology organization BIRNE7, this project aims to allow teachers to focus on instructional design itself rather than being hindered by complex technical tools. Through conversational interaction with AI, teachers can describe their needs in natural language and quickly generate learning materials that align with teaching objectives.

The core capability of the Lumi Editor lies in its AI-driven content creation mode. Teachers can interact with the AI assistant via a chat interface to describe the type, topic, difficulty level, and target audience of the desired learning materials. The AI generates structured teaching content based on these instructions, including:

• Interactive practice questions (multiple choice, fill-in-the-blank, matching, etc.)
• Knowledge explanation texts and examples
• Learning activity design suggestions
• Multimedia content layout plans

This conversational creation method significantly reduces the cognitive burden on teachers when using technical tools, making it easy for educators without programming or design backgrounds to get started.

In addition to AI generation capabilities, Lumi provides a visual editing interface that allows teachers to manually review and fine-tune AI-generated content. The editor supports:

• Drag-and-drop component layout adjustment
• Direct editing of text content
• Adding, deleting, and modifying question options
• Embedding of multimedia resources
• Customization of styles and themes

This human-AI collaboration model not only leverages the efficiency advantages of AI in content generation but also retains the final control of teaching quality by human teachers.

An important feature of the project is its support for the H5P open standard. H5P is a content type standard widely used in the education field, supporting the creation of rich interactive learning content including:

• Interactive videos
• Knowledge quizzes
• Flashcards
• Timeline displays
• Image hotspots
• Branching scenarios

The Lumi Editor can export completed learning materials as H5P format packages, which can be directly imported into H5P-supported learning management systems (LMS) such as Moodle, Canvas, and WordPress. This standardized export format ensures content portability and reusability, eliminating the need for teachers to recreate the same content for different platforms.

The Lumi AI Editor uses a modern frontend technology architecture:

React 19 + TypeScript: Provides a type-safe component-based development experience, ensuring code quality and maintainability. React 19's concurrency features and automatic batching optimize rendering performance for complex interactive scenarios.

TanStack Router: Adopts a file-based routing scheme, simplifying route configuration, supporting nested routes, dynamic parameters, and loading state management, providing a smooth navigation experience for single-page applications.

Tailwind CSS v4 + daisyUI v5: Tailwind's atomic CSS approach combined with daisyUI's pre-built component library enables rapid style development and consistent visual design. Tailwind v4's performance optimizations make the build output more lightweight.

The project supports integration with the OpenAI API; teacher users need to configure their own API keys to use AI features. To protect API call costs during the development phase, the project includes a Mock OpenAI plugin:

• In the local development environment, API requests are intercepted and return simulated responses
• No real API key is required to test the UI flow of AI features
• Simulated responses support customization, facilitating testing of interface performance in different scenarios

This design not only lowers the entry barrier for developers but also ensures flexibility when using real AI capabilities in the production environment.