genesis-editor
A block editor for content that already exists. Paste HTML in, edit, HTML out. Genesis edits; the host app stores. Slash menu, drag handles, and uploads in one component.
npm install genesis-editorSlash menu
Type / to insert or convert any block: headings, lists, to-dos, quotes, code, tables, images.
Drag and nest
Hover to grab a block's handle and reorder it. Tab and Shift+Tab nest and lift blocks.
Shortcuts
Markdown shortcuts as you type, plus Mod+B, Mod+I, Mod+E for code and Mod+K for links.
Image uploads
Pick, drop, or paste images. Send them to your endpoint or your own upload function.
Light and dark
A theme prop, CSS variables for your brand, and the host page's font.
Drop-in CSS
One scoped stylesheet. No Tailwind or shadcn/ui setup needed in your app.
Two lines to a working editor
Import the component and its stylesheet. Add persist to keep the document in localStorage, and point uploads at your server.
import { BlockEditor } from "genesis-editor";
import "genesis-editor/style.css";
export function Notes() {
return <BlockEditor persist uploadUrl="/api/uploads" />;
}