{"library":"react-simple-wysiwyg","title":"React Simple WYSIWYG Editor","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-simple-wysiwyg"],"cli":null},"imports":["import Editor from 'react-simple-wysiwyg';","import { Toolbar } from 'react-simple-wysiwyg';","import { BtnBold } from 'react-simple-wysiwyg';","import { createButton } from 'react-simple-wysiwyg';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState } from 'react';\nimport Editor from 'react-simple-wysiwyg';\n\nfunction MyRichTextEditor() {\n  const [htmlContent, setHtmlContent] = useState('Write your <b>rich text</b> here!');\n\n  // The onChange event provides an event object with e.target.value containing the HTML string.\n  function handleChange(e: { target: { value: string } }) {\n    setHtmlContent(e.target.value);\n  }\n\n  return (\n    <div style={{ maxWidth: '800px', margin: '20px auto', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}>\n      <h2>My Simple Editor</h2>\n      <Editor \n        value={htmlContent}\n        onChange={handleChange}\n        containerProps={{ style: { marginTop: '15px', border: '1px solid #ccc', borderRadius: '4px' } }}\n        placeholder=\"Start typing...\"\n      />\n      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#666' }}>\n        Current HTML Output (for demonstration):\n      </p>\n      <pre style={{ background: '#f8f8f8', padding: '10px', borderRadius: '4px', overflowX: 'auto' }}>\n        {htmlContent}\n      </pre>\n    </div>\n  );\n}\n\n// To render this in a typical React application:\n// import React from 'react';\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root')!);\n// root.render(<React.StrictMode><MyRichTextEditor /></React.StrictMode>);\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}