wytext

WYSIWYG rich text editor for React, Next.js and Astro.

Supports Markdown, HTML source, bold, italic, underline, code blocks, alignment, lists, tables, images, video, audio, links, text color, background color, fonts and font sizes — with zero external dependencies.

Styles are injected automatically; no CSS import required.

Install

npm install wytext

Usage

React / Next.js (App Router)

'use client';

import { WyText } from 'wytext';

export default function Page() {
  return (
    <WyText
      placeholder="Start typing…"
      defaultValue="<p>Hello <strong>world</strong></p>"
      onChange={(html) => console.log(html)}
    />
  );
}

Astro

---
import { WyText } from 'wytext';
---

<WyText client:load placeholder="Start typing…" />

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | className | string | '' | Extra class on the root element | | defaultValue | string | '' | Initial HTML content | | placeholder | string | 'Start typing here…' | Placeholder shown when empty | | onChange | (html: string) => void | — | Fires with inner HTML on each edit |

Toolbar controls

| Control | Description | | --- | --- | | MD | Toggle Markdown source mode | | <> | Toggle HTML source mode | | B / I / U | Bold · Italic · Underline | | </> | Format selection as <pre> code block | | Align buttons | Left · Center · Right · Justify | | List buttons | Bullet list · Numbered list | | Image | Insert image via URL | | Link | Insert hyperlink | | Video | Insert <video> via URL | | Audio | Insert <audio> via URL | | Table | Insert table (prompts rows/cols) | | A (color) | Text color picker | | A (bg) | Text background / highlight color | | Font selector | Change font family | | Size selector | Change font size (XS – Max) | | Eraser | Clear all formatting |

Notes

• document.execCommand is used internally. It is deprecated in the HTML spec but remains the only broadly supported API for WYSIWYG editing in browsers.
• Styles are injected once into document.head with the id wytext-styles-v1. They are fully scoped under .wytext-* class names.
• Add 'use client' in Next.js App Router since the component uses browser APIs.

License

MIT