Overview

QTI Editor provides a modular way to embed a QTI-capable authoring environment into web applications.

Under the hood, the editor is built on ProseMirror, which gives it a structured document model instead of treating content as loose HTML. QTI Editor layers QTI-specific schema nodes, commands, serializers, and web components on top of that foundation so applications can offer rich-text authoring while still producing valid QTI output.

The ProseMirror schema is what makes QTI interactions manageable: it defines which interaction nodes are allowed, where they can appear, what they can contain, and how they may be nested. That gives the editor built-in guards against invalid structures and adds safeguards around things like unsupported nesting or placing interactions in the wrong context.

Reference shape

The canonical integration shape lives in this repository as qti-prosemirror-item — a minimal pure-ProseMirror QTI roundtrip editor. The TypeScript Integration guide walks through that shape file by file. Use it as the template for your own integration.

Architecture

QTI Editor interaction packages are built on pure ProseMirror with no framework dependencies. Each interaction package exposes:

• *InteractionDescriptor — insertCommand, optional enterCommand/backspaceCommand, pluginFactories, attributePanelMetadata, nodeSpecs
• qti*InteractionNodeSpec — ProseMirror node spec
• Lit custom element — registered via a side-effect register.js module

Your application imports the descriptors and node specs explicitly for the interactions it supports, spreads them into a ProseMirror schema, and composes a plugin stack. There is no required runtime framework.

Note

QTI Editor is a composable kit — it provides the QTI building blocks that slot into an existing ProseMirror instance. It does not ship integration packages for specific frameworks or third-party libraries, and dedicated integration support is outside its scope. The guides in this documentation illustrate one way to wire things together; how you integrate the kit into your application is up to you.

Part of the Citolab QTI ecosystem

QTI Editor’s interaction components are built on top of @qti-components — Citolab’s library of QTI-compliant web components that handle interaction rendering and runtime behavior. @citolab/prose-qti pulls in the required @qti-components dependencies automatically.

QTI Editor is part of a broader set of QTI tooling maintained by Citolab. For an overview of the full toolkit, visit qti.citolab.nl.

What’s next?

• I’d like a basic installation guide.
• I’d like to follow the integration guide.
• I’d like to browse the available QTI interactions.