WYSIWYG Editor Library

A lightweight WYSIWYG editor component for React with a clean, editorial interface. The library emits HTML on every change and is styled with Tailwind CSS utilities.

Dev preview

pnpm install
pnpm dev

Build the library

pnpm build

The library build outputs ESM, CJS, and type declarations to dist/.

Usage

import { useState } from 'react'
import { WysiwygEditor } from 'wysiwygeditor'
import 'wysiwygeditor/styles.css'

export function Example() {
  const [value, setValue] = useState('')

  return (
    <WysiwygEditor
      value={value}
      onChange={setValue}
      variant="soft"
      tone="system"
    />
  )
}

Variants and tone

• variant: soft (default), crisp, flat
• tone: light, dark, system (default)

Email-safe output

Set outputMode="email" to sanitize output into a conservative, email-friendly HTML subset and expose a Table button for signature layouts.

Typography and color

• fontOptions: array of font strings or { label, value } objects
• fontSizeOptions: array of numeric pixel sizes
• Text and highlight color pickers are shown in outputMode="default" only

Tailwind setup

This editor uses Tailwind classes for layout and UI styling. Ensure Tailwind is configured in the host app so the component styles render properly.

Notes

• Formatting is powered by document.execCommand for lightweight browser support.
• Use value + onChange for controlled usage or defaultValue for uncontrolled usage.