react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor

Usage no npm install needed!

<script type="module">
  import reactSimpleWysiwyg from 'https://cdn.skypack.dev/react-simple-wysiwyg';
</script>

README

react-simple-wysiwyg

Build Status NPM version npm bundle size

Simple and lightweight React WYSIWYG editor. Demo.

Description

Screenshot

It can be helpful if you only need basic text operations. It's:

  • pretty small (~8.6kb, ~3.6kb gzipped)
  • fast
  • simple to configure
  • simple to extend

Of course, it's not so powerful as other complex editors. It DOES NOT:

  • ✗ change HTML generated by a browser (sometimes it can be too dirty)
  • ✗ sanitize HTML (you can use sanitize-html)
  • ✗ contain a lot of features as others (like table editor, image editor and so on)
  • ✗ support old browsers (IE 11 is minimal)

If you need more powerful solution for React, you'd better take a look at:

Usage

  1. Install with npm:

    npm install react-simple-wysiwyg

    or CDN (unpkg.com)

    <script src="//unpkg.com/react-simple-wysiwyg"></script>

  2. Use the component

    import React from 'react';
    import { DefaultEditor } from 'react-simple-wysiwyg';
    
    function App() {
      const [html, setHtml] = React.useState('my <b>HTML</b>');
      
      function onChange(e) {
        setHtml(e.target.value);
      }
    
      return (
        <DefaultEditor value={html} onChange={onChange} />
      );
    }
    

Credits