Skip to main content

​
What is ProseKit?

ProseKit is a flexible framework for building rich text editors on the web. Built on top of the battle-tested ProseMirror library, ProseKit offers seamless composability and extensibility across vanilla JavaScript and multiple frameworks including React, Vue, Preact, Svelte, and Solid. Whether you need a simple text input or a fully-featured document editor, ProseKit provides the building blocks to create exactly the editing experience you want.

​
Why Choose ProseKit?

ProseKit offers a unique balance of flexibility and ease of use for building rich text editors:

Cross-Framework Support

Use with React, Vue, Preact, Svelte, Solid, or vanilla JavaScript. Write once, deploy anywhere.

Modular & Extensible

Compose extensions to add exactly the features you need. No bloat, just power.

TypeScript Power

Build robust editors on a type-safe foundation with excellent IntelliSense support.

ProseMirror Core

Based on ProseMirror, the reliable library powering editors at Atlassian, The New York Times, and more.

Headless Architecture

Full control over the editor’s appearance. Style it with CSS, Tailwind, or any styling solution.

Production Ready

Battle-tested components and extensions ready for production use.

​
Key Features

​
Framework Agnostic

ProseKit provides first-class support for the most popular JavaScript frameworks: 
// React
import { ProseKit } from 'prosekit/react'

// Vue
import { ProseKit } from 'prosekit/vue'

// Svelte
import { ProseKit } from 'prosekit/svelte'

// Preact, Solid, or vanilla JavaScript
import { ProseKit } from 'prosekit/preact'
import { ProseKit } from 'prosekit/solid'
import { ProseKit } from 'prosekit/web'

​
Extensible by Design

Every feature in ProseKit is an extension. Compose them together using the union function: 
import { union } from 'prosekit/core'
import { defineBold } from 'prosekit/extensions/bold'
import { defineItalic } from 'prosekit/extensions/italic'
import { defineParagraph } from 'prosekit/extensions/paragraph'

const extension = union(
  defineParagraph(),
  defineBold(),
  defineItalic()
)

​
Comprehensive Extension Library

ProseKit includes extensions for:
  • Text Formatting: Bold, italic, underline, strike-through, text color, background color
  • Block Elements: Headings, paragraphs, blockquotes, code blocks, horizontal rules
  • Lists: Ordered lists, bullet lists, task lists
  • Rich Content: Images, links, tables, mentions
  • Advanced Features: Collaborative editing (Yjs, Loro), math equations, search, placeholders

​
Type-Safe API

ProseKit is built with TypeScript from the ground up, providing excellent type inference and autocompletion: 
import { createEditor } from 'prosekit/core'
import { defineBasicExtension } from 'prosekit/basic'

const extension = defineBasicExtension()
const editor = createEditor({ extension })

// Full type safety and IntelliSense
editor.commands.toggleBold()
editor.commands.setHeading({ level: 1 })

​
Quick Installation

Get started quickly by installing a full-featured example using shadcn/ui: 
npx shadcn@latest add @prosekit/react-example-full
Or install ProseKit manually: 
npm install prosekit

​
What’s Next?

Ready to build your first editor? Start with one of these guides:

Quick Start

Get up and running in minutes with a step-by-step guide

Installation

Detailed installation instructions for all package managers

First Editor

Build your first ProseKit editor from scratch

API Reference

Explore the complete API documentation
ProseKit is open source and MIT licensed. Join the community on Discord or contribute on GitHub.

​
Community

Get help, share ideas, and connect with other ProseKit users: We’re excited to see what you’ll build with ProseKit!