Froala v5.5.0: AI Image Generation, Headless Mode, and More

We are excited to announce Froala v5.5.0, a release that brings:

• AI image generation in AI Assist, so writers can create and insert visuals without leaving the editor.
• Headless mode (initial release), which lets you run Froala with no built-in UI and build your own interface and styling on top of its editing engine.
• Expanded Suggestion mode in the Collaboration plugin, making image, video, and link changes reviewable just like text edits.
• More control and polish, including side panel state APIs, model-aware AI Chat toggles, new image and video resize events, and a round of bug fixes.

Here is what’s new and how to start using it.

Headless Mode (Initial Release)

What Is Froala Headless Mode?

A new headless option runs Froala as a pure editing engine. The editable area and all Action API methods (bold, align, lists, undo/redo, and more) keep working, but Froala draws none of its own UI:

• Toolbar: never added to the page.
• Popups, modals, and toasts: turned off. Methods that would open one simply do nothing.
• Quick insert, line breaker, drag handles, image resize handles: not built.
• Styling: the editor box gets an fr-headless class that removes Froala’s default font, color, padding, and border, so your own CSS decides how content looks.
• Word paste: the keep/clean formatting modal is skipped and content is cleaned right away.
• Character and word counters: off by default, but you can still turn them on.
• Collaboration: disabled in headless mode, even if collabConfig is set.

Benefits of Using Froala Headless Mode

Until now, there was no way to stop Froala from injecting its toolbar, popups, and styling. If your product has its own design system, you can now build a fully custom interface on top of Froala’s proven editing core, without fighting default UI or CSS.

A few methods were also updated so they work without a popup or toolbar click:

• image.insertByURL(url) accepts the URL directly.
• align.apply(), quote.apply(), and lists.format() focus the editor first if nothing is selected, so they always have a caret to work from.

How to Use Froala Headless Mode

const editor = new FroalaEditor('#editor', {
  headless: true
});

document.querySelector('#my-bold').addEventListener('click', function () {
  editor.commands.bold();
});

document.querySelector('#my-image').addEventListener('click', function () {
  editor.image.insertByURL('https://example.com/photo.jpg');
});

For plugin authors: five new helpers let your custom plugins behave correctly in headless mode, just like the built-in ones: 

• helpers.isHeadless()

• helpers.isUserOpt(key)

• helpers.headlessDefault(key, value)

• helpers.guardHeadlessUI(pluginApi, methodNames)

• helpers.ensureHeadlessFocus().

FroalaEditor.PLUGINS.myHighlighter = function (editor) {
  function apply() {
    editor.helpers.ensureHeadlessFocus();
    editor.format.applyStyle('background-color', 'yellow');
  }
  return { apply: apply };
};

This is the first release of headless mode with an initial, limited feature scope. We plan to expand it in upcoming versions.

AI Image Generation in AI Assist

What it is

AI Assist is no longer limited to text. Users can describe the image they want in the AI Assist prompt, and Froala sends the request to the AI model you have configured. Then users can:

• Preview the generated image inside the AI Assist popup.
• Insert it at the cursor position with one click, using Froala’s standard image insertion, so the image behaves like any other image in the editor.
• Regenerate it to get a new version from the same prompt.

The feature is provider-agnostic. It works with whichever AI service you connect, as long as that model supports image generation.

Why it matters

Writers can illustrate blog posts, product pages, or docs in the same place they write, instead of switching to a separate image tool, downloading the file, and uploading it again. For you, there is no new UI to build: it reuses the AI Assist experience your users already know.

How to use it

Point AI Assist at your own backend, and have that backend call an image-capable model. When a user clicks Regenerate, Froala resends the original prompt and context with regenerate: true, so a caching backend knows to return a fresh image instead of the same one.

new FroalaEditor('.selector', {
  aiAssistRequest: async function (data, signal) {
    const response = await fetch('/api/ai', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        prompt: data.prompt,
        context: data.context,
        noCache: data.regenerate === true
      }),
      signal: signal
    });
    return response.json();
  }
});

Collaboration Upgrades

Suggestion Mode Now Covers Image, Video, and Link Edits

In the Collaboration plugin’s Suggestion mode, more edits now create a reviewable suggestion instead of applying instantly:

• Resizing images and videos. Drag or keyboard resizes show up as an “Image resized” or “Video resized” card with a solid border around the element. Multiple resizes on the same element merge into one suggestion. Reject restores the size from before the first resize; Accept keeps the new size.
• Image popup edits: replace (upload or URL), remove, alt text, size, display, alignment, styles, and captions.
• Video popup edits: replace, remove, size, display, alignment, and autoplay.
• Link popup edits: insert, edit (URL, text, target, rel, title), styles, and unlink.

Suggestion cards are also clearer. They now say what the edit did and replacements use their own distinct color.

Why it matters: Reviewers no longer miss changes made through element popups. Every media and link change can be seen, discussed, and accepted or rejected like any text edit, which keeps team review workflows complete and trustworthy.

How to use it: No setup is needed. When Suggestion mode is on, these edits become suggestions automatically.

Full Control Over the Collaboration Side Panel

What it is: The comments and suggestions side panel now remembers the state the local user chose.

New API surface:

• collabConfig.panel.defaultState: start the panel as 'expanded' (default), 'collapsed', or 'hidden'. It applies before the first paint, so there is no flash or layout shift on load.
• collaborative.getPanelState(): read the current state.
• collaborative.setPanelState(state): set the state from your own code.
• collab.panelStateChanged event: fires with state, previousState, and origin whenever the state actually changes.

Why it matters: You can match the panel to your app’s layout from the very first render and build your own toggle buttons that always stay in sync.

How to use it:

const editor = new FroalaEditor('#editor', {
  collabConfig: {
    user: { id: 'user-1', name: 'Alex Walker', role: 'editor' },
    docId: 'my-document',
    panel: { defaultState: 'hidden' }
  },
  events: {
    'collab.panelStateChanged': function (state, previousState, origin) {
      document.querySelector('#show-comments')
        .classList.toggle('is-active', state !== 'hidden');
    }
  }
});

document.querySelector('#show-comments').addEventListener('click', function () {
  editor.collaborative.setPanelState('expanded');
});

AI Chat Respects Each Model’s Capabilities

What it is

The webSearch and reasoning flags on each aiChatModels entry now control the composer toggles. When a model sets a capability to false:

• The toggle is disabled and cannot be turned on.
• It is turned off automatically when the user switches to that model, with a short inline notice.
• The flag is removed from requests sent for that model, including direct aiAssist.requestAnswer() calls.

Only an explicit false disables a toggle. Disabled toggles stay reachable by keyboard and screen readers, which announce why they are unavailable.

Why it matters

Users can no longer turn on web search for a model that can’t search.

How to use it

new FroalaEditor('.selector', {
  aiChatModels: [
    {
      modelName: 'openai/gpt-oss-120b',
      displayName: 'GPT-OSS 120B',
      webSearch: true,
      reasoning: true
    },
    {
      modelName: 'llama-3.1-8b-instant',
      displayName: 'Llama 3.1 8B Instant',
      webSearch: false, // toggle is disabled for this model
      reasoning: false
    }
  ],
  aiChatWebSearchEnabled: true
});

New Image and Video Resize Events

What it is

New events now fire around every image and video resize, whether the user drags a handle or resizes with the keyboard:

• image.resizeStart (new): fires when the user grabs a resize handle, before the size changes. It completes the existing image.resize and image.resizeEnd events.
• video.resizeStart (new): fires before a video’s size changes.
• video.resizeEnd (new): fires after the new video size is applied.

The replaced events also carry more information now:

• image.replaced receives a third argument, old_src, with the replaced image’s source.
• video.replaced receives the upload response (or undefined for URL/embed) and old_src.

Existing handlers keep working, since the original arguments are unchanged.

Why it matters

You can record an element’s size before and after a resize, which is useful for undo tools, audit logs, or saving layout changes to your backend. With old_src, you can also delete a replaced file from your server so unused uploads don’t pile up.

How to use it

new FroalaEditor('.selector', {
  events: {
    'image.resizeStart': function ($img) {
      console.log('Resizing from', $img[0].width, 'x', $img[0].height);
    },
    'video.resizeEnd': function ($video) {
      const $el = $video.find('iframe, video, embed');
      console.log('New size:', $el.attr('width'), 'x', $el.attr('height'));
    },
    'image.replaced': function ($img, response, old_src) {
      fetch('/images/delete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ src: old_src })
      });
    }
  }
});

Additional Froala v5.5.0 Improvements and Fixes

Lists

• New preserveListMarkerStyle option. By default (true), bolding or italicizing a whole list item styles the <li> so the bullet or number matches. Set it to false to keep semantic <strong> and <em> tags instead. This is useful when your HTML goes through a sanitizer that removes <li> styles, or into emails or Markdown exports.

new FroalaEditor('.selector', {

  preserveListMarkerStyle: false

});

// Whole bold item → <li><strong>Item</strong></li>

Images and Video Events

• image.replaced now receives a third argument, old_src, so you can clean up the replaced file on your server.
• video.replaced now receives the upload response (or undefined for URL/embed) and old_src.
• Existing handlers keep working since the original arguments are unchanged.

Collaboration and Selection

• Selection highlight stay visible when typing in popup fields. When focus moves into a text field inside a popup (like a link URL input), the selected text stays highlighted. This now also works in collaborative mode without adding extra steps to undo history. The AI Chat “Selected Content” highlight uses the same improvement.

Bug Fixes

• Fixed Clear Formatting in Suggestion mode: it now creates a suggestion for accepted formatted content, removes pending Enter-key markers cleanly, and no longer creates cards for unformatted or still-pending content.
• Fixed a browser spell-check correction needing two Undo actions to revert in Suggestion mode. One Undo now reverts it completely.
• Fixed the “Add comment” floating button not appearing on mobile after press-and-hold text selection.
• Fixed Page Break not working when the editor is placed inside an HTML table.

A full list of the remaining enhancements and bug fixes is on the v5.5.0 changelog page.

Upgrading to Froala v5.5.0

No breaking changes in this release.

Step 1: Update the package

npm install froala-editor@5.5.0

CDN

<link href="https://cdn.jsdelivr.net/npm/froala-editor@5.5.0/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@5.5.0/js/froala_editor.pkgd.min.js"></script>

If you use a framework wrapper (React, Angular, Vue, Svelte), update it to the version that supports Froala 5.5.0.

Step 2: Clear caches

Clear your build and browser caches so the new files load.

Step 3: Test key workflows

Check your main editing flows, especially collaboration, AI features, and any custom plugins.

Upgrading from an older major version? Follow the Froala 3 to Froala 5 migration guide.

What’s Coming Next

With this release’s AI work delivered, our focus now widens to architecture and accessibility. Here is what the team is working on:

• Headless Mode: Full Coverage (In progress). We’re extending headless mode beyond the initial scope in v5.5.0, so every part of the editor can be driven from your own design system without falling back to Froala’s built-in UI.
• Accessibility Checker Plugin (Planned). A new plugin that scans content against WCAG levels A, AA, and AAA plus Section 508, with one-click fixes. We plan to include it in every license rather than as a paid add-on.

Have a use case for any of these? We’d love to hear from you.

Plans may change as development progresses.

Try Froala v5.5.0 Today

Froala v5.5.0 gives you more freedom to build the editing experience your users need, from AI-generated visuals and a fully custom UI to complete review workflows for media and links.

• Try it in the Playground
• Read the Documentation
• Download Froala Editor

We would love to hear what you build with it. If something does not behave the way you expect, open an issue and tell us. Share your feedback with our team and help shape the next release.