MagicDX is a collection of 5 premium Strapi v5 plugins: Magic-Mail (email management), Magic-Link (passwordless auth), Magic-Sessionmanager (user sessions), Magic-Editor-X (collaborative editing), and Magic-Mark (query bookmarks).

Is MagicDX free to use?

Yes! All MagicDX plugins have a free tier with core features. Premium and Advanced tiers unlock additional features starting at $49/year per plugin.

Does MagicDX work with Strapi v5?

Yes, all MagicDX plugins are built specifically for Strapi v5 and use the modern Document Service API.

Magic-Editor-X

Advanced block-based rich text editor with Real-Time Collaboration for Strapi v5

What is Magic-Editor-X?

Magic-Editor-X is a powerful Strapi v5 Custom Field that replaces the default rich text editor with a modern, block-based editing experience powered by Editor.js.

Unlike regular WYSIWYG replacements, Magic-Editor-X registers as a proper Custom Field in the Content-Type Builder, giving you full control over where and how you use it.

Why Choose Magic-Editor-X?

Real-Time Collaboration - Multiple users can edit the same content simultaneously with live cursors
Block-Based Editing - Clean, structured content with 18+ block types
Custom Field - Proper Strapi v5 integration (not a hacky WYSIWYG replacement)
Media Library Support - Full integration with Strapi's built-in Media Library
Clean JSON Output - Structured content that's easy to render on any frontend
Y.js Powered - Conflict-free real-time sync using CRDT technology

Screenshots

Editor Interface Modern block-based editor with inline toolbar

Real-time collaboration with live cursors

18+ block types for any content need

Quick Start

How to Install Magic-Editor-X

Step 1: Install the package

bash

npm install magic-editor-x
# or
yarn add magic-editor-x

Step 2: Enable in Strapi config

Add to config/plugins.ts:

typescript

export default () => ({
  'magic-editor-x': {
    enabled: true,
    config: {
      collaboration: {
        enabled: true, // Enable real-time collaboration
      },
    },
  },
});

Step 3: Build and start

bash

npm run build
npm run develop

Step 4: Add to Content Type

Open Content-Type Builder
Add a new field
Go to Custom tab
Select Magic Editor X
Configure and save!

Available Block Types

What Block Types Does Magic-Editor-X Support?

Magic-Editor-X includes 18+ block types out of the box:

Block Type	Description	Keyboard Shortcut
Header	H1-H4 headings	`Cmd+Shift+H`
Paragraph	Basic text block	-
List	Ordered & unordered lists	`Cmd+Shift+L`
Checklist	Interactive checkboxes	`Cmd+Shift+C`
Quote	Blockquotes with caption	`Cmd+Shift+Q`
Warning	Alert/warning boxes	`Cmd+Shift+W`
Code	Syntax highlighted code	`Cmd+Shift+P`
Delimiter	Visual separator	`Cmd+Shift+D`
Table	Create/edit tables	`Cmd+Shift+T`
Embed	YouTube, Vimeo, Twitter	-
Raw HTML	Insert custom HTML	-
Image	Upload by file or URL	-
Media Library	Strapi Media Library	-
Link	Rich link previews	-

Inline Formatting Tools

Tool	Description	Shortcut
Bold	Bold text	`Cmd+B`
Italic	Italic text	`Cmd+I`
Underline	Underline text	`Cmd+U`
Marker	Highlight text	`Cmd+Shift+M`
Inline Code	Code formatting	`Cmd+Shift+I`
Link	Add hyperlinks	`Cmd+K`

Real-Time Collaboration

How Does Real-Time Collaboration Work?

Magic-Editor-X includes built-in real-time collaboration powered by Y.js and Socket.io.

How it works:

When a user opens a content entry, they automatically join a collaboration room
Changes sync instantly using Y.js CRDT (Conflict-free Replicated Data Types)
Remote cursors show where other users are editing
Presence indicators show who's currently in the document

Managing Collaborators

Navigate to Plugins > Magic Editor X > Collaboration to:

Add collaborators with different roles
Set permissions per content type
View collaborator usage vs. plan limit

Collaboration Roles

Role	Can View	Can Edit	Can Manage
Viewer	Yes	No	No
Editor	Yes	Yes	No
Owner	Yes	Yes	Yes

Output Format

What Format Does Magic-Editor-X Output?

Magic-Editor-X outputs clean, structured JSON that's easy to render:

json

{
  "time": 1699999999999,
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": {
        "text": "Hello World",
        "level": 2
      }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": {
        "text": "This is a paragraph with <b>bold</b> text."
      }
    },
    {
      "id": "ghi789",
      "type": "list",
      "data": {
        "style": "unordered",
        "items": ["Item 1", "Item 2", "Item 3"]
      }
    }
  ],
  "version": "2.31.0"
}

Rendering on Frontend

javascript

// React example
function renderBlock(block) {
  switch (block.type) {
    case 'header':
      const Tag = `h${block.data.level}`;
      return <Tag key={block.id}>{block.data.text}</Tag>;
    case 'paragraph':
      return <p key={block.id} dangerouslySetInnerHTML={{ __html: block.data.text }} />;
    case 'list':
      const ListTag = block.data.style === 'ordered' ? 'ol' : 'ul';
      return (
        <ListTag key={block.id}>
          {block.data.items.map((item, i) => <li key={i}>{item}</li>)}
        </ListTag>
      );
    // ... more block types
  }
}

API Endpoints

Editor Endpoints (Public)

Method	Endpoint	Description
`GET`	`/api/magic-editor-x/link?url=...`	Fetch link metadata for previews
`POST`	`/api/magic-editor-x/image/byFile`	Upload image by file
`POST`	`/api/magic-editor-x/image/byUrl`	Upload image by URL

License Endpoints (Admin)

Method	Endpoint	Description
`GET`	`/magic-editor-x/license/status`	Get license status
`GET`	`/magic-editor-x/license/limits`	Get current limits
`POST`	`/magic-editor-x/license/auto-create`	Auto-create FREE license
`POST`	`/magic-editor-x/license/store-key`	Activate existing license

Collaboration Endpoints (Admin)

Method	Endpoint	Description
`GET`	`/magic-editor-x/collaboration/permissions`	List all permissions
`POST`	`/magic-editor-x/collaboration/permissions`	Add collaborator
`PUT`	`/magic-editor-x/collaboration/permissions/:id`	Update permission
`DELETE`	`/magic-editor-x/collaboration/permissions/:id`	Remove collaborator

Pricing

How Much Does Magic-Editor-X Cost?

Magic-Editor-X uses a freemium model. The editor itself is completely FREE - you only pay for extended collaboration features.

Feature	FREE	PREMIUM	ADVANCED
Full Editor Access	Yes	Yes	Yes
All 18+ Block Types	Yes	Yes	Yes
Media Library Integration	Yes	Yes	Yes
Real-Time Sync	Yes	Yes	Yes
Collaborators	2	10	Unlimited
Version History	-	Yes	Yes
AI Assistant	-	Usage-based	Full Access
Priority Support	-	Yes	Yes
Price	$0	$9.90/mo	$24.90/mo

View Full Pricing | Visit Store

Configuration Options

Content-Type Builder Settings

When adding Magic-Editor-X to a content type:

Base Settings:

Placeholder - Custom placeholder text when editor is empty

Advanced Settings:

Minimum Height - Editor minimum height in pixels (default: 300)

Plugin Configuration

typescript

// config/plugins.ts
export default () => ({
  'magic-editor-x': {
    enabled: true,
    config: {
      collaboration: {
        enabled: true,  // Enable/disable real-time collaboration
      },
    },
  },
});

Security Configuration

Content Security Policy

For link previews to display external images, update CSP in config/middlewares.js:

javascript

module.exports = [
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        directives: {
          'img-src': ['*'],
        },
      }
    },
  },
];

Frequently Asked Questions

Is Magic-Editor-X a WYSIWYG replacement?

No! Magic-Editor-X is a proper Custom Field that you add via the Content-Type Builder. It doesn't replace the default Strapi editor globally - you choose exactly where to use it.

Does it work with existing content?

Magic-Editor-X uses JSON format. If you're migrating from another editor, you'll need to convert existing content to the Editor.js JSON format.

Can I use it without collaboration?

Yes! The collaboration feature is optional. You can use Magic-Editor-X as a standalone block editor without real-time sync.

How many collaborators can edit at once?

The FREE tier supports 2 collaborators. Upgrade to PREMIUM for 10, or ADVANCED for unlimited.

Roadmap

[x] Real-Time Collaboration - Y.js + Socket.io powered
[ ] AI Integration - AI-powered content suggestions (coming soon)
[ ] Custom Blocks - Create your own block types
[ ] Version History - Track and restore content changes

Next Steps

Installation Guide - Complete setup instructions
Pricing Details - View all pricing tiers
Compare Plugins - See how it compares to other MagicDX plugins
GitHub Repository - Source code & issues

Get Magic-Editor-X

Ready to upgrade your content editing experience? Start for free!

Get Magic-Editor-X Free

No credit card required - Free tier forever - 30-day money-back guarantee

Works great with:

Magic-Mail - Send notification emails when content is published
Magic-Link - Passwordless authentication for content editors
Magic-Sessionmanager - Track who's editing what
Magic-Mark - Bookmark your favorite content entries

Support & Resources

Full Documentation - Complete plugin guide
Report a Bug - GitHub Issues
Request a Feature - Feature discussions
Email Support - Direct support

Made with ✏️ by Schero D.

Magic-Editor-X - Block-based editing with real-time collaboration

Magic-Editor-X ​

What is Magic-Editor-X? ​

Why Choose Magic-Editor-X? ​

Screenshots ​

Quick Start ​

How to Install Magic-Editor-X ​

Available Block Types ​

What Block Types Does Magic-Editor-X Support? ​

Inline Formatting Tools ​

Real-Time Collaboration ​

How Does Real-Time Collaboration Work? ​

Managing Collaborators ​

Collaboration Roles ​

Output Format ​

What Format Does Magic-Editor-X Output? ​

Rendering on Frontend ​

API Endpoints ​

Editor Endpoints (Public) ​

License Endpoints (Admin) ​

Collaboration Endpoints (Admin) ​

Pricing ​

How Much Does Magic-Editor-X Cost? ​

Configuration Options ​

Content-Type Builder Settings ​

Plugin Configuration ​

Security Configuration ​

Content Security Policy ​

Frequently Asked Questions ​

Is Magic-Editor-X a WYSIWYG replacement? ​

Does it work with existing content? ​

Can I use it without collaboration? ​

How many collaborators can edit at once? ​

Roadmap ​

Next Steps ​

Get Magic-Editor-X ​

Related Plugins ​

Support & Resources ​