ProseKit

Overview

ProseKit is a modern, framework-agnostic, and headless rich text editor architecture constructed on top of ProseMirror. Designed with a modular extension system, ProseKit provides first-class bindings for React, Vue, Svelte, Preact, Solid, and Vanilla JavaScript, allowing teams to build complex Notion-like or Google Docs-style WYSIWYG editors without framework lock-in.

Key Features

• 🌐 True Framework Agnostic: Unified core architecture with identical APIs and behaviors across React, Vue, Svelte, Solid, and vanilla DOM.
• 🧩 Modular Extension Architecture: Easily compose features like Markdown shortcuts, slash command menus, code blocks, tables, and AI completions.
• ⚡ Lightweight & High Performance: Built directly on ProseMirror's battle-tested transactional document model without unnecessary wrapper overhead.
• 🤝 Real-Time Collaboration Ready: Seamlessly integrates with Yjs and WebRTC/WebSocket backends for multi-user collaborative editing.

Installation & Quick Start

npm install prosekit

import React from 'react';
import { createEditor } from 'prosekit/core';
import { defineBasicExtension } from 'prosekit/basic';
import { ProseKit, useDocChange } from 'prosekit/react';
import 'prosekit/basic/style.css';

export function Editor() {
  const editor = React.useMemo(() => {
    return createEditor({ extension: defineBasicExtension() });
  }, []);

  useDocChange((doc) => console.log('Document updated:', doc), { editor });

  return (
    <div className="border border-neutral-300 rounded-xl p-4 min-h-[300px]">
      <ProseKit editor={editor} />
    </div>
  );
}

Why Choose ProseKit?

• Multi-Framework Ecosystems: Maintain a single rich text editing standard across diverse frontend technology stacks.
• Enterprise Knowledge & Notes: An ideal foundation for building bespoke document workspaces, knowledge bases, and CMS authoring surfaces.