Examples
block-handleA handle that appears on hover, allowing you to drag and re-order blocks.
blockquoteExample for blockquote node.
boldExample for bold mark.
change-trackingTrack and commit document changes with version history.
codeExample for inline code mark.
code-blockCode block with syntax highlighting and a Mermaid diagram preview.
code-block-themesCode block with multiple syntax highlighting themes.
drop-cursorVisual cursor indicator during drag-and-drop operations.
emoji-rulesAuto-convert text shortcuts to emojis using input rules.
font-familyChange the font family of text.
fullFull-featured editor with most available features enabled.
gap-cursorCursor navigation between non-text block elements.
hard-breakExample for hard line break node.
headingExample for heading node with multiple levels.
highlightExample for highlighting text (like a highlighter pen).
horizontal-ruleExample for horizontal rule node.
image-viewCustom image node views with resize support.
inline-menuInline formatting menu that appears on text selection.
italicExample for italic mark.
katexMath equation rendering using the KaTeX library.
keymapCustom keyboard shortcuts and key bindings.
linkExample for link mark with URL input.
link-mark-viewAn example showing how to render a mark as a custom component.
listExample for list node.
list-custom-checkboxCustom checkbox styling for task lists.
loroReal-time collaboration using Loro CRDT library.
mark-ruleInput rules for automatic mark formatting.
minimalMinimal editor setup with basic functionality.
pagePage layout with configurable paper settings.
placeholderPlaceholder text displayed.
readonlyToggle between read-only and editable mode.
rtlRight-to-left text direction support.
save-htmlSave and load documents as HTML format.
save-jsonSave and load documents as JSON format.
save-markdownSave and load documents as Markdown format.
searchSearch and highlight text with navigation.
slash-menuCommand menu triggered by typing slash (/).
strikeExample for strikethrough mark.
sub-supExample for subscript and superscript marks.
tableTable node with row and column operations.
text-alignText alignment options (left, center, right, justify).
text-colorChange text and background color.
toolbarFormatting toolbar with common editing actions.
tweetEmbed and display Twitter tweets.
typographyTypography enhancements like smart quotes and dashes.
underlineExample for underline mark.
unmountProperly unmount and remount editor instances.
user-menuAutocomplete menu for @mentions and #hashtag
user-menu-dynamicDynamic autocomplete menu with async data loading.
word-counterDisplay word and character count statistics.
yjsReal-time collaboration using Yjs CRDT library.