Skip to content

Turn Claude into a Froala WYSIWYG expert

A context plugin that gives Claude Code framework-specific knowledge of the Froala editor, covering initialization, events, custom plugins, and uploads. Add it once and Claude just knows Froala.

/plugin marketplace add https://github.com/froala/froala-claude
claude code — froala
You Initialize Froala in a React component with an image-upload toolbar.
✦ froala-initialization-and-sdks activated
import FroalaEditor from 'react-froala-wysiwyg';
export default () => (
<FroalaEditor
tag='textarea'
config={{
toolbarButtons: ['bold', 'insertImage'],
imageUploadURL: '/api/upload'
}}
/>
);
What’s inside

Five skills that activate on demand

Claude pulls in the right Froala expertise based on what you’re building, with the right skill activating on its own.
01

Initialization & SDKs

Setup for Vanilla JS, React, Vue 3, and Angular — toolbar config, lifecycle management, and license key handling done right. Triggers on imports like froala-editor.
02

Methods & Events

Event listeners (events.on, contentChanged), content via html.get()/set(), paste cleanup, and correct API timing.
03

Custom Plugins

Full boilerplate for FroalaEditor.PLUGINS, custom dropdown buttons, floating popups, SVG icon registration, and state sync.
04

Filestack Integration

The official Froala Filestack plugin (filestackOptions) or manual interception with image.beforeUpload and CDN URLs.
05

Error Diagnosis

A quick-diagnosis checklist for missing toolbars, styling issues, init failures, plugin loading problems, and upload errors.
+

All in one plugin

Pure structured Froala knowledge that travels with your Claude Code workspace. Self-contained, with nothing to run.
How it works

Add it once, then just ask

Skills load themselves into context the moment your question matches. You write Froala code; Claude brings the expertise.
1

Add the GitHub repo as a marketplace

The plugin isn't on the official Claude marketplace yet, so point Claude Code straight at the repo: /plugin marketplace add https://github.com/froala/froala-claude.

2

Install the plugin

Run /plugin install froala@froala-claude. That's the whole setup. One command, fully self-contained.

3

Ask Claude anything Froala

“Initialize Froala in a React component with an image-upload toolbar.” The right skill activates automatically.

# 1. add the GitHub repo as a marketplace (not yet on the official one)
/plugin marketplace add https://github.com/froala/froala-claude
# 2. install the plugin
/plugin install froala@froala-claude
# then just ask — skills activate on their own
> How do I init Froala in Vue 3 with Filestack?
Two commands, straight from GitHub. Fully self-contained.
In practice

Real prompts, real Froala code

Ask in plain language. The matching skill activates and Claude responds with working, framework-correct code.
You

“Set up Froala in React with a dark theme.”

✦ froala-initialization-and-sdks
import FroalaEditor from 'react-froala-wysiwyg';
export default function Editor() {
return (
<FroalaEditor
tag='textarea'
config={{ theme: 'dark', heightMin: 240 }}
/>
);
}
You

“How do I react whenever the content changes?”

✦ froala-methods-and-events
new FroalaEditor('#editor', {
events: {
contentChanged() {
// latest HTML on every edit
console.log(this.html.get());
}
}
});
You

“Add a toolbar button that inserts a signature block.”

✦ froala-custom-plugins
FroalaEditor.DefineIcon('insertSig', { NAME: 'star' });
FroalaEditor.RegisterCommand('insertSig', {
title: 'Signature',
focus: true,
callback() {
this.html.insert('<p>&mdash; Sent via Froala</p>');
}
});
You

“Use Filestack for image uploads.”

✦ froala-filestack-integration
new FroalaEditor('#editor', {
pluginsEnabled: ['image', 'filestack'],
filestackOptions: {
filestackAPI: 'YOUR_FILESTACK_KEY',
uploadToFilestackOnly: true
}
});
You

“My custom button does nothing when clicked.”

✦ froala-error-diagnosis
  • Is the command added to toolbarButtons?
  • Was RegisterCommand called before init?
  • Using a regular function so this binds to the editor?
  • Plugin listed in pluginsEnabled if it's a plugin?
You

“Strip formatting from pasted content.”

✦ froala-methods-and-events
new FroalaEditor('#editor', {
pastePlain: true,
events: {
'paste.afterCleanup'(html) {
return html.replace(/style="[^"]*"/g, '');
}
}
});
Framework-specific guidance for
Vanilla JS React Vue 3 Angular

Ship Froala features faster with Claude

Add the plugin and keep your focus in the editor.
Get the plugin on GitHub