https://github.com/cdskill/qalma
Angular-first, headless rich text editor toolkit built on ProseMirror — lightweight, signals-based, MIT.
https://github.com/cdskill/qalma
angular contenteditable editor headless prosemirror rich-text-editor signals typescript wysiwyg
Last synced: about 7 hours ago
JSON representation
Angular-first, headless rich text editor toolkit built on ProseMirror — lightweight, signals-based, MIT.
- Host: GitHub
- URL: https://github.com/cdskill/qalma
- Owner: cdskill
- License: mit
- Created: 2026-06-03T21:40:05.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-06-28T14:48:42.000Z (8 days ago)
- Last Synced: 2026-06-28T16:19:00.904Z (7 days ago)
- Topics: angular, contenteditable, editor, headless, prosemirror, rich-text-editor, signals, typescript, wysiwyg
- Language: TypeScript
- Homepage: https://qalma.dev
- Size: 1.43 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Agents: AGENTS.md
Awesome Lists containing this project
- fucking-awesome-angular - qalma - Angular-first, headless rich text editor toolkit built on ProseMirror. (Third Party Components / Editors)
- awesome-angular - qalma - Angular-first, headless rich text editor toolkit built on ProseMirror. (Third Party Components / Editors)
README
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 (``, ``,
``, `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 `QalmaPlugin`s and ready-made kits.
- **ProseMirror under the hood** — a battle-tested document engine, kept
internal until an API is deliberately designed.
## Quick start
```sh
npm install @qalma/editor
```
`@angular/core` `>=21 <22` is a peer dependency.
```ts
import { createQalmaEditor, HistoryPlugin, TextFormattingKit } from '@qalma/editor';
const editor = createQalmaEditor({
content: '
Hello world
',
plugins: [
...TextFormattingKit,
HistoryPlugin.configure({ depth: 200, newGroupDelay: 750 }),
],
});
```
```html
Bold
Undo
Redo
```
See the [`@qalma/editor` README](libs/editor/README.md) for the full controller
API, components, and the list of available plugins.
## Repository layout
This is an [Nx](https://nx.dev) 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](https://qalma.dev/). |
| `infra` | Infrastructure (S3 + CloudFront) for the docs site. |
## Development
Requires [pnpm](https://pnpm.io/) (`pnpm@10`).
```sh
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.
## Agent skills
Qalma ships an experimental agent skill pack in [`plugins/qalma`](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:
```sh
npx @qalma/skills add
```
The npm CLI writes to `./.agents/skills/qalma` by default. It can also target
tool-specific locations:
```sh
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.
## Contributing
Issues and pull requests are welcome. Please read [AGENTS.md](AGENTS.md) for the
architectural invariants and working agreement before opening a PR.
## License
MIT © Qalma