Qalma

Angular-first, headless rich text editor toolkit built on ProseMirror.

Documentation · npm · Issues · Security

Status: pre-1.0 (0.x). The public API is stabilizing but may still change before 1.0.

Qalma gives you a typed editor controller, signal-based state, and a small set of unstyled Angular primitives (<qalma-editor>, <qalma-content>, <qalma-toolbar>, qalmaCommand). Everything else — toolbar UI, styling, menus, popovers — stays in your app. You choose the plugins, you own the markup.

• Angular-native — standalone components, signal-based state, OnPush, and typed contracts instead of leaked ProseMirror internals.
• Headless — no baked-in toolbar, theme, or feature set. The library ships behavior; your app owns every pixel.
• Plugin-based — compose schema nodes/marks, commands, shortcuts, and ProseMirror plugins through QalmaPlugins and ready-made kits.
• ProseMirror under the hood — a battle-tested document engine, kept internal until an API is deliberately designed.

npm install @qalma/editor

@angular/core >=21 <23 is a peer dependency. Qalma compiles consumer fixtures against Angular 21 and Angular 22 in CI.

import { createQalmaEditor, HistoryPlugin, TextFormattingKit } from '@qalma/editor';

const editor = createQalmaEditor({
  content: '<p>Hello world</p>',
  plugins: [...TextFormattingKit, HistoryPlugin.configure({ depth: 200, newGroupDelay: 750 })],
});

<qalma-editor [editor]="editor">
  <qalma-toolbar>
    <button qalmaCommand="toggleBold">Bold</button>
    <button qalmaCommand="undo">Undo</button>
    <button qalmaCommand="redo">Redo</button>
  </qalma-toolbar>

  <qalma-content />
</qalma-editor>

See the @qalma/editor README for the full controller API, components, and the list of available plugins.

This is an Nx monorepo.

Requires pnpm (pnpm@10).

pnpm install

pnpm nx serve sandbox      # run the sandbox consumer app
pnpm nx serve docs         # run the documentation site
pnpm nx run-many -t lint   # lint everything
pnpm nx test editor        # Vitest contract tests for @qalma/editor
pnpm nx test sandbox       # Vitest consumer tests for the sandbox app
pnpm nx e2e sandbox-e2e    # Playwright browser coverage for the sandbox
pnpm nx build sandbox      # production bundle

Run pnpm nx graph to explore the project graph.

PRs that modify tests, E2E specs, snapshots, test configs, CI workflows, or the test-change guard need the approved-test-change label. The label is meant to force human review before a regression is accepted by weakening the tests.

Qalma ships an experimental agent skill pack in plugins/qalma for Codex, Claude Code, and other agents that can consume SKILL.md folders. It teaches agents how to integrate @qalma/editor, compose headless Angular UI, author Qalma plugins, and debug common editor issues. The same skill source backs the npm installer.

Install the skill pack in a project from npm:

npx @qalma/skills add

The npm CLI writes to ./.agents/skills/qalma by default. It can also target tool-specific locations:

npx @qalma/skills add --target claude
npx @qalma/skills add --target codex

The codex target writes to ./.agents/skills/qalma, the same project-local skills directory Codex scans by default.

Issues and pull requests are welcome. Please read AGENTS.md for the architectural invariants and working agreement before opening a PR.

MIT © Qalma