I built slash-editor because the hard part of adding a Notion-like editor to my React products was not the editing engine. It was the block experience around it: slash commands, drag handles, nested reordering, and the controls that make editing feel natural with both keyboard and mouse. I wanted those interactions, customizable shadcn-style UI, and an MIT-licensed foundation to fit together without depending on a hosted service.
Why I wanted another Notion-like editor
In my experience building products, the editor engine was not the main obstacle. The challenge was delivering the interactions people expect from a block editor: inserting content from a slash menu, finding a block’s drag handle, moving nested content, changing a block’s type, and attaching comments to blocks.
As an Amazon Associate I earn from qualifying purchases.
I found tradeoffs in the options I considered. Some approaches meant using styled npm components that did not fit the application’s design system; others meant choosing a different editor engine, or relying on features such as templates, AI, or comments that were offered commercially. That is my experience and motivation, not an exhaustive comparison of editors or a claim that all alternatives have the same limitations.
Free tools Windows power users keep installed
One-click scans. No signup required.
I wanted three things at once: keyboard-first editing with mouse equivalents, UI that could use existing shadcn tokens and dark mode, and an MIT dependency graph. I also wanted developers to bring their own services for sync, AI, and uploads rather than require a hosted backend.
#1 Best Overall
What slash-editor is designed to provide
Slash-editor is a Notion-style block editor for React. Its project describes a headless core built on Tiptap and ProseMirror, React hooks for integration, and UI components distributed through a shadcn registry. Registry components are copied into the application, where its developers can change the code rather than treating the UI as a fixed hosted product.
The project describes its dependency graph as MIT-licensed and says there is no paid tier or hosted dependency. Those are project statements, not an independent audit of every dependency or confirmation of current package metadata. The project documentation also describes the division into a headless core, React bindings, and separately installable UI components: slash-editor documentation.
How the architecture separates editing from UI
Core: document model and commands
@slash-editor/core contains the Tiptap and ProseMirror extensions, schema, and commands. It has no React or CSS dependency, so document behavior is kept separate from rendering.
React bindings: lifecycle and state
@slash-editor/react builds on @tiptap/react. The author describes its role as handling editor lifecycle, subscriptions to state, and caret-anchor geometry through hooks.
Registry UI: application-owned components
The shadcn registry supplies rendered UI that developers copy into their own applications. The core exposes UI state machines through subscribe and getState; React hooks turn those into component state and anchor positions, while registry components render controls using primitives such as Popover and Command. This split is intended to make it possible to modify the presentation without rewriting the editor’s underlying behavior.
Why block interactions need more than a caret
Finding drag targets
A pointer in the gutter or block padding may not correspond to a text caret. For drag handles, I resolve hover and drop targets from cached block rectangles instead of relying only on caret position. The move is performed as a single delete-and-insert transaction, which makes it one undo step and carries the block ID.
Nesting within the document schema
For nested placement, I check what the document schema permits rather than wrapping everything in a universal block container. The goal is to preserve ordinary Tiptap JSON that can work with extensions and Markdown serialization, rather than impose a custom outer structure on every block.
Stable IDs and collaboration
Block IDs are assigned when content is inserted, not when it is rendered. When pasted content would duplicate IDs, those IDs are regenerated; remote y-sync transactions are skipped. I designed that behavior to support combinations such as Yjs collaboration, block-anchored comments, and Mermaid diagrams. These are implementation claims, not independent compatibility-test results.
What the version 0.5 feature snapshot includes
The article’s version 0.5 snapshot describes the following capabilities. It is a snapshot, not confirmation of what a later or current release supports.
- Block creation and organization: a slash menu with ranking, aliases, groups, and custom items; drag handles; and block menus.
- Content blocks: headings, lists, task lists, toggles, callouts, quotes, columns, and tables.
- Media and embeds: image, video, file, and embed blocks using an upload adapter.
- Extensions and collaboration: mentions, adapter-based AI actions, real-time collaboration with Yjs, Hocuspocus, or WebRTC, presence avatars, comments, and Mermaid diagrams.
- Reading and portability: table of contents, read-only documents, Markdown import and export, and Markdown shortcuts.
- Developer resources: documentation files intended for coding agents.
The article also lists what the project does not aim to provide: a hosted sync server, AI gateway, or asset storage; DOCX or PDF fidelity, pagination, or track changes; and support for frameworks other than React at the time described. The core is renderer-free, but that does not by itself establish support for other framework bindings.
What I leave to adapters and application teams
Sync infrastructure and asset storage are not hosted by the project; the intended approach is to connect them through adapters. AI actions are also adapter-based. That gives teams room to use their own services, but means they are responsible for selecting, operating, and securing those services. A project that avoids a hosted dependency does not eliminate the operational work of providing sync, AI, or uploads.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →The same separation applies to the UI: copying registry code gives an application control over its components, but also makes those components part of the application’s code to maintain. This is a tradeoff between control and convenience, not a promise that customization or maintenance is cost-free.
Best Value
How to decide whether this foundation fits
Before adopting any editor foundation, map its design to the product’s actual requirements. For slash-editor, the questions I would start with are:
- Interaction model: Does the product need slash insertion, keyboard-first block editing, mouse-based drag handles, nesting, and block-level actions?
- UI ownership: Is copying and modifying UI code in the application preferable to consuming a fixed component package?
- Licensing: Do the project’s license statements and the licenses of the exact dependencies in the version you plan to use meet your requirements? Verify the current package and dependency metadata rather than relying only on a general project claim.
- Infrastructure: Can the team supply and operate sync, AI, and asset services through adapters?
- Framework and formats: Is React support sufficient, and do you need DOCX or PDF fidelity, pagination, or tracked changes that fall outside the stated scope?
- Evidence: Are the available implementation details enough for your use case, or do you require independent performance, accessibility, security, or production-case evidence?
The reviewed article and documentation introduction do not report independent adoption figures, benchmarks, audits, production case studies, or comparative evaluations. They explain the project’s approach and intended scope; they do not establish that it is faster, safer, or better suited to every application than another editor.
Trying it and giving feedback
The author invites developers to try the playground, open it in two tabs with a collaboration-room parameter, inspect the starter, and comment on the API shape before 1.0. These are invitations from the project author, not independent verification of the playground or current release. The article displays a September 30 posting date without a year, and the documentation introduction does not identify a current release version. As the author puts it: “Feedback on the API shape is the most valuable thing right now, before 1.0 locks it in.”
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
