The best lightweight rich text editors: under pressure

Website performance has always been important. The different libraries that support a given website must provide speed, and also provide a useful array of features. Essentially, you need components – like a rich text editor – that are optimized and lightweight, but that also provide capabilities you need now, and in the future.

You could choose the first lightweight text editor that comes up in your search. You could also consult opinions from Stack Overflow or Quora. But what really helps is a direct comparison across a few useful points of difference.

That’s what you’ll find in this article. A summary of some of the best lightweight rich text editors – compared on their speed to load on, feature availability, as well as how difficult it is to reconfigure the editor.

What’s the TL;DR? The TinyMCE rich text editor, when self-hosted, provides a lightweight text editor with a competitive load speed while delivering a useful range of features.

TinyMCE provides flexibility to fit into different projects, and is effortlessly customizable, which allows your needs to expand and change over time without extra development overhead.

Top lightweight HTML editors compared

The following table introduces the editors selected for comparison. If you need direct information on minimum size, the creator of the Pell text editor jaredreich assembled a useful contrast of different library sizes, some of which are included in the following table:

Lightweight WYSIWYG editors' performance metrics

The following table lists a direct comparison of the chosen performance metrics.

These are:

• The amount of information transferred when the page loads, measured in KB
• Time taken to load external content on the test page (in this case lightweight text editor component libraries).

NOTE: Where possible, the integration was completed through a local npm connection, or through downloaded, minified files to ensure the best lightweight text editor was included in the tests.

Method for lightweight editor comparison

Each editor received the same testing conditions: copying an existing, public web page, and then loading the page with each editor integrated into the copy HTML and JavaScript. 

The browser Dev Tools option for inspecting network activity (the Network tab) provides a measurement of speed in terms of load time in milliseconds.

1. Navigate to the Wikipedia front page

2. Save the Wikipedia front page as an html file

3. Navigate to this line (line 112 of the HTML file in the test run):

<input id="searchInput" name="search" type="search" size="20" autofocus="autofocus" accesskey="F" dir="auto" autocomplete="off">

4. Change it to the entry point for the the lightweight text editor, for example:

<div id="editorjs"></div>

5. Open the file in the browser using a local host command (Python or PHP commands, for example).

6. Use the network tab of the browser's developer consoles to check on the loading speeds

Using an established and public page gives a standard baseline for each editor to perform on, when measuring the content transferred as well as the time taken for the DOM content to load.

Lightweight editor performance results

1. TinyMCE

Access: The TinyMCE self-hosted essential version

TinyMCE’s speed to load registered as roughly in the middle of the comparison at 314 ms load time for the demo page with TinyMCE configured. TinyMCE is easily customizable by design, making the option to change the lightweight editor easier, if needed, in the future. It’s possible to get TinyMCE up and running in 5 minutes (or less), and reconfiguring plugins is straightforward, only requiring adding or deleting the plugin name from the TinyMCE plugins option:

tinymce.init({
  selector: "textarea#lightweight",
  plugins: [
    "advlist",
    "autolink",
    "lists",
    "link",
    "image",
    "charmap",
    "preview",
    "anchor",
    "searchreplace",
    "visualblocks",
    "code",
    "fullscreen",
    "insertdatetime",
    "media",
    "table",
    "help",
    "wordcount",
  ],
  content_style:
    "body { font-family:Helvetica,Arial,sans-serif; font-size:16px }",
});

2. Froala

Access: Installed through npm

The Froala integration followed the getting started overview. This resulted in several link and script tags to manage. The load time through npm was rapid, with 274ms elapsed to load the demo page when Froala is configured. To access the Froala CDN link, a paid account is required. Further configuration also requires making changes to multiple scripts within the HTML.

3. Medium-Editor

Access: npm installation

This lightweight text editor is a copy of the Medium website editor. It’s open source, and does not require any additional libraries. The Readme file on the GitHub repository provided installation instructions, and the tests showed a load time of 254 ms, making this editor one of the lighter editors.

4. Pell

Access: Installed through npm

The Pell lightweight text editor is designed to be minimal and fast. This became clear in the results, which resulted in a load time of 249 ms, the speediest in this comparison test. Pell has a list of essential features. It’s not designed to be flexible and change what it can provide for different use cases.

5. Quill

Access: The Quill CDN link

Following the Quill documentation, the basic, lightweight editor configuration showed a load speed of 270 ms. This was one of the faster editors. Be aware that Quill requires multiple script tags positioned throughout the HTML as well as a CSS link to run the editor, as well as features that require multiple nested JavaScript lines to configure, which makes modifications in the long term more difficult:

</body>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: {
        container: '#toolbar', 
        handlers: {
          'bold': customBoldHandler
        }
      }
    },
      theme: 'snow'
  });
</script>
</html>

6. Tiptap

Access: CDN link

Tiptap usually requires the ability to use JavaScript import statements with Webpack or similar. This makes the configuration more difficult to get up and running depending on your use case. The documentation provided instructions for a CDN connection, and the resulting load time was 587 ms as a result.

Prosemirror: a lightweight text editor similar to Tiptap

While not included in the comparison, the lightweight text editor Prosemirror also offers a speedy experience. The strength of Prosemirror lies in its deeper customization, whereas Tiptap is designed to be easy to drop in and use. Since Tiptap offers an easier integration experience, it’s recommended for situations where a text editor is needed quickly.

7. CKEditor 5

Access: Through CDN link

When checking CKEditor 5’s installation options, the npm package lists the Classic Editor as having an unpacked size of 8.03MB. Its speed of configuration was medium, and comparable to the other lightweight text editors. The quickstart guide in the documentation provided installation steps, which results in several lines of JavaScript to handle plugin and feature configuration.

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Top lightweight HTML editors compared

For pure speed, there’s Pell – it’s designed for fast pace loading, and offers a great, lightweight text editor experience. Since it’s designed for speed, its features are purposely kept limited.

For a variety of different options and competitive speed, consider TinyMCE, Quill, or CKEditor.

For the balance of speed of options, as well as ease of configuration and reconfiguration as requirements change, TinyMCE offers a great experience. When self-hosted, which can be set up in a few steps, TinyMCE’s effortless customizability gives it a distinct advantage as a lightweight rich text editor.

Contact the TinyMCE Sales team if you have any questions on how TinyMCE can work as the lightweight text editor that empowers your project.