Froala 5.1 Release: AI Assist Plugin

Froala 5.1 is here. This release includes performance improvements, bug fixes, and enhanced stability across the editor. But there’s one addition your team has been asking for: Froala AI Assist—a plugin that brings AI directly into your editing workflow, letting your team do what they do best: create better content, faster.

Key Takeaways

• AI Assist eliminates context-switching. Two toolbar buttons let your team chat with AI, adjust tone, and translate—all without leaving the editor.
• It’s built for any AI provider. Connect to OpenAI, self-hosted models, or your backend. Froala adapts to your architecture, not the other way around.
• Measurable productivity gains. Content teams ship faster. Marketing campaigns turn around in hours instead of days. Support docs get clearer instantly.

• New drag-drop events give you fine-grained control. The drop.beforeCleanup and drop.afterCleanup events let you inspect and modify HTML during drop operations—fixing false cleanup triggers and enabling custom workflows.

Meet Froala AI Assist

AI Assist embeds intelligence directly into your editor—two new powerful toolbar buttons, zero context switching.

AI Chat: Ask Anything Without Leaving

A dedicated AI button opens an interactive popup inside the editor. Your team can:

• Ask questions and get instant answers
• Generate new content from prompts
• Expand ideas and refine existing text.
• Brainstorm in real-time

All without opening a new tab. All without losing their place or focus.

Productivity gain: Drafting + refinement happens in one interface. No tool-switching tax.

AI Shortcuts: One Click, Instant Results

Select text. Click a dropdown. Choose an action. Done.

Supported actions out of the box:

• Tone adjustment (Professional, Casual, Friendly, Empathetic—fully customizable)
• Instant translation (any language you support)

No prompts. No waiting for configuration. Just immediate, contextual improvement.

Productivity gain: Tasks that used to require external tools now take seconds.

Real-World Productivity Wins

CMS Platforms: Content editors write faster when they don’t context-switch. More content ships. Same headcount.

Email Builders: Marketing teams adjust tone and language in seconds instead of minutes. Campaign turnaround drops from days to hours.

Documentation Tools: Support teams simplify complex technical language instantly. Better docs, faster. Users get better self-service.

Internal Tools: Teams communicate clearer, faster. Less back-and-forth. More work done.

Anywhere your users create content, AI Assist makes them measurably more productive. That’s not a feature. That’s a business impact.

Built for Developers: Flexible Integration, Full Control

We know that AI integration isn’t one-size-fits-all. That’s why AI Assist is designed to work with any AI provider and any architecture.

Two Integration Paths

Option 1: Frontend (Quick Start)

Connect directly to your AI provider from the browser using a custom request handler.

Best for:

• Prototyping
• Internal tools
• Fast experimentation

Benefits:

• Minimal setup
• Full control over prompts
• Quick time-to-value

Important Consideration ⚠️Exposing your AI API key in frontend code can be risky. It may lead to:

• Unauthorized usage
• Unexpected costs
• Security vulnerabilities

Code Example

new FroalaEditor('#editor', {
  toolbarButtons: ['aiAssist'],
  
  aiAssistEndpoint: 'https://api.example.com/v1/generate',
  
  aiAssistHeaders: {
    'X-API-Key': 'your-api-key',
    'Content-Type': 'application/json'
  },
  
  aiAssistDataKeys: {
    question: 'input_text',
    sessionId: 'thread_id',
    sessionIdValue: generateSessionId(),
    questionOrderNumber: 'turn_number'
  },
  
  aiAssistAdditionalData: {
    model_version: 'v2',
    output_format: 'html',
    language: 'en'
  },
  
  // Response format: { status: 'success', result: { output: { text: '...' } } }
  aiAssistResponseParserPath: 'result.output.text'
});

Option 2: Backend (Recommended for Production)

Route AI requests through your backend for full control and security.

Best for:

• Production applications
• SaaS platforms
• Enterprise environments

Benefits:

• Protect API keys
• Validate and sanitize requests
• Monitor usage and costs
• Add business logic and guardrails

Code Example:

new FroalaEditor('#editor', {
 toolbarButtons: ['aiAssist'],

 aiAssistRequest: async function(data, signal) {
   try {
     const response = await fetch('https://your-backend.com/api/ai', {
       method: 'POST',
       headers: {
         'Authorization': 'Bearer ' + getUserToken(),
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
         prompt: data.prompt,
         context: data.context,
         user_id: getCurrentUserId()
       }),
       signal: signal
     });
    
     if (!response.ok) {
       throw new Error('AI request failed: ' + response.statusText);
     }
    
     const result = await response.json();
    
     // Validate response
     if (!result.success) {
       throw new Error(result.error || 'Unknown error');
     }
    
     return result.data.content;
    
   } catch (error) {
     console.error('AI request error:', error);
     throw error;
   }
 },

 events: {
   'aiAssist.beforeInsert': function(event, content) {
     // Sanitize content before insertion
     const sanitized = sanitizeHTML(content);
     return sanitized.length > 0;
   },
  
   'aiAssist.afterInsert': function() {
     // Track usage
     trackAIUsage('content_inserted');
   }
 }
});

This approach ensures your AI integration is secure, scalable, and production-ready.

Simple Configuration, Powerful Customization

AI Assist is designed to be easy to enable—and powerful to customize.

At its core, setup is as simple as:

• Enabling AI features
• Connecting your AI endpoint or request handler

From there, you can tailor every aspect of the experience:

Customize the AI Behavior

• Define your own prompt templates

new FroalaEditor('.selector', {
  aiAssistPromptTemplate: `You are a helpful writing assistant.
Generate content based on the question below.
Your response must be in valid HTML format only.
Preserve all HTML formatting, tags, links, and styles.
Do not include markdown code blocks or backticks.
`
});

• Control how AI responds (HTML-safe output, formatting rules, etc.)
• Add custom metadata (user ID, model settings, etc.)

new FroalaEditor('.selector', {
 aiAssistAdditionalData: {
   user_id: 'user-12345',
   model: 'gpt-4',
   temperature: 0.7,
   max_tokens: 1000
 }
});

Customize Tone & Translation Options

Easily configure:

• Tone styles (e.g., Professional, Casual, Enthusiastic, Empathetic)

new FroalaEditor('.selector', {
aiAssistToneOptions: [
  {
    title: 'Professional',
    prompt: 'Rewrite the following content using polished, formal, and respectful language. Maintain a professional tone that conveys expertise and competence. Preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Casual',
    prompt: 'Rewrite the following content using casual, conversational language as if speaking with a friend. Keep the tone relaxed and informal. Preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Enthusiastic',
    prompt: 'Rewrite the following content with high energy and excitement. Use enthusiastic language that conveys passion. Preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Empathetic',
    prompt: 'Rewrite the following content with deep understanding and compassion. Show empathy and emotional intelligence. Preserve all HTML formatting, links, and styles.'
  }
]
});

• Supported languages for translation

new FroalaEditor('.selector', {
aiAssistTranslateOptions: [
  {
    title: 'English',
    prompt: 'Translate the following content to English. Maintain the original meaning, tone, and preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Spanish',
    prompt: 'Translate the following content to Spanish. Maintain the original meaning, tone, and preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Italian',
    prompt: 'Translate the following content to Italian. Maintain the original meaning, tone, and preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Portuguese',
    prompt: 'Translate the following content to Portuguese. Maintain the original meaning, tone, and preserve all HTML formatting, links, and styles.'
  }
]
});

Each option is fully customizable with your own AI instructions.

Adapt to Any API Format

AI Assist works with any backend using flexible configuration options:

• Map request fields to match your API
• Add custom headers (auth tokens, etc.)
• Parse responses from any structure

new FroalaEditor('.selector', {
aiAssistResponseParserPath: 'data.answer'
});

// For response: { data: { answer: "text" } }
aiAssistResponseParserPath: 'data.answer'

// For response: { choices: [{ text: "text" }] }
aiAssistResponseParserPath: 'choices[0].text'

// For response: { result: { messages: [{ content: "text" }] } }
aiAssistResponseParserPath: 'result.messages[0].content'

No need to change your backend—Froala adapts to you.

Control the Experience with Events & Methods

AI Assist gives you full control over how AI content behaves inside your editor.

Key capabilities include:

• Intercept AI responses before insertion. Validate, filter, or reject content.
• React after content is inserted. Trigger analytics, tracking, or workflows.
• Programmatically open the AI popup. Launch AI interactions from anywhere in your UI.

This makes it easy to integrate AI into your product’s logic—not just the UI.

From Idea to Integration in Minutes

Whether you want a simple AI-powered editor or a fully customized AI workflow, Froala AI Assist makes it easy:

• Plug-and-play setup
• Works with any AI provider
• Fully customizable behavior
• Built for both frontend and backend architectures

Get started in four simple steps

1. Enable AI Assist in your Froala instance
2. Connect your AI endpoint (frontend or backend)
3. Customize tones, languages, and prompts for your brand
4. Your users ship content 3x faster

No infrastructure changes. No architectural constraints. Just productivity gains.

AI Assist: Legal Terms & User Consent

To use AI Assist, you’ll need to set aiSupplementalTermsAccepted to true in your configuration. This captures explicit user consent for our AI legal terms. 

The Obvious Question: Is This Secure?

Your data stays where you control it.

• Using OpenAI? Data goes to OpenAI (their policy).
• Self-hosted model? Data never leaves your servers.
• Your backend? You own the entire chain.

Froala never stores, logs, or uses your content. We route requests and responses. That’s it.

Start Shipping Faster Today

Content creation shouldn’t be fragmented. Your team shouldn’t context-switch between five tools to write one email.

Froala AI Assist brings intelligence where your team actually works—saving time, eliminating friction, letting them focus on what matters: creating better content.

Explore the Froala AI Assist documentation and start integrating today.

Other Enhancements in Froala 5.1

Beyond AI Assist, this release includes important improvements across the editor:

Event Handling & Drag-Drop Operations

We’ve added fine-grained control over drag-drop interactions with two new events:

• drop.beforeCleanup – Triggered before content cleanup during a drop operation, letting you inspect or modify HTML before processing.
• drop.afterCleanup – Triggered after cleanup is complete, giving you access to the final HTML state.

Bug Fixes

Moreover, there are a few bugs fixed including:

List & Formatting Fixes

• Numbered list font sizing – Font size adjustments now consistently apply to all list items, including empty ones at the end.
• Ordered list indent behavior – “Decrease Indent” now works on numbered lists just like it does on bullet lists, properly removing list formatting and outdenting text.

Accessibility Improvements

• Table cell properties – Fixed keyboard navigation so you can now use Enter/Spacebar to interact with cell property controls.

Explore the release notes.

Should You Upgrade?

If you’re looking to ship content faster: AI Assist alone justifies the upgrade. Your team gets built-in AI capabilities without tool-switching—that’s a measurable productivity gain.

If you’re building event-driven workflows: The new drop.beforeCleanup and drop.afterCleanup events give you precise control over drag-drop interactions, fixing the false paste.afterCleanup triggers that were causing unintended logic execution.

This release isn’t just incremental. It’s a meaningful jump in both capability and reliability. Upgrade to Froala 5.1 now.

Try The Latest Froala Editor

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

Support and Feedback

We are dedicated to always offering the best possible experience for all our users. Thank you for being a valuable part of our vibrant and growing community. We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.

Change Log

Please visit the release notes for a complete list of changes.

Technical Questions

If you have a technical question, you can check whether we have already answered it in our help center. If not, contact our Support team.