Froala v5.3.0: Real-Time Collaborative, Svelte.js Support, and More

Key Takeaways

• The new Collaborative plugin adds real-time editing, comments, suggestions, and version control.
• Real-time collaboration and persistence require a backend server (included in the Node SDK).
• An official Svelte wrapper, svelte-froala-wysiwyg, makes Svelte integration native.
• Custom font sizes, module-friendly Word import, and more private clipboard handling round out the release.

Heads-Up Before You Upgrade

Good news: v5.3.0 introduces no breaking API changes. Your existing configuration will continue to work as-is. There is one behavioral change worth knowing about before you deploy:

• Clipboard storage no longer uses localStorage by default. Copied editor content is now written to the Origin Private File System (OPFS) in secure contexts, with an automatic localStorage fallback for non-secure contexts. This change happens automatically and requires no configuration. See the Improvements section for details.

What’s New in v5.3.0

New Features

• Collaborative plugin. Real-time editing, inline comments, tracked-change suggestions, and version control, all in one plugin. This is the flagship feature of the release, covered in detail below.
• Svelte.js support. An official Svelte wrapper, svelte-froala-wysiwyg, lets you drop the editor into a Svelte project with two-way data binding and full access to Froala’s options and events, no custom integration required.
• Custom font sizes. The font-size dropdown now includes a custom option that opens a popup for entering an exact size, with configurable minimum and maximum limits so users can set the precise size they need without leaving the toolbar.

Improvements

• Configurable Mammoth instance for Import from Word. A new importFromWordMammoth option lets you pass the Mammoth library as a module, which makes the Import from Word plugin work cleanly in modern build tools like Vite, Webpack, and other ES-module bundlers instead of relying on a global window.mammoth.
• More private clipboard handling. Copied content is no longer persisted to localStorage by default. Froala now uses the Origin Private File System (OPFS) for clipboard metadata in secure contexts, reducing exposure of potentially sensitive content. See Private Clipboard Handling below for details.

Deep Dive: The Collaborative Plugin

Editing content is rarely a solo activity. Teams co-author articles, review contracts, and approve knowledge-base updates together, and until now that meant leaving the editor to trade changes over email, exports, and Word round-trips. The result was overwritten content from simultaneous edits, slow approval cycles, and no reliable history to roll back to.

The new Collaborative plugin solves this by bringing four highly requested capabilities into the editor itself:

• Real-time editing. Every editor instance stays in sync as users type. A conflict-free replicated data type (CRDT) engine resolves concurrent edits and presence indicators show active cursors, so two people can edit the same document without overwriting each other.
• Comments. Highlight any text and attach a threaded, inline comment. Collaborators can reply, resolve threads, and @mention teammates, all anchored to the exact content under discussion.

• Suggestions. Reviewers propose insertions, deletions, and rewrites without touching the live document. Owners accept or reject each change individually.

• Version control. Browse timestamped snapshots with author attribution, compare any two versions side by side, and restore a prior state in one click.

How It Works

The Collaborative plugin operates in two modes. In real-time mode, editors that share the same docId connect to a WebSocket server and collaborate live. In asynchronous (offline-first) mode, the plugin instead reads and writes collaborative data through REST endpoints. The single switch that flips between them is collabConfig.realTime.syncUrl: set it to enable real-time collaboration, or leave it null to fall back to async mode.

Comments, suggestions, and version history are shared live between connected users, but that live data is not persisted on its own. To store it in a database, point the editor at your backend using commentsUrl, suggestionsUrl, and versionControl.url.

Configuring the Editor

Here is a real-time setup with a user identity, a shared document ID, persistence URLs for comments, suggestions, and versions, and periodic auto-saved snapshots:

new FroalaEditor('.selector', {
  collabConfig: {
    user: {
      id: 'user-42',
      name: 'Alice',
      role: 'editor' // 'editor' | 'suggester' | 'viewer'
    },
    docId: 'my-doc',
    commentsUrl: 'http://localhost:3000/collab/my-doc/comments',
    suggestionsUrl: 'http://localhost:3000/collab/my-doc/suggestions',
    realTime: {
      syncUrl: 'ws://localhost:3000',
      reconnectDelay: 2000
    },
    versionControl: {
      url: 'http://localhost:3000/collab/my-doc/versions',
      autoSaveEnabled: true,
      autoSaveInterval: 300000 // save a snapshot every 5 minutes
    }
  }
});

The plugin also exposes methods and events for driving collaboration from your own UI. For example, you can switch modes, add a comment on the current selection, or save a named version snapshot:

var editor = new FroalaEditor('.selector', {}, function () {
  // Switch the active collaboration mode (respects the user's role).
  editor.collaborative.setMode('suggesting');

  // Add a comment anchored to the currently selected text.
  editor.collaborative.addComment('Please clarify this sentence.');

  // Save a named version snapshot.
  editor.collaborative.saveVersion('Draft v1', 'Before major revisions')
    .then(function (record) {
      console.log('Saved version:', record.id);
    });
});

And you can react to collaboration activity through events such as collab.connectionStatus, collab.remoteContentChanged, and version:create:

new FroalaEditor('.selector', {
  events: {
    'collab.connectionStatus': function (status) {
      // 'connecting' | 'connected' | 'disconnected'
      console.log('Connection status:', status);
    },
    'collab.remoteContentChanged': function () {
      console.log('Remote content updated.');
    },
    'version:create': function (record) {
      console.log('New version saved:', record.title, 'at', record.createdAt);
    }
  }
});

Setting Up the Backend

Real-time collaboration and persistence require a backend server. The Collaborative backend ships in the wysiwyg-editor-node-sdk package and is split into four modules: a WebSocket relay for real-time peer sync, REST endpoints for comments and suggestions, a version history store, and an async content-save endpoint. All four can share a single HTTP server and a single SQLite file, and the required better-sqlite3 dependency installs automatically with the package.

A minimal Express server that runs the WebSocket relay and all REST routes on one port looks like this:

const http = require('http');
const path = require('path');
const express = require('express');

const FroalaEditor = require('wysiwyg-editor-node-sdk');
const Collaborative = FroalaEditor.Collaborative;
const CollabPersistence = FroalaEditor.CollabPersistence;
const VersionControl = FroalaEditor.VersionControl;
const AsyncSave = FroalaEditor.AsyncSave;

const app = express();
app.use(express.json());

// REST routes for comments + suggestions, version history, and async save.
// All three can share a single SQLite file.
const dbPath = path.join(__dirname, 'data', 'collab.db');
CollabPersistence.attachRoutes(app, { dbPath: dbPath });
VersionControl.attachRoutes(app, { dbPath: dbPath });
AsyncSave.attachRoutes(app, { dbPath: dbPath });

// Share a single HTTP server between Express and the WebSocket relay.
const server = http.createServer(app);
Collaborative.attachToServer(server);

server.listen(3000, function () {
  console.log('Collaborative backend listening on port 3000');
});

Once the server is running, clients that connect with the same docId are treated as peers: the relay broadcasts every sync message to the other members of that document, while the REST endpoints (namespaced under /collab/:docId/) persist comments, suggestions, and version snapshots. For the full endpoint reference, request and response schemas, and configuration options, see the docs.

More in This Release

Custom Font Sizes

Users sometimes need a size that isn’t in the preset list. Adding custom to the fontSize array surfaces a Custom option in the dropdown that opens a popup for entering an exact value, so users can hit the precise size they want without a workaround. Two new options, fontSizeCustomMin (default 8) and fontSizeCustomMax (default 96), validate the entered value. Existing preset sizes behave exactly as before. Note that if you override the default fontSize array and still want this feature, you must explicitly include 'custom'.

new FroalaEditor('.selector', {
  // Add 'custom' to expose the manual-entry option.
  fontSize: ['8', '12', '18', '24', '36', '48', 'custom'],
  fontSizeCustomMin: 8,
  fontSizeCustomMax: 96
});

Svelte.js Support

Svelte developers now have an official wrapper for Froala Editor. The svelte-froala-wysiwyg component gives you a native Svelte way to drop the editor into a project, so you no longer have to build or maintain your own integration to get the editor running in a Svelte app. It ships with two-way data binding, full access to Froala’s options and events, support for initializing on special tags, and manual control over the editor lifecycle.

To get started, run:

npm install svelte-froala-wysiwyg

Configurable Mammoth for Import from Word

The Import from Word plugin previously expected mammoth.js on the global window object, which is awkward in module-based builds. The new importFromWordMammoth option lets you pass the library instance explicitly, so the plugin works in Vite, Webpack, and ES-module setups. It defaults to window.mammoth, and you can set it to false to disable it. The Mammoth library must still be available before the editor initializes.

import mammoth from 'mammoth';

new FroalaEditor('.selector', {
  importFromWordMammoth: mammoth
});

Import from Word plugin docs

Private Clipboard Handling

Previously, content copied within the editor could be persisted in the browser’s localStorage, which meant user-generated content, potentially including sensitive or personally identifiable information, could linger beyond the editing session. That raised data-minimization and storage-limitation concerns under regulations such as GDPR, with no way to control the behavior.

In v5.3.0, Froala no longer persists clipboard content to localStorage by default. Clipboard metadata is now stored in the Origin Private File System (OPFS), a more isolated, browser-managed storage mechanism that reduces exposure through standard browser storage APIs. Because OPFS is only available in secure contexts, the editor checks window.isSecureContext and automatically falls back to localStorage on non-secure domains, so copy and paste keep working reliably everywhere. Native browser copy/paste behavior and compatibility with external applications are fully preserved, and the change requires no configuration on your part.

Much More…

This release includes additional improvements and bug fixes. Including:

• Improved: Enhanced the Dark theme with refined styling for popups to improve visibility and consistency.
• Fixed: Browser spellcheck no longer expands the selection beyond the target word into adjacent text nodes (such as after <br> elements), preventing unintended text deletion.
• Fixed: Word counter now correctly blocks input at the maximum limit even when followed by punctuation.

See the complete changelog for details.

Upgrade to v5.3.0 Today

Froala Editor v5.3.0 is a major step forward in collaboration, developer experience, and privacy. With a full real-time Collaborative plugin, native Svelte.js support, customizable font sizes, module-friendly Word import, and more private clipboard handling, this release delivers tangible value for developers and end users alike.

Key Benefits

• Collaborate in real time. Real-time editing, comments, suggestions, and version control let teams co-author in the editor instead of trading exports and email threads, with no overwrites from simultaneous edits.
• Drop into modern stacks. Native Svelte.js support and a module-friendly Import from Word option mean Froala fits cleanly into Svelte, Vite, Webpack, and ES-module builds.
• Give users precise control. The custom font-size input lets users enter an exact size, with configurable min and max limits, without leaving the toolbar.
• Keep content more private. Clipboard data stays out of localStorage by default, reducing exposure of potentially sensitive content while copy and paste keep working reliably everywhere.
• Upgrade with confidence. No breaking API changes, so your existing configuration keeps working as-is.

Whether you are building the next generation of content management systems, developing collaborative enterprise applications, or simply want the most reliable and feature-rich editing experience available, v5.3.0 has something for you.

Upgrade to the latest version and start collaborating in real time.

Ready to Upgrade?

Check our getting-started guide to know how to download the latest Froala Editor release and how to include it in your project based on your preferred method. As always, our support team is here to help if you have any questions or need assistance with the upgrade process.

Upgrade to Froala Editor v5.3.0 today and unlock new possibilities.

Try the Latest Froala Editor

Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.

Thank you for being part of the Froala community. We are committed to continuously improving and delivering the tools you need to build exceptional content experiences.