Getting started

Install#

genesis-editor works with React 18 and 19. BlockNote comes with it as a dependency.

npm install genesis-editor

pnpm add genesis-editor
# or
yarn add genesis-editor

Import the stylesheet#

Import genesis-editor/style.css once, for example in your app's entry file or root layout. It's precompiled and scoped to the editor, so you don't need Tailwind or shadcn/ui, and it won't restyle the rest of your page.

import "genesis-editor/style.css";

To show getHTML() / toHTML() as a published article (Preview, a public page), also import genesis-editor/article.css and wrap the HTML in .genesis-article. That stylesheet is the block gaps, links, and code — not another copy of the editor.

import "genesis-editor/article.css";

<article className="genesis-article" dangerouslySetInnerHTML={{ __html: html }} />

Render the editor#

With no props you get an empty document with every editing feature. Type / to open the block menu.

Next.js and SSR#

The package is marked "use client" and is safe to render on the server: server rendering and hydration draw an empty .genesis-editor root, and the editor mounts in the browser right after. In the Next.js App Router, use it from a client component:

"use client";

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

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

Next steps#

• Usage: controlled and uncontrolled content, autosave, and read-only mode.
• HTML & paste and Markdown: load documents through the HTML engine.
• Image uploads: send images to your server.
• Playground: try every prop and copy the code.