@prosekit
ProseKit is a framework-agnostic rich-text editor toolkit built on ProseMirror, supporting React, Vue, Preact, Svelte, and SolidJS. The extensions package covers bold, italic, underline, strike, code, code-block, heading, blockquote, horizontal-rule, lists, links, images, file, math, table, mention, autocomplete, search, placeholder, highlight, text-align, text-color, background-color, yjs (collaboration), and more (~40 extensions). The shadcn registry distributes a full-featured example editor and framework variants. Free and open-source (MIT). Use for: adding a framework-flexible ProseMirror-based editor when you need multi-framework support or a lower-level alternative to Plate.
250 components vue shadcn-cli MIT
Install this registry
shadcn (npm)
npx shadcn@latest add https://prosekit.dev/r/registry.json pnpm
pnpm dlx shadcn@latest add https://prosekit.dev/r/registry.json bun
bunx shadcn@latest add https://prosekit.dev/r/registry.json fetch registry
curl -s https://prosekit.dev/r/registry.json Components
250 total react-example-block-handle block
A handle that appears on hover, allowing you to drag and re-order blocks.
npx shadcn@latest add https://prosekit.dev/r/react-example-block-handle.json react-example-blockquote block
Example for blockquote node.
npx shadcn@latest add https://prosekit.dev/r/react-example-blockquote.json react-example-bold block
Example for bold mark.
npx shadcn@latest add https://prosekit.dev/r/react-example-bold.json react-example-change-tracking block
Track and commit document changes with version history.
npx shadcn@latest add https://prosekit.dev/r/react-example-change-tracking.json react-example-code block
Example for inline code mark.
npx shadcn@latest add https://prosekit.dev/r/react-example-code.json react-example-code-block block
Code block with syntax highlighting and a Mermaid diagram preview.
npx shadcn@latest add https://prosekit.dev/r/react-example-code-block.json react-example-code-block-themes block
Code block with multiple syntax highlighting themes.
npx shadcn@latest add https://prosekit.dev/r/react-example-code-block-themes.json react-example-drop-cursor block
Visual cursor indicator during drag-and-drop operations.
npx shadcn@latest add https://prosekit.dev/r/react-example-drop-cursor.json react-example-emoji-rules block
Auto-convert text shortcuts to emojis using input rules.
npx shadcn@latest add https://prosekit.dev/r/react-example-emoji-rules.json react-example-font-family block
Change the font family of text.
npx shadcn@latest add https://prosekit.dev/r/react-example-font-family.json react-example-full block
Full-featured editor with most available features enabled.
npx shadcn@latest add https://prosekit.dev/r/react-example-full.json react-example-gap-cursor block
Cursor navigation between non-text block elements.
npx shadcn@latest add https://prosekit.dev/r/react-example-gap-cursor.json react-example-hard-break block
Example for hard line break node.
npx shadcn@latest add https://prosekit.dev/r/react-example-hard-break.json react-example-heading block
Example for heading node with multiple levels.
npx shadcn@latest add https://prosekit.dev/r/react-example-heading.json react-example-highlight block
Example for highlighting text (like a highlighter pen).
npx shadcn@latest add https://prosekit.dev/r/react-example-highlight.json react-example-horizontal-rule block
Example for horizontal rule node.
npx shadcn@latest add https://prosekit.dev/r/react-example-horizontal-rule.json react-example-image-view block
Custom image node views with resize support.
npx shadcn@latest add https://prosekit.dev/r/react-example-image-view.json react-example-inline-menu block
Inline formatting menu that appears on text selection.
npx shadcn@latest add https://prosekit.dev/r/react-example-inline-menu.json react-example-italic block
Example for italic mark.
npx shadcn@latest add https://prosekit.dev/r/react-example-italic.json react-example-katex block
Math equation rendering using the KaTeX library.
npx shadcn@latest add https://prosekit.dev/r/react-example-katex.json react-example-keymap block
Custom keyboard shortcuts and key bindings.
npx shadcn@latest add https://prosekit.dev/r/react-example-keymap.json react-example-link block
Example for link mark with URL input.
npx shadcn@latest add https://prosekit.dev/r/react-example-link.json react-example-link-mark-view block
An example showing how to render a mark as a custom component.
npx shadcn@latest add https://prosekit.dev/r/react-example-link-mark-view.json react-example-list block
Example for list node.
npx shadcn@latest add https://prosekit.dev/r/react-example-list.json react-example-list-custom-checkbox block
Custom checkbox styling for task lists.
npx shadcn@latest add https://prosekit.dev/r/react-example-list-custom-checkbox.json react-example-loro block
Real-time collaboration using Loro CRDT library.
npx shadcn@latest add https://prosekit.dev/r/react-example-loro.json react-example-mark-rule block
Input rules for automatic mark formatting.
npx shadcn@latest add https://prosekit.dev/r/react-example-mark-rule.json react-example-minimal block
Minimal editor setup with basic functionality.
npx shadcn@latest add https://prosekit.dev/r/react-example-minimal.json react-example-notion block
Notion-style editor with block-based editing.
npx shadcn@latest add https://prosekit.dev/r/react-example-notion.json react-example-page block
Page layout with configurable paper settings.
npx shadcn@latest add https://prosekit.dev/r/react-example-page.json react-example-placeholder block
Placeholder text displayed.
npx shadcn@latest add https://prosekit.dev/r/react-example-placeholder.json react-example-readonly block
Toggle between read-only and editable mode.
npx shadcn@latest add https://prosekit.dev/r/react-example-readonly.json react-example-rtl block
Right-to-left text direction support.
npx shadcn@latest add https://prosekit.dev/r/react-example-rtl.json react-example-save-html block
Save and load documents as HTML format.
npx shadcn@latest add https://prosekit.dev/r/react-example-save-html.json react-example-save-json block
Save and load documents as JSON format.
npx shadcn@latest add https://prosekit.dev/r/react-example-save-json.json react-example-save-markdown block
Save and load documents as Markdown format.
npx shadcn@latest add https://prosekit.dev/r/react-example-save-markdown.json react-example-search block
Search and highlight text with navigation.
npx shadcn@latest add https://prosekit.dev/r/react-example-search.json react-example-slash-menu block
Command menu triggered by typing slash (/).
npx shadcn@latest add https://prosekit.dev/r/react-example-slash-menu.json react-example-strike block
Example for strikethrough mark.
npx shadcn@latest add https://prosekit.dev/r/react-example-strike.json react-example-sub-sup block
Example for subscript and superscript marks.
npx shadcn@latest add https://prosekit.dev/r/react-example-sub-sup.json react-example-table block
Table node with row and column operations.
npx shadcn@latest add https://prosekit.dev/r/react-example-table.json react-example-text-align block
Text alignment options (left, center, right, justify).
npx shadcn@latest add https://prosekit.dev/r/react-example-text-align.json react-example-text-color block
Change text and background color.
npx shadcn@latest add https://prosekit.dev/r/react-example-text-color.json react-example-toolbar block
Formatting toolbar with common editing actions.
npx shadcn@latest add https://prosekit.dev/r/react-example-toolbar.json react-example-tweet block
Embed and display Twitter tweets.
npx shadcn@latest add https://prosekit.dev/r/react-example-tweet.json react-example-typography block
Typography enhancements like smart quotes and dashes.
npx shadcn@latest add https://prosekit.dev/r/react-example-typography.json react-example-underline block
Example for underline mark.
npx shadcn@latest add https://prosekit.dev/r/react-example-underline.json react-example-unmount block
Properly unmount and remount editor instances.
npx shadcn@latest add https://prosekit.dev/r/react-example-unmount.json react-example-user-menu block
Autocomplete menu for @mentions and #hashtag
npx shadcn@latest add https://prosekit.dev/r/react-example-user-menu.json react-example-user-menu-dynamic block
Dynamic autocomplete menu with async data loading.
npx shadcn@latest add https://prosekit.dev/r/react-example-user-menu-dynamic.json react-example-view-adapter block
Custom node and mark views using view adapters.
npx shadcn@latest add https://prosekit.dev/r/react-example-view-adapter.json react-example-word-counter block
Display word and character count statistics.
npx shadcn@latest add https://prosekit.dev/r/react-example-word-counter.json react-example-yjs block
Real-time collaboration using Yjs CRDT library.
npx shadcn@latest add https://prosekit.dev/r/react-example-yjs.json react-sample-define-atom-block component
npx shadcn@latest add https://prosekit.dev/r/react-sample-define-atom-block.json react-sample-katex component
npx shadcn@latest add https://prosekit.dev/r/react-sample-katex.json react-sample-sample-doc-block-handle component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-block-handle.json react-sample-sample-doc-bold component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-bold.json react-sample-sample-doc-code component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-code.json react-sample-sample-doc-code-block component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-code-block.json react-sample-sample-doc-drop-cursor component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-drop-cursor.json react-sample-sample-doc-font-family component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-font-family.json react-sample-sample-doc-full component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-full.json react-sample-sample-doc-gap-cursor component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-gap-cursor.json react-sample-sample-doc-hard-break component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-hard-break.json react-sample-sample-doc-heading component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-heading.json react-sample-sample-doc-highlight component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-highlight.json react-sample-sample-doc-image component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-image.json react-sample-sample-doc-inline-menu component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-inline-menu.json react-sample-sample-doc-italic component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-italic.json react-sample-sample-doc-link component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-link.json react-sample-sample-doc-link-mark-view component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-link-mark-view.json react-sample-sample-doc-list component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-list.json react-sample-sample-doc-list-custom-checkbox component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-list-custom-checkbox.json react-sample-sample-doc-notion component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-notion.json react-sample-sample-doc-page component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-page.json react-sample-sample-doc-readonly component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-readonly.json react-sample-sample-doc-rtl component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-rtl.json react-sample-sample-doc-search component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-search.json react-sample-sample-doc-strike component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-strike.json react-sample-sample-doc-sub-sup component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-sub-sup.json react-sample-sample-doc-table component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-table.json react-sample-sample-doc-tex component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-tex.json react-sample-sample-doc-text-align component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-text-align.json react-sample-sample-doc-text-color component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-text-color.json react-sample-sample-doc-tweet component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-tweet.json react-sample-sample-doc-typography component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-typography.json react-sample-sample-doc-underline component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-underline.json react-sample-sample-doc-view-adapter component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-view-adapter.json react-sample-sample-doc-word-counter component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-word-counter.json react-sample-sample-query-users component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-query-users.json react-sample-sample-tag-data component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-tag-data.json react-sample-sample-uploader component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-uploader.json react-sample-sample-user-data component
npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-user-data.json react-ui-block-handle component
npx shadcn@latest add https://prosekit.dev/r/react-ui-block-handle.json react-ui-button component
npx shadcn@latest add https://prosekit.dev/r/react-ui-button.json react-ui-code-block-view component
npx shadcn@latest add https://prosekit.dev/r/react-ui-code-block-view.json react-ui-drop-indicator component
npx shadcn@latest add https://prosekit.dev/r/react-ui-drop-indicator.json react-ui-image-upload-popover component
npx shadcn@latest add https://prosekit.dev/r/react-ui-image-upload-popover.json react-ui-image-view component
npx shadcn@latest add https://prosekit.dev/r/react-ui-image-view.json react-ui-inline-menu component
npx shadcn@latest add https://prosekit.dev/r/react-ui-inline-menu.json react-ui-search component
npx shadcn@latest add https://prosekit.dev/r/react-ui-search.json react-ui-slash-menu component
npx shadcn@latest add https://prosekit.dev/r/react-ui-slash-menu.json react-ui-table-handle component
npx shadcn@latest add https://prosekit.dev/r/react-ui-table-handle.json react-ui-tag-menu component
npx shadcn@latest add https://prosekit.dev/r/react-ui-tag-menu.json react-ui-toolbar component
npx shadcn@latest add https://prosekit.dev/r/react-ui-toolbar.json react-ui-user-menu component
npx shadcn@latest add https://prosekit.dev/r/react-ui-user-menu.json react-ui-word-counter component
npx shadcn@latest add https://prosekit.dev/r/react-ui-word-counter.json preact-example-block-handle block
A handle that appears on hover, allowing you to drag and re-order blocks.
npx shadcn@latest add https://prosekit.dev/r/preact-example-block-handle.json preact-example-blockquote block
Example for blockquote node.
npx shadcn@latest add https://prosekit.dev/r/preact-example-blockquote.json preact-example-bold block
Example for bold mark.
npx shadcn@latest add https://prosekit.dev/r/preact-example-bold.json preact-example-change-tracking block
Track and commit document changes with version history.
npx shadcn@latest add https://prosekit.dev/r/preact-example-change-tracking.json preact-example-code block
Example for inline code mark.
npx shadcn@latest add https://prosekit.dev/r/preact-example-code.json preact-example-code-block block
Code block with syntax highlighting and a Mermaid diagram preview.
npx shadcn@latest add https://prosekit.dev/r/preact-example-code-block.json preact-example-code-block-themes block
Code block with multiple syntax highlighting themes.
npx shadcn@latest add https://prosekit.dev/r/preact-example-code-block-themes.json preact-example-drop-cursor block
Visual cursor indicator during drag-and-drop operations.
npx shadcn@latest add https://prosekit.dev/r/preact-example-drop-cursor.json preact-example-emoji-rules block
Auto-convert text shortcuts to emojis using input rules.
npx shadcn@latest add https://prosekit.dev/r/preact-example-emoji-rules.json preact-example-font-family block
Change the font family of text.
npx shadcn@latest add https://prosekit.dev/r/preact-example-font-family.json preact-example-full block
Full-featured editor with most available features enabled.
npx shadcn@latest add https://prosekit.dev/r/preact-example-full.json preact-example-gap-cursor block
Cursor navigation between non-text block elements.
npx shadcn@latest add https://prosekit.dev/r/preact-example-gap-cursor.json preact-example-hard-break block
Example for hard line break node.
npx shadcn@latest add https://prosekit.dev/r/preact-example-hard-break.json preact-example-heading block
Example for heading node with multiple levels.
npx shadcn@latest add https://prosekit.dev/r/preact-example-heading.json preact-example-highlight block
Example for highlighting text (like a highlighter pen).
npx shadcn@latest add https://prosekit.dev/r/preact-example-highlight.json preact-example-horizontal-rule block
Example for horizontal rule node.
npx shadcn@latest add https://prosekit.dev/r/preact-example-horizontal-rule.json preact-example-image-view block
Custom image node views with resize support.
npx shadcn@latest add https://prosekit.dev/r/preact-example-image-view.json preact-example-inline-menu block
Inline formatting menu that appears on text selection.
npx shadcn@latest add https://prosekit.dev/r/preact-example-inline-menu.json preact-example-italic block
Example for italic mark.
npx shadcn@latest add https://prosekit.dev/r/preact-example-italic.json preact-example-katex block
Math equation rendering using the KaTeX library.
npx shadcn@latest add https://prosekit.dev/r/preact-example-katex.json preact-example-keymap block
Custom keyboard shortcuts and key bindings.
npx shadcn@latest add https://prosekit.dev/r/preact-example-keymap.json preact-example-link block
Example for link mark with URL input.
npx shadcn@latest add https://prosekit.dev/r/preact-example-link.json preact-example-link-mark-view block
An example showing how to render a mark as a custom component.
npx shadcn@latest add https://prosekit.dev/r/preact-example-link-mark-view.json preact-example-list block
Example for list node.
npx shadcn@latest add https://prosekit.dev/r/preact-example-list.json preact-example-list-custom-checkbox block
Custom checkbox styling for task lists.
npx shadcn@latest add https://prosekit.dev/r/preact-example-list-custom-checkbox.json preact-example-loro block
Real-time collaboration using Loro CRDT library.
npx shadcn@latest add https://prosekit.dev/r/preact-example-loro.json preact-example-mark-rule block
Input rules for automatic mark formatting.
npx shadcn@latest add https://prosekit.dev/r/preact-example-mark-rule.json preact-example-minimal block
Minimal editor setup with basic functionality.
npx shadcn@latest add https://prosekit.dev/r/preact-example-minimal.json preact-example-placeholder block
Placeholder text displayed.
npx shadcn@latest add https://prosekit.dev/r/preact-example-placeholder.json preact-example-readonly block
Toggle between read-only and editable mode.
npx shadcn@latest add https://prosekit.dev/r/preact-example-readonly.json preact-example-rtl block
Right-to-left text direction support.
npx shadcn@latest add https://prosekit.dev/r/preact-example-rtl.json preact-example-save-html block
Save and load documents as HTML format.
npx shadcn@latest add https://prosekit.dev/r/preact-example-save-html.json preact-example-save-json block
Save and load documents as JSON format.
npx shadcn@latest add https://prosekit.dev/r/preact-example-save-json.json preact-example-save-markdown block
Save and load documents as Markdown format.
npx shadcn@latest add https://prosekit.dev/r/preact-example-save-markdown.json preact-example-search block
Search and highlight text with navigation.
npx shadcn@latest add https://prosekit.dev/r/preact-example-search.json preact-example-slash-menu block
Command menu triggered by typing slash (/).
npx shadcn@latest add https://prosekit.dev/r/preact-example-slash-menu.json preact-example-strike block
Example for strikethrough mark.
npx shadcn@latest add https://prosekit.dev/r/preact-example-strike.json preact-example-sub-sup block
Example for subscript and superscript marks.
npx shadcn@latest add https://prosekit.dev/r/preact-example-sub-sup.json preact-example-table block
Table node with row and column operations.
npx shadcn@latest add https://prosekit.dev/r/preact-example-table.json preact-example-text-align block
Text alignment options (left, center, right, justify).
npx shadcn@latest add https://prosekit.dev/r/preact-example-text-align.json preact-example-text-color block
Change text and background color.
npx shadcn@latest add https://prosekit.dev/r/preact-example-text-color.json preact-example-toolbar block
Formatting toolbar with common editing actions.
npx shadcn@latest add https://prosekit.dev/r/preact-example-toolbar.json preact-example-typography block
Typography enhancements like smart quotes and dashes.
npx shadcn@latest add https://prosekit.dev/r/preact-example-typography.json preact-example-underline block
Example for underline mark.
npx shadcn@latest add https://prosekit.dev/r/preact-example-underline.json preact-example-unmount block
Properly unmount and remount editor instances.
npx shadcn@latest add https://prosekit.dev/r/preact-example-unmount.json preact-example-user-menu block
Autocomplete menu for @mentions and #hashtag
npx shadcn@latest add https://prosekit.dev/r/preact-example-user-menu.json preact-example-user-menu-dynamic block
Dynamic autocomplete menu with async data loading.
npx shadcn@latest add https://prosekit.dev/r/preact-example-user-menu-dynamic.json preact-example-view-adapter block
Custom node and mark views using view adapters.
npx shadcn@latest add https://prosekit.dev/r/preact-example-view-adapter.json preact-example-word-counter block
Display word and character count statistics.
npx shadcn@latest add https://prosekit.dev/r/preact-example-word-counter.json preact-example-yjs block
Real-time collaboration using Yjs CRDT library.
npx shadcn@latest add https://prosekit.dev/r/preact-example-yjs.json preact-sample-define-atom-block component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-define-atom-block.json preact-sample-katex component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-katex.json preact-sample-sample-doc-block-handle component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-block-handle.json preact-sample-sample-doc-bold component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-bold.json preact-sample-sample-doc-code component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-code.json preact-sample-sample-doc-code-block component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-code-block.json preact-sample-sample-doc-drop-cursor component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-drop-cursor.json preact-sample-sample-doc-font-family component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-font-family.json preact-sample-sample-doc-full component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-full.json preact-sample-sample-doc-gap-cursor component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-gap-cursor.json preact-sample-sample-doc-hard-break component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-hard-break.json preact-sample-sample-doc-heading component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-heading.json preact-sample-sample-doc-highlight component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-highlight.json preact-sample-sample-doc-image component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-image.json preact-sample-sample-doc-inline-menu component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-inline-menu.json preact-sample-sample-doc-italic component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-italic.json preact-sample-sample-doc-link component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-link.json preact-sample-sample-doc-link-mark-view component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-link-mark-view.json preact-sample-sample-doc-list component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-list.json preact-sample-sample-doc-list-custom-checkbox component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-list-custom-checkbox.json preact-sample-sample-doc-readonly component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-readonly.json preact-sample-sample-doc-rtl component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-rtl.json preact-sample-sample-doc-search component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-search.json preact-sample-sample-doc-strike component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-strike.json preact-sample-sample-doc-sub-sup component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-sub-sup.json preact-sample-sample-doc-table component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-table.json preact-sample-sample-doc-tex component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-tex.json preact-sample-sample-doc-text-align component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-text-align.json preact-sample-sample-doc-text-color component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-text-color.json preact-sample-sample-doc-typography component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-typography.json preact-sample-sample-doc-underline component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-underline.json preact-sample-sample-doc-view-adapter component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-view-adapter.json preact-sample-sample-doc-word-counter component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-word-counter.json preact-sample-sample-query-users component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-query-users.json preact-sample-sample-tag-data component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-tag-data.json preact-sample-sample-uploader component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-uploader.json preact-sample-sample-user-data component
npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-user-data.json preact-ui-block-handle component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-block-handle.json preact-ui-button component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-button.json preact-ui-code-block-view component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-code-block-view.json preact-ui-drop-indicator component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-drop-indicator.json preact-ui-image-upload-popover component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-image-upload-popover.json preact-ui-image-view component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-image-view.json preact-ui-inline-menu component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-inline-menu.json preact-ui-search component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-search.json preact-ui-slash-menu component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-slash-menu.json preact-ui-table-handle component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-table-handle.json preact-ui-tag-menu component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-tag-menu.json preact-ui-toolbar component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-toolbar.json preact-ui-user-menu component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-user-menu.json preact-ui-word-counter component
npx shadcn@latest add https://prosekit.dev/r/preact-ui-word-counter.json vue-example-block-handle block
A handle that appears on hover, allowing you to drag and re-order blocks.
npx shadcn@latest add https://prosekit.dev/r/vue-example-block-handle.json vue-example-blockquote block
Example for blockquote node.
npx shadcn@latest add https://prosekit.dev/r/vue-example-blockquote.json vue-example-bold block
Example for bold mark.
npx shadcn@latest add https://prosekit.dev/r/vue-example-bold.json vue-example-change-tracking block
Track and commit document changes with version history.
npx shadcn@latest add https://prosekit.dev/r/vue-example-change-tracking.json vue-example-code block
Example for inline code mark.
npx shadcn@latest add https://prosekit.dev/r/vue-example-code.json vue-example-code-block block
Code block with syntax highlighting and a Mermaid diagram preview.
npx shadcn@latest add https://prosekit.dev/r/vue-example-code-block.json vue-example-code-block-themes block
Code block with multiple syntax highlighting themes.
npx shadcn@latest add https://prosekit.dev/r/vue-example-code-block-themes.json vue-example-drop-cursor block
Visual cursor indicator during drag-and-drop operations.
npx shadcn@latest add https://prosekit.dev/r/vue-example-drop-cursor.json vue-example-emoji-rules block
Auto-convert text shortcuts to emojis using input rules.
npx shadcn@latest add https://prosekit.dev/r/vue-example-emoji-rules.json vue-example-font-family block
Change the font family of text.
npx shadcn@latest add https://prosekit.dev/r/vue-example-font-family.json vue-example-full block
Full-featured editor with most available features enabled.
npx shadcn@latest add https://prosekit.dev/r/vue-example-full.json vue-example-gap-cursor block
Cursor navigation between non-text block elements.
npx shadcn@latest add https://prosekit.dev/r/vue-example-gap-cursor.json vue-example-hard-break block
Example for hard line break node.
npx shadcn@latest add https://prosekit.dev/r/vue-example-hard-break.json vue-example-heading block
Example for heading node with multiple levels.
npx shadcn@latest add https://prosekit.dev/r/vue-example-heading.json vue-example-highlight block
Example for highlighting text (like a highlighter pen).
npx shadcn@latest add https://prosekit.dev/r/vue-example-highlight.json vue-example-horizontal-rule block
Example for horizontal rule node.
npx shadcn@latest add https://prosekit.dev/r/vue-example-horizontal-rule.json vue-example-image-view block
Custom image node views with resize support.
npx shadcn@latest add https://prosekit.dev/r/vue-example-image-view.json vue-example-inline-menu block
Inline formatting menu that appears on text selection.
npx shadcn@latest add https://prosekit.dev/r/vue-example-inline-menu.json vue-example-italic block
Example for italic mark.
npx shadcn@latest add https://prosekit.dev/r/vue-example-italic.json vue-example-katex block
Math equation rendering using the KaTeX library.
npx shadcn@latest add https://prosekit.dev/r/vue-example-katex.json vue-example-keymap block
Custom keyboard shortcuts and key bindings.
npx shadcn@latest add https://prosekit.dev/r/vue-example-keymap.json vue-example-link block
Example for link mark with URL input.
npx shadcn@latest add https://prosekit.dev/r/vue-example-link.json vue-example-link-mark-view block
An example showing how to render a mark as a custom component.
npx shadcn@latest add https://prosekit.dev/r/vue-example-link-mark-view.json vue-example-list block
Example for list node.
npx shadcn@latest add https://prosekit.dev/r/vue-example-list.json vue-example-list-custom-checkbox block
Custom checkbox styling for task lists.
npx shadcn@latest add https://prosekit.dev/r/vue-example-list-custom-checkbox.json vue-example-loro block
Real-time collaboration using Loro CRDT library.
npx shadcn@latest add https://prosekit.dev/r/vue-example-loro.json vue-example-mark-rule block
Input rules for automatic mark formatting.
npx shadcn@latest add https://prosekit.dev/r/vue-example-mark-rule.json vue-example-minimal block
Minimal editor setup with basic functionality.
npx shadcn@latest add https://prosekit.dev/r/vue-example-minimal.json vue-example-placeholder block
Placeholder text displayed.
npx shadcn@latest add https://prosekit.dev/r/vue-example-placeholder.json vue-example-readonly block
Toggle between read-only and editable mode.
npx shadcn@latest add https://prosekit.dev/r/vue-example-readonly.json vue-example-rtl block
Right-to-left text direction support.
npx shadcn@latest add https://prosekit.dev/r/vue-example-rtl.json vue-example-save-html block
Save and load documents as HTML format.
npx shadcn@latest add https://prosekit.dev/r/vue-example-save-html.json vue-example-save-json block
Save and load documents as JSON format.
npx shadcn@latest add https://prosekit.dev/r/vue-example-save-json.json vue-example-save-markdown block
Save and load documents as Markdown format.
npx shadcn@latest add https://prosekit.dev/r/vue-example-save-markdown.json vue-example-search block
Search and highlight text with navigation.
npx shadcn@latest add https://prosekit.dev/r/vue-example-search.json vue-example-slash-menu block
Command menu triggered by typing slash (/).
npx shadcn@latest add https://prosekit.dev/r/vue-example-slash-menu.json vue-example-strike block
Example for strikethrough mark.
npx shadcn@latest add https://prosekit.dev/r/vue-example-strike.json vue-example-sub-sup block
Example for subscript and superscript marks.
npx shadcn@latest add https://prosekit.dev/r/vue-example-sub-sup.json vue-example-table block
Table node with row and column operations.
npx shadcn@latest add https://prosekit.dev/r/vue-example-table.json vue-example-text-align block
Text alignment options (left, center, right, justify).
npx shadcn@latest add https://prosekit.dev/r/vue-example-text-align.json vue-example-text-color block
Change text and background color.
npx shadcn@latest add https://prosekit.dev/r/vue-example-text-color.json vue-example-toolbar block
Formatting toolbar with common editing actions.
npx shadcn@latest add https://prosekit.dev/r/vue-example-toolbar.json