QTI Editor Angular Extension

This project is an example Angular integration of the qti-editor ecosystem. It demonstrates how to integrate QTI Editor’s modular, ProseMirror-based authoring environment into an Angular application, using the recommended public packages and UI registry approach.

Live Demo: https://citolab.github.io/qti-editor-angular/

---

About

This application is designed to showcase and extend the capabilities of the main qti-editor repository. It provides a reference implementation for embedding QTI-compliant authoring tools in Angular apps, following the best practices outlined in the qti-editor documentation.

The editor is built on ProseMirror and leverages QTI-specific schema nodes, commands, and web components. This ensures that authored content is always valid QTI and that only supported interactions and structures are allowed.

Integration Approach

• Install the required @qti-editor interaction and core packages from npm.
• Use ProseKit for ready-made UI components, or copy example Lit UI components from the registry.
• Maintain a small local ProseKit helper layer for editor assembly and event wiring.
• The intended public model is: prosekit + @qti-editor/interaction-* + @qti-editor/core + copied registry UI.

For more details, see the Angular integration guide.

Development

To start a local development server:

ng serve

Visit http://localhost:4200/ in your browser. The app will reload automatically on code changes.

Building

To build the project for production:

ng build --configuration production --base-href /qti-editor-angular/

The build output will be in the dist/ directory. This project is automatically deployed to GitHub Pages on every push to main.

Testing

To run unit tests:

ng test

Resources

• QTI Editor Documentation
• QTI Editor Angular Integration Guide
• Main qti-editor repository
• ProseKit

---

For questions or contributions, please see the main qti-editor repository.