Text
@matrajs/core
- bold
- italic
- strike
- code
- underline
- highlight
- link
- subscript
Every word on this page is a Matra document. Select this sentence and press Mod-B. Start a new line and press / for the block menu. Type "quotes" and watch them curl. Nothing here is a screenshot and nothing is a video. It is the product, at the size the table further down claims.
npm i @matrajs/core What you get
This block has the whole extension set on. Press / on an empty line for the block
menu, or start typing with #, - or []
and skip it. Mod-B, Mod-I, Mod-Z all work. Break it however you like; a reload puts it back.
Undo groups by what you did rather than by keystroke, so one Mod-Z takes back a whole word instead of one letter. Typing "smart quotes" curls them, and two hyphens -- become an em dash.
Tick this · a real node, not a glyph
Add a line and watch the list continue
A quote, because a quote is a block and blocks are what this is made of.
Empty line, then / — the menu only lists what this editor can do.
Headless, demonstrated
None of these is a theme or a preset. Each is createEditor with a different array of extensions and different CSS around it. All five are live, and all five share one 31.1 kB download.
01 · Block editor
Every block type, every mark, the slash menu and the markdown shortcuts. Press
/ on the empty line, or start one with #, -,
1. or [].
starterKit · taskList · typography · suggestion · placeholder
02 · Comment box
Bold, italic, code, and nothing else. A comment box that can make headings is a bug report waiting to happen · constraining an editor is the same work as extending one.
document · paragraph · text · bold · italic · code
03 · Document
Headings, quotes, alignment, tables, undo. Every button is a command call, and the command types come from the array of extensions rather than from a declaration.
starterKit · tableKit · textAlign · typography
04 · Markdown
The panel beside this is toMarkdown running on every keystroke. It never touches
the DOM, so the same call runs on a server with no jsdom in sight.
starterKit · taskList · toMarkdown
05 · Chat composer
No headings, no lists, no way to paste a document into a message box. Enter sends, Shift-Enter breaks the line.
document · paragraph · text · bold · italic · hardBreak
Measured, not claimed
Four editors, one browser, one run. Shorter is faster.
running in your browser…
Slate's keystroke is blank because the harness would not print it: nothing had reached the screen when the timer stopped. Method, caveats and how to run it yourself →
Extensions
Nodes, marks and behaviour are all the same shape: a plain object with a name. 7 of these 10 groups are in the core and MIT, including four that are paid features elsewhere.
Three lines
Extensions are plain objects. Command types are inferred from the array you pass in, so editor.commands knows what exists without a declaration merge.
Your first editorimport { createEditor, starterKit } from '@matrajs/core'
const editor = createEditor({
extensions: starterKit,
content: '<p>Hello.</p>',
})
editor.mount(document.querySelector('#editor'))
editor.commands.toggleBold() // typed, inferredAgainst the alternatives
What you ship, and what you get for it.
| Matra | Tiptap | Lexical | Slate | |
|---|---|---|---|---|
| Runtime dependencies | none | 51 packages | 9 packages | React |
| Engine types in your code | none | ProseMirror | Lexical | Slate |
| Command types | inferred | augmentation | manual | manual |
| Async position safety | built in | manual | manual | manual |
| Markdown without a DOM | yes | no | no | no |
| Table of contents | free | paid | build it | build it |
| Unique block ids | free | paid | build it | build it |
| Drag handle | free | paid | build it | build it |
| Comments | free | paid | build it | build it |
| Runtime licence check | never | none | · | · |
Where they win: ProseMirror's ecosystem is a decade deep and Tiptap inherits all of it. If you need a mature extension for something exotic today, they have it and this does not.
AI and collaboration are what a subscription is for. Everything else, permanently, is not.
npm i @matrajs/core · 31.1 kB · zero dependencies