Installation

QTI Editor is split into focused packages so you only install what you need. For framework apps, there are two delivery models:

• published npm packages for the editor engine, interaction packages, and pure ProseMirror helpers
• registry-installed Lit UI components that are copied into your app source

Minimal setup

To embed an editor with the published package surface, start with:

pnpm add prosekit @qti-editor/core @qti-editor/prosemirror

Package	Purpose
prosekit	Core editor engine (ProseMirror wrapper)
@qti-editor/core	QTI semantics, descriptor registry, XML export
@qti-editor/prosemirror	Pure ProseMirror / ProseKit-side editor helpers

For Angular and other apps that are not using the framework-specific examples directly, you will usually vendor a small local integration layer on top of these packages.

Adding QTI interactions

Install the interaction packages you need:

pnpm add @qti-editor/interaction-choice \
         @qti-editor/interaction-inline-choice \
         @qti-editor/interaction-text-entry \
         @qti-editor/interaction-select-point

Package	Interaction type
@qti-editor/interaction-choice	<qti-choice-interaction>
@qti-editor/interaction-inline-choice	<qti-inline-choice-interaction>
@qti-editor/interaction-text-entry	<qti-text-entry-interaction>
@qti-editor/interaction-select-point	<qti-select-point-interaction>

Each package exports a ProseMirror Command function to insert the interaction node and a ProseKit extension to register the schema and web components.

Adding the full UI

For the built-in toolbar, attribute panel, slash menu, and insert menus, use the registry instead of an npm runtime import:

npx shadcn@latest add https://qti-editor.citolab.nl/r/lit-editor-toolbar.json

Then add the other UI pieces you need, for example:

npx shadcn@latest add https://qti-editor.citolab.nl/r/lit-editor-slash-menu.json
npx shadcn@latest add https://qti-editor.citolab.nl/r/qti-composer.json
npx shadcn@latest add https://qti-editor.citolab.nl/r/qti-composer-metadata-form.json
npx shadcn@latest add https://qti-editor.citolab.nl/r/qti-attributes-panel.json

The registry copies Lit source files into your project so you can modify them freely.

For Angular, do the manual shadcn setup first (components.json, @/* path alias, src/lib/utils.ts) because the CLI does not auto-detect Angular projects.

Package overview

Package	What it provides
prosekit	Editor engine
@qti-editor/core	QTI semantics, composer registry, XML export
@qti-editor/prosemirror	Pure ProseMirror plugins (block selection, node attr sync)
Registry-installed Lit components	Toolbar, slash menu, attribute panel, insert menus
@qti-editor/interaction-*	Individual QTI interaction nodes, schemas, and commands