Skip to content
QTI Editor

QTI Composer

qti-composer displays the composed QTI XML output for the current item. In the current Angular integration pattern, the simplest setup is to assign the live ProseKit editor instance directly.

Install

Terminal window
npx shadcn@latest add https://qti-editor.citolab.nl/r/qti-composer.json

Dependencies: lit, @lit/context, @qti-editor/core, prosekit

Usage

Assign the editor instance after mount:

import '@/components/blocks/composer';


const composer = document.querySelector('qti-composer');
composer.editor = editor;
composer.identifier = 'ITEM_1';
composer.title = 'Untitled Item';
composer.lang = 'en';

This component can live directly underneath the editor viewport to create the “editor on top, XML composer below” shell.