Examples

One engine, every surface

The same Qalma editor, dressed for the job. Pick a use case — each one ships with the recipe that built it.

Comment box

Compact toolbar, @mentions

Example loading

Qalma is getting dressed for this surface...

TypeScript

import {
  createQalmaEditor,
  TextFormattingKit,
  InlineCodePlugin,
  LinkPlugin,
  ListsPlugin,
  MentionPlugin,
  PlaceholderPlugin,
  HardBreakPlugin,
  PasteRulesPlugin,
  HistoryPlugin,
} from '@qalma/editor';

// A comment box = the editor with a small, focused plugin subset.
const editor = createQalmaEditor({
  plugins: [
    ...TextFormattingKit,          // bold, italic, strike, underline
    InlineCodePlugin,
    LinkPlugin,
    ListsPlugin,
    MentionPlugin.configure({ trigger: '@' }),
    PlaceholderPlugin.configure({ placeholder: 'Write a comment…' }),
    HardBreakPlugin,
    PasteRulesPlugin,
    HistoryPlugin,
  ],
});

// A compact toolbar binds buttons to commands declaratively:
// <qalma-editor [editor]="editor">
//   <qalma-toolbar>
//     <button qalmaCommand="toggleBold">B</button>
//     <button qalmaCommand="toggleItalic">I</button>
//     <button qalmaCommand="toggleInlineCode">‹›</button>
//     <button qalmaCommand="toggleBulletList">•</button>
//   </qalma-toolbar>
//   <qalma-content />
// </qalma-editor>