The shadcn of rich text editors.

Blokhaus

A zero-abstraction, copy-paste block editor for Next.js. You own every component, every node, every line of code. Built on Lexical.

npm i @blokhaus/core

Get Started View on GitHub

Zero Abstraction

Copy-paste into your project. Read every line. Fork fearlessly. No black boxes.

Block Editor UX

Drag-and-drop blocks, slash commands, floating toolbar. The Notion-style experience your users expect.

AI Streaming

Ephemeral AI preview nodes with accept/discard. Clean undo history — zero AST corruption during streaming.

20+ Plugins

Images, videos, tables, mentions, code blocks, callouts, toggles, lists, emoji, links — all composable.

Full Theming

CSS custom properties for every color, radius, and shadow. Dark mode included. Match any design system.

TypeScript First

Strict mode. Every prop typed. Every hook documented. Autocomplete-driven development.

Compose your editor

Every feature is an independent component. Include what you need, remove what you don't.

editor.tsx

import {
  EditorRoot,
  FloatingToolbar,
  SlashMenu,
  OverlayPortal,
  InputRulePlugin,
  ImagePlugin,
  AIPlugin,
  MentionPlugin,
} from "@blokhaus/core";

export function Editor() {
  return (
    <EditorRoot namespace="my-editor">
      <FloatingToolbar />
      <SlashMenu />
      <OverlayPortal namespace="my-editor" />
      <InputRulePlugin />
      <ImagePlugin uploadHandler={upload} />
      <AIPlugin provider={myAI} />
      <MentionPlugin providers={[users]} />
    </EditorRoot>
  );
}