Skip to main content
ProseKit provides a comprehensive set of pre-built UI components that you can use to create rich text editors quickly. These components are framework-agnostic and available for React, Vue, Preact, Svelte, Solid, and vanilla JavaScript.

​
Available Components

​
Toolbar

A customizable toolbar providing quick access to various editor commands like formatting, lists, and content insertion. Learn more →

​
Slash Menu

A popup menu that appears after typing /, offering quick commands to insert blocks, format text, and more. Learn more →

​
Inline Menu

A floating menu that appears when you select text, providing formatting options like bold, italic, and links. Learn more →

​
Block Handle

Interactive handles that appear beside blocks, allowing users to drag-and-drop to reorder content or add new blocks. Learn more →

​
Table Handle

Specialized handles for table manipulation, including column and row operations like inserting, deleting, and reordering. Learn more →

​
Installation

All components are available through the ProseKit packages. Install the package for your preferred framework: 
npm install prosekit

​
Framework Support

Every component is available for all supported frameworks:
  • React: prosekit/react/*
  • Vue: prosekit/vue/*
  • Preact: prosekit/preact/*
  • Svelte: prosekit/svelte/*
  • Solid: prosekit/solid/*
  • Lit: prosekit/lit/*

​
Usage Pattern

All ProseKit components follow a consistent usage pattern:
  1. Import the component from your framework-specific package
  2. Wrap your editor content in a ProseKit provider
  3. Add components inside the provider
  4. Components automatically connect to the editor instance
import { ProseKit } from 'prosekit/react'
import { InlinePopover } from 'prosekit/react/inline-popover'

function Editor() {
  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} />
      <InlinePopover>
        {/* Your menu content */}
      </InlinePopover>
    </ProseKit>
  )
}

​
Customization

All components accept standard HTML attributes and can be styled using:
  • CSS classes: Add custom classes via the className prop
  • Inline styles: Use the style prop for inline styling
  • CSS variables: Many components expose CSS variables for theming
  • Tailwind CSS: Components work seamlessly with utility-first CSS

​
TypeScript Support

All components include full TypeScript definitions with:
  • Strict prop types
  • Event handler types
  • Generic support for custom editor extensions
  • Autocomplete and IntelliSense support