Qalma

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

Documentation · npm · Issues

---

Status: alpha (0.0.x). The public API may still change between releases.

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.

Why Qalma

• 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.

Quick start

npm install @qalma/editor

@angular/core >=21 <22 is a peer dependency.

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.

Repository layout

This is an Nx monorepo.

Path	Description
libs/editor	@qalma/editor — the published, headless editor toolkit.
apps/sandbox	A real consumer app and executable documentation of the public API.
apps/docs	The documentation site published to qalma.dev.
infra	Infrastructure (S3 + CloudFront) for the docs site.

Development

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.

Contributing

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

License

MIT © Qalma