Magic-Editor-X

magic-editor-xlatestLicenseMITStrapiv5GitHub

What you get

Magic-Editor-X replaces Strapi's basic rich-text field with a modern block-based editor built on Editor.js and Y.js. 18+ block types (paragraph, heading, list, code, image, embed, table, checklist, quote, delimiter, warning, raw HTML, attachment, and more), real-time collaboration with live cursors, clean JSON output, and a Content-Type Builder custom field. Free tier allows 2 simultaneous collaborators.

At a glance

Block-Based Editor

18+ block types powered by Editor.js. Each block is independently editable and movable.

Real-Time Collab

Multiple users edit the same content simultaneously. Y.js ensures conflict-free sync.

Live Cursors

See where teammates are editing in real time, with colored cursors and name labels.

Media Library

Full Strapi Upload integration. Drag-drop images, videos, audio — served from your CDN.

Clean JSON Output

Portable, structured data. Render on any frontend — React, Vue, Svelte, plain HTML, anything.

Custom Field

Proper Strapi v5 custom field. Use in any content type via the Content-Type Builder.

Quick install

npm install magic-editor-x

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

npm run build && npm run develop

Then in Content-Type Builder: add a new field → Custom → Magic Editor X.

Full installation guide

Block types included

Block	Description
Paragraph	Standard text with inline formatting (bold, italic, code, link)
Heading	H1–H6
List	Ordered or unordered lists with nesting
Checklist	Interactive checkboxes
Quote	Blockquotes with optional caption
Code	Code block with language picker (syntax highlight)
Delimiter	Horizontal rule
Image	Via Strapi Media Library, with caption and alt text
Gallery	Multi-image grid
Video	Strapi Media Library video with poster image
Audio	Audio file with built-in player
Attachment	Downloadable file (PDF, ZIP, etc.)
Embed	YouTube, Vimeo, Twitter/X, CodePen, Figma, generic iframe
Table	With header row, alignment, add/remove rows/columns
Warning	Styled callout with title + message
Raw HTML	Escape hatch for custom markup
Marker	Highlight text
InlineCode	Inline code formatting

Output format

Magic-Editor-X outputs structured JSON that is trivial to render on any frontend:

{
  "time": 1712000000000,
  "blocks": [
    {
      "type": "header",
      "data": { "text": "Hello world", "level": 1 }
    },
    {
      "type": "paragraph",
      "data": { "text": "This is <b>bold</b> and <a href='https://example.com'>linked</a>." }
    },
    {
      "type": "image",
      "data": {
        "url": "https://cdn.example.com/uploads/photo.jpg",
        "caption": "A photo",
        "stretched": false
      }
    }
  ],
  "version": "2.x"
}

Render it in React:

function renderBlock(block) {
  switch (block.type) {
    case 'header':
      return React.createElement(`h${block.data.level}`, {}, block.data.text);
    case 'paragraph':
      return <p dangerouslySetInnerHTML={{ __html: block.data.text }} />;
    case 'image':
      return <img src={block.data.url} alt={block.data.caption} />;
    // ... other block types
  }
}

Or use one of the existing Editor.js renderers (HTML, React, Vue).

Real-time collaboration

Powered by Y.js, an industry-standard CRDT library. Benefits:

• Zero data loss — every keystroke is captured and merged automatically.
• Offline support — users can edit offline; changes sync when reconnected.
• No server-side conflict resolution — CRDT guarantees determinism.
• Low bandwidth — only diffs are sent, not full snapshots.

Collaboration limits by tier:

• Free: 2 simultaneous users per document.
• Premium: 10 simultaneous users.
• Advanced: Unlimited.

Pricing

Feature	Free	Premium	Advanced
Full editor access	✓	✓	✓
All 18+ block types	✓	✓	✓
Real-time sync	✓	✓	✓
Live cursors	✓	✓	✓
Media Library	✓	✓	✓
Custom field	✓	✓	✓
Collaborators / doc	2	10	∞
Version history	—	✓	✓
AI Assistant	—	Usage-based	Full
Priority support	—	✓	✓
Price	$0	$9.90/month	$24.90/month

View all pricing details →

Next steps

• Installation →
• Block Types →
• Collaboration →
• API Reference →
• Examples →
• FAQ →

Related plugins

• Magic-Sessionmanager — See who is collaborating on each document.
• Magic-Mark — Bookmark complex content queries.

---

Made by Joulee Tech GmbH. Free tier · 30-day money-back guarantee on paid tiers.