slash-editor

Product Introduction

1. Definition: slash-editor is an open-source, MIT-licensed React component library and headless editor core that provides a Notion-style block-based editing experience. Technically, it is a suite of Tiptap v3 extensions and ProseMirror schemas packaged with a complete, shadcn/ui-native React UI layer.
2. Core Value Proposition: It exists to provide developers with a fully-featured, production-ready block editor UI—including slash commands, drag-and-drop nesting, and real-time collaboration—without vendor lock-in, recurring fees, or proprietary hosted dependencies. Its primary value is delivering premium editor interactions as ownable source code under a permissive license.

Main Features

1. Shadcn Registry UI Components: The React UI is distributed via a shadcn registry. Executing bunx shadcn add @slash-editor/slash-menu copies the component's source code (TypeScript, React, Tailwind CSS) directly into the developer's project. This allows for complete customization using the project's existing design tokens and eliminates runtime dependency on an external component library.
2. Headless Tiptap Core (@slash-editor/core): This package contains the pure business logic: ProseMirror schema definitions, Tiptap extensions, and editor commands, devoid of any React or UI code. This architecture allows the same editor logic to power different frontend implementations (e.g., Vue, Svelte) and ensures a clean separation of concerns.
3. Real-Time Collaboration (Yjs + Hocuspocus): slash-editor integrates Yjs for conflict-free replicated data types (CRDT) and recommends Hocuspocus as a self-hosted collaboration backend server. This stack enables features like presence indicators (carets), shared cursors, and concurrent editing without relying on a paid, hosted service like Liveblocks or PartyKit.
4. AI Slash Actions with StreamAdapter: Beyond basic blocks, it includes an AI slash command framework. Developers implement a StreamAdapter interface to connect the editor to any AI model provider (OpenAI, Anthropic, local LLM). The editor handles the UI for streaming responses directly into the document, enabling features like "Continue writing," "Summarize," or "Fix grammar."
5. Comprehensive Block Library: The editor supports advanced content blocks beyond standard text formatting. This includes interactive tables with column controls, multi-column layouts, Mermaid.js diagram rendering, toggle lists, callouts, embeds, and a comment system with threads—all implemented as native Tiptap node views.

Problems Solved

1. Pain Point: The high cost and licensing risk of commercial rich-text editors. Alternatives like Plate Plus charge significant per-developer fees (€299/dev) for advanced block UI features, while open-source Tiptap+shadcn projects often only provide basic toolbar formatting, lacking the full Notion-like interaction model.
2. Target Audience: The primary audience is product teams and full-stack developers building React applications that require a sophisticated text editor. This includes SaaS founders (building tools like project management, note-taking, or CMS platforms), in-house development teams at startups, and indie hackers who need a premium editor but must control costs and own their stack.
3. Use Cases: Essential for building modern web applications such as collaborative document editors (like Google Docs alternatives), knowledge base wikis, advanced content management systems (CMS) for marketing teams, AI-powered writing assistants, and complex form builders that require rich, structured content input.

Unique Advantages

1. Differentiation: Unlike freemium models (e.g., TinyMCE, CKEditor) or expensive commercial SDKs, slash-editor is 100% MIT-licensed with no paid tier. Unlike assembling a DIY Tiptap setup, it provides a complete, polished block UI out of the box. Its registry-based delivery model is distinct from typical npm packages, granting full code ownership.
2. Key Innovation: The combination of a truly headless core and a registry-distributed UI. This dual-package architecture allows experts to use the robust Tiptap core independently, while the ready-made UI installs as editable source code, not a compiled black box. This merges the flexibility of a headless library with the convenience of a pre-built component kit.

Frequently Asked Questions (FAQ)

1. Is slash-editor really free for commercial use? Yes, slash-editor is entirely licensed under the MIT License, which permits unrestricted use, modification, distribution, and sublicensing for private, commercial, and enterprise projects without any fees or royalty obligations.
2. How does the shadcn registry work for installing the UI? Developers first configure their components.json to point to the slash-editor registry. Then, using the shadcn CLI (e.g., shadcn add @slash-editor/block-handle), the specific component's source files (TSX, CSS) are copied directly into the project's component directory. This makes the component a permanent, editable part of the codebase.
3. Can I use slash-editor without React or with another framework like Vue? The @slash-editor/core package is framework-agnostic, containing only Tiptap/ProseMirror logic. You can use this core to build an editor in Vue, Svelte, or vanilla JS. However, the pre-built React UI components from the registry are only compatible with React projects.
4. Do I need to host my own server for real-time collaboration? For full, multi-user collaboration with persistence, yes. slash-editor provides the client-side Yjs integration and recommends self-hosting the Hocuspocus server. This avoids ongoing costs but requires server infrastructure. For simpler use cases, the editor works perfectly in standalone, non-collaborative mode.
5. How do I connect my own AI model to the AI slash commands? You implement the provided StreamAdapter interface. This involves writing a function that takes the editor's context (selected text, prompt) and connects to your chosen AI provider's API (e.g., OpenAI, Anthropic, or a local endpoint), returning the streamed response. The editor handles the display and insertion of the AI-generated content.