edix

• Purpose: Edix is an experimental, framework-agnostic state manager for contenteditable elements, designed to simplify rich text editing in modern web development. It addresses the inconsistencies and bugs of native contenteditable while maintaining a lightweight footprint (~4kB).

• Key Features:

  • Fixes contenteditable issues to work better with declarative frameworks.
  • Supports both single-line and multi-line editing modes.
  • Provides a simple API for managing editable content state.
  • Small size (~4kB) makes it suitable for lightweight use cases.

• Target Audience: Developers who need a lightweight, customizable rich text editing solution without the complexity of full-fledged editors like ProseMirror or Lexical.

• Framework Support: Works with React, Vue, Svelte, Solid, Angular, Preact, Qwik, and vanilla JS. Svelte support is included, with a dedicated demo and example source .

• Core Workflow:

  1. Define content declaratively (following specific rules for contenteditable).
  2. Initialize the editor with editable() on mount.
  3. Update state via onChange callback.
  4. Clean up with dispose() on unmount.

• Documentation: Detailed API reference and framework-specific examples available.