# genesis-editor

> A production-grade, backend-agnostic block editor for React with markdown import/export, HTML support, embeds, multi-column layouts, media uploads, and a plugin-based architecture. React 18 and 19; the HTML parser also runs on Node 18+ with linkedom or jsdom.

Install with `npm install genesis-editor` and import `genesis-editor/style.css` once. Published HTML from getHTML() uses `genesis-editor/article.css` on `.genesis-article`. Each page below is the Markdown version of the docs page at the same path without `.md`.

## Docs

- [Getting started](https://genesis-editor-three.vercel.app/docs/getting-started.md): Install the package, import its stylesheet, and render the editor.
- [Usage](https://genesis-editor-three.vercel.app/docs/usage.md): Seed or control the document, save it automatically, and drive the editor from code.
- [Image uploads](https://genesis-editor-three.vercel.app/docs/image-uploads.md): Add images by URL, or upload them from the device to your server or your own function.
- [Embeds](https://genesis-editor-three.vercel.app/docs/embeds.md): Videos, posts, music, maps and design files from 33 providers, from links, iframe code or the sites' own embed code, plus sandboxed iframes from anywhere else.
- [Link previews](https://genesis-editor-three.vercel.app/docs/link-previews.md): Links to other sites as cards with the page's title, description, image and site name, plus links on images.
- [Colors](https://genesis-editor-three.vercel.app/docs/colors.md): Theme-aware palette colours, your brand swatches and any exact hex, side by side.
- [Font size](https://genesis-editor-three.vercel.app/docs/font-size.md): A size dropdown in the selection toolbar. The menu is 6–20 px; paste and import can keep larger steps through 72.
- [Code blocks](https://genesis-editor-three.vercel.app/docs/code-blocks.md): A language picker and syntax highlighting, with HTML that still round-trips as a pre and code tag.
- [Theming](https://genesis-editor-three.vercel.app/docs/theming.md): Light, dark, or system color schemes, your brand colors, and your font.
- [Tools & plugins](https://genesis-editor-three.vercel.app/docs/tools.md): Pick the blocks and formatting the editor offers, arrange its toolbar, and add your own blocks with plugins.
- [HTML & paste](https://genesis-editor-three.vercel.app/docs/html.md): Load and save HTML instead of blocks, and paste content from Google Docs, Word, and web pages without carrying their markup along.
- [Columns](https://genesis-editor-three.vercel.app/docs/columns.md): Google Docs–style two- and three-column layouts: an image beside a heading and body, not a table of images. MIT, not BlockNote XL.
- [Markdown](https://genesis-editor-three.vercel.app/docs/markdown.md): Load Markdown as HTML through the genesis engine: format="markdown", setMarkdown, and paste detection.
- [Document import](https://genesis-editor-three.vercel.app/docs/document-import.md): Load a Word, OpenDocument, HTML, Markdown, or text file through the same HTML engine as paste.

## Reference

- [API reference](https://genesis-editor-three.vercel.app/docs/api.md): Generated from the `BlockEditorProps` and `BlockEditorHandle` types in the package source, so it always matches what you install.
- [Keyboard shortcuts](https://genesis-editor-three.vercel.app/docs/shortcuts.md): Format, restructure, and convert blocks without leaving the keyboard.

## Optional

- [Full docs](https://genesis-editor-three.vercel.app/llms-full.txt): every page above in one Markdown file
- [Playground](https://genesis-editor-three.vercel.app/playground): try the props live, import a document or load HTML and see the import report
- [npm package](https://www.npmjs.com/package/genesis-editor): README, changelog and versions
- [Source on GitHub](https://github.com/sumankalia/genesis-editor): issues, CONTRIBUTING and the changelog