Registry / web-framework / react-simple-wysiwyg

react-simple-wysiwyg

library3.4.1jsnpmunverified

react-simple-wysiwyg is a lightweight and performant React component for creating basic WYSIWYG rich text editing experiences. Currently at version 3.4.1, it focuses on providing essential editing functionality without the extensive features and overhead of more complex editors like Slate.js, Tiptap, CKEditor, or TinyMCE. Its key differentiators include a small bundle size (~9kb, ~4kb gzipped), ease of configuration, and extensibility for simple custom buttons. The library explicitly states it does not sanitize HTML, provide advanced features like table or image editors, or alter HTML generated by the browser, requiring developers to handle these aspects externally (e.g., using `sanitize-html` for sanitization). While it utilizes the deprecated `document.execCommand` API, it justifies this by noting the lack of a modern alternative and its continued use by many popular WYSIWYG editors. The project appears to be actively maintained, with recent updates and open issues on GitHub.

web-framework serialization

npm install react-simple-wysiwyg

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SIMPLE-WYSIW

react-simple-wysiwyg

web-frameworkjavascriptv3.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Editor

✓ import Editor from 'react-simple-wysiwyg';

✗ import { Editor } from 'react-simple-wysiwyg'; // Editor is the default export, not named.

The primary WYSIWYG component is exported as a default module.

Toolbar

✓ import { Toolbar } from 'react-simple-wysiwyg';

✗ import Toolbar from 'react-simple-wysiwyg'; // Toolbar is a named export.

Used for composing custom toolbars with specific buttons.

BtnBold

✓ import { BtnBold } from 'react-simple-wysiwyg';

✗ const { BtnBold } = require('react-simple-wysiwyg'); // This package is ESM-first and ships TypeScript types. Prefer ESM imports.

Example of a pre-built toolbar button component. Other buttons like `BtnItalic` are also named exports.

createButton

✓ import { createButton } from 'react-simple-wysiwyg';

A utility function for programmatically creating custom toolbar buttons with `document.execCommand`.

This quickstart demonstrates how to set up `react-simple-wysiwyg` as a controlled component within a React functional component, managing its HTML content using React's `useState` hook. It also shows basic styling and output display.

import { useState } from 'react'; import Editor from 'react-simple-wysiwyg'; function MyRichTextEditor() { const [htmlContent, setHtmlContent] = useState('Write your <b>rich text</b> here!'); // The onChange event provides an event object with e.target.value containing the HTML string. function handleChange(e: { target: { value: string } }) { setHtmlContent(e.target.value); } return ( <div style={{ maxWidth: '800px', margin: '20px auto', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}> <h2>My Simple Editor</h2> <Editor value={htmlContent} onChange={handleChange} containerProps={{ style: { marginTop: '15px', border: '1px solid #ccc', borderRadius: '4px' } }} placeholder="Start typing..." /> <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#666' }}> Current HTML Output (for demonstration): </p> <pre style={{ background: '#f8f8f8', padding: '10px', borderRadius: '4px', overflowX: 'auto' }}> {htmlContent} </pre> </div> ); } // To render this in a typical React application: // import React from 'react'; // import ReactDOM from 'react-dom/client'; // const root = ReactDOM.createRoot(document.getElementById('root')!); // root.render(<React.StrictMode><MyRichTextEditor /></React.StrictMode>);

Debug

Known issues

deprecatedThe underlying `document.execCommand` API, which `react-simple-wysiwyg` heavily relies on for rich text operations, is deprecated. While currently functional across most browsers, its long-term support and future behavior are uncertain, and it lacks a modern, standardized replacement.

fix

Be aware of this API's status. There is no direct fix provided by the library, as it's an upstream browser API issue. For applications requiring future-proof or more advanced editor capabilities, consider alternatives built on different technologies (e.g., ProseMirror, Lexical).

affects: >=1.0.0

gotchaThis editor explicitly DOES NOT sanitize HTML input. User-provided content, especially if sourced from untrusted inputs, must be sanitized externally (e.g., using `sanitize-html`) before being rendered or stored, to prevent Cross-Site Scripting (XSS) vulnerabilities.

fix

Integrate a robust HTML sanitization library (such as `sanitize-html`) into your application's data flow. Apply sanitization to any HTML content retrieved from the editor's `onChange` event before displaying it or persisting it to a database.

affects: >=1.0.0

gotchaThe editor does not include advanced features like table editing, image uploading/embedding, spell check, or complex media integration. It focuses on basic text formatting.

fix

Evaluate your application's rich text requirements. If advanced features are crucial, explore more feature-rich WYSIWYG editors. If `react-simple-wysiwyg`'s core functionality is sufficient, custom solutions for specific missing features might be integrated, but understand the library's design limitations.

affects: >=1.0.0

gotchaBy default, the editor does not modify or normalize the raw HTML generated by the browser's `contenteditable` element. This can sometimes result in 'dirty' or inconsistent HTML output depending on user interactions and browser specifics.

fix

If clean and consistent HTML output is a critical requirement, you may need to implement a post-processing step to normalize or clean the HTML string received from the editor's `onChange` event, or opt for an editor that offers more explicit control over HTML generation.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Editor is not a function

Attempting to use `Editor` as a named import when it is the default export of the package.

fix

Change the import statement from `import { Editor } from 'react-simple-wysiwyg';` to `import Editor from 'react-simple-wysiwyg';`

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

The `value` prop provided to the `Editor` component changes between `undefined` and a string, typically because the initial state is not set or is conditionally applied.

fix

Ensure the `value` prop is always provided and managed by React state, even if it's an empty string initially. For example, use `const [html, setHtml] = useState('');` to initialize the content as an empty string.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `YourComponent`.

This error often occurs when toolbar button components (e.g., `BtnBold`, `BtnItalic`) are not imported as named exports or are used incorrectly outside the `<Toolbar>` component.

fix

Verify that all toolbar-related components are correctly imported as named exports (e.g., `import { Toolbar, BtnBold } from 'react-simple-wysiwyg';`) and are rendered as children of the `<Toolbar>` component within the `<Editor>`.

Upgrade

Version history

3.4.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for all React applications using this component.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/megahertz/react-simple-wysiwyg ↗

packagehttps://www.npmjs.com/package/react-simple-wysiwyg ↗