WYSIWYG or block editor? I built the one in between

Rich text editors have been split into two camps for a long time.

WYSIWYG editors work with HTML directly. They're good with existing content, but the document is a pile of markup that's hard to structure, validate or rearrange.

Block editors give you clean structure, a slash menu and drag handles. But they usually want to own the data, and pasting real-world HTML into them is where things tend to break.

I kept needing something in between: the structure and feel of a block editor, with the HTML and Markdown compatibility of a WYSIWYG one. So I built genesis-editor.

• HTML in, HTML out. Load or paste existing HTML, edit it as blocks, and export clean HTML again.
• Markdown too. [Describe what works, based on your Markdown docs page.]
• Genesis edits; your app stores. No backend, no lock-in. Your database stays the source of truth.

👉 Live playground · Docs · GitHub · npm

Try it in a minute

npm install genesis-editor

import "genesis-editor/style.css";
import { BlockEditor } from "genesis-editor";

export default function Page() {
  return <BlockEditor persist />;
}

That gives you the slash menu, drag handles, nesting, Markdown shortcuts, tables, columns, code blocks, embeds and image uploads. It works with React 18 and 19 and renders safely on the server in Next.js.

What it adds on top of a block editor

Genesis is built on BlockNote. Most of what I've added is aimed at real-world content:

• A paste engine for Google Docs, Word, Notion, Gmail and ordinary web pages
• Columns that repair themselves if they end up malformed
• Font size and colours that survive a paste
• Code blocks, tables, embeds, link previews and image uploads
• Autosave, read-only mode and theming
• A parse report that tells you what was downgraded or couldn't be mapped, instead of silently dropping it

The hard part is paste, not editing

Copying from a website sounds simple until you look at what the browser puts on the clipboard. Two real bugs I hit and fixed in the last week:

1. Code with a background colour blocked the whole paste.
Pasting <code style="background:#eee">x</code> threw Invalid collection of marks for node text. The editor's code mark can't sit alongside any other mark, and the parser produced code plus a background colour. Code text now carries no other style, enforced both when parsing and when sanitising.

2. Pasted list items came out smaller than the paragraphs.
On dev.to itself, font-size: 20px sits on the <ul>, not on each <li>. My parser never applied the list's own style to its items, so each item was read as 16px against a 20px body and snapped to a smaller size. List items now inherit from their list.

Both came from real clipboard HTML, not from tests I'd have thought to write.

Where testing stands

I want to be upfront: this is young software, and I'm still testing it as hard as I can.

• There's a test suite covering the parser, round-trips, columns and more, and CI runs it on every change.
• It isn't enough yet. Real pastes keep finding cases I didn't anticipate. Right now I'm collecting clipboard HTML from different sources as fixtures, and I'm still tracking down issues such as [mention a known open one if you like, e.g. Word bullet lists and a code-language crash on paste].
• I'd rather you hear that from me than discover it in production.

If something doesn't paste cleanly for you, please open an issue with the HTML. The docs show how to grab it from the clipboard. Every report becomes a test.

Built on BlockNote, and pinned on purpose

I pin BlockNote to 0.56.0. I don't want an upstream release to silently break features that people rely on, so there's a contract test that fails if the BlockNote structure I depend on changes. Upgrading will be a deliberate, separate decision.

What's next

Genesis is young, and the list of things I want to build is longer than the list of things I've shipped. Here's where I'm headed, roughly in order:

Content and import

• Better Word paste and .docx import
• Table upgrades: header rows and columns, cell colours, column widths, and paste from Excel or Google Sheets
• A lightweight read-only renderer, so public pages can show content without loading the whole editor

Editing experience

• Media polish: alt-text editing, captions, image alignment and resizable embeds
• Mentions (@user) and an emoji picker
• Translations and right-to-left text, since the editor's own UI is English only today

Bigger bets

• Real-time collaboration
• An AI hook that works with any model: write or rewrite from the / menu or a text selection, then accept or discard
• Richer content data, such as links that point at a record by ID, and a formal schema for the saved format

Some of these I know how to build. Others need more thought. If one of them matters to you, tell me in an issue or a comment, because that's how I'll decide what comes first.

If you try it, I'd love to hear what works and what doesn't.

⭐ GitHub