@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.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

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

60 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