zoedit

ZoEdit

A preconfigured, opinionated rich-text editor built on Meta's Lexical for React.

Installation

npm install zoedit

Requires React 18+:

npm install react react-dom

Usage

import { ZoEditor } from 'zoedit';
import { useState } from 'react';

function MyApp() {
  const [content, setContent] = useState();

  return (
    <ZoEditor
      value={content}
      onChange={setContent}
      placeholder="Start writing..."
    />
  );
}

Next.js (App Router)

'use client';

import { ZoEditor } from 'zoedit';
import { useState } from 'react';

export default function Editor() {
  const [content, setContent] = useState();
  return <ZoEditor value={content} onChange={setContent} />;
}

Options

<ZoEditor
  value={content}
  onChange={setContent}
  readOnly={false}
  placeholder="Type here..."
  features={{
    headings: true,   // H1-H6
    lists: true,      // Ordered & unordered
    links: true,      // Hyperlinks
    images: true,     // Images
  }}
/>

Styling

Headless by default. Add your own CSS:

.zoedit-container { /* wrapper */ }
.zoedit-toolbar { /* toolbar */ }
.zoedit-toolbar-button { /* buttons */ }
.zoedit-content-editable { /* editor area */ }
.zoedit-placeholder { /* placeholder text */ }
.zoedit-text-bold { /* bold text */ }
.zoedit-h1, .zoedit-h2, .zoedit-h3 { /* headings */ }
.zoedit-ul, .zoedit-ol { /* lists */ }
.zoedit-link { /* links */ }

See example-styles.css for a complete example.

Development

npm install
npm run dev

Open http://localhost:3000/dev in your browser.

Edit code in src/, save, and refresh browser to see changes.

Publishing

# First time
npm login

# Publish
npm version patch  # or minor/major
npm publish

# Verify
npm view zoedit

API

Props

Prop	Type	Default	Description
value	SerializedEditorState	undefined	Current editor state (Lexical JSON)
onChange	(value) => void	undefined	Called when content changes
readOnly	boolean	false	Disable editing
placeholder	string	"Start typing..."	Empty state text
features	object	All enabled	Toggle features

Types

import type { ZoEditorProps, ZoEditorFeatures } from 'zoedit';

License

MIT