Using the Registry

The QTI Editor registry is a shadcn/ui-compatible component registry. It gives you ready-made UI components that you can copy into your own codebase and adapt without lock-in or template indirection.

You can view this registry as a UI starter. Build the editor itself from prosekit and the public @qti-editor/* packages, then copy the components you need to cover common editor UI patterns.

Registry base URL: https://qti-editor.citolab.nl/r

Prerequisites

These components are Lit web components styled with Tailwind CSS and DaisyUI. Your project needs:

pnpm add lit tailwindcss daisyui

If your framework is not auto-detected by the shadcn CLI, add some manual config first:

• components.json
• a @/* path alias in tsconfig.json
• a minimal src/lib/utils.ts

This is required for Angular projects.

Installing a component

Use the shadcn CLI with the full component URL:

npx shadcn@latest add https://qti-editor.citolab.nl/r/<component-name>.json

This copies the component source into your project and installs its npm dependencies. You can then modify the file freely.

Component catalogue

• QTI Composer Metadata Form: standalone metadata form for title and identifier editing
• QTI Composer: live QTI XML output panel driven by the current editor state
• QTI Code Panel: HTML, JSON, and QTI XML tabs driven by content-change events
• QTI Attributes Panel: schema-aware attribute editor for the current node selection
• Lit Editor Toolbar: toolbar for common rich-text editing actions
• Lit Editor Slash Menu: /-driven node insertion menu
• QTI Interaction Insert Menu: dropdown for inserting supported QTI interactions
• QTI Convert Menu: selection conversion menu for turning text into QTI structures

Notes

• Each component is a Lit custom element, which makes the registry framework-agnostic and usable in any HTML context.
• In framework hosts such as Angular, assign object values such as the editor instance or eventTarget through refs rather than HTML attributes.
• Angular is not auto-detected by the shadcn CLI. Follow the manual setup described in the Angular guide first, then run shadcn add.
• When the shadcn CLI installs a component, it rewrites @qti-editor/ui/... imports to @/... using your project’s path aliases. Make sure @/ resolves to your project’s src/ directory.
• Components with registryDependencies, such as qti-attributes-panel, will automatically pull in their sub-components in a single CLI command.
• In Angular, import the registry files for side effects and add CUSTOM_ELEMENTS_SCHEMA to the host component that renders them.
• The copied registry components are optional. The stable integration surface is the public package API plus your own app-level ProseKit assembly.