MagicDX

Theme

Magic-Editor-X — Installation ​

Prerequisites ​

  • Strapi v5.0.0 or higher
  • Node.js 18.x / 20.x / 22.x
  • WebSocket support in your Strapi deployment (for real-time collaboration)

1. Install ​

bash
npm install magic-editor-x

2. Enable ​

typescript
// config/plugins.ts
export default () => ({
  'magic-editor-x': {
    enabled: true,
    config: {
      collaboration: {
        enabled: true,              // real-time collab via Y.js
        wsPath: '/magic-editor-x/ws',
      },
      upload: {
        // Uses Strapi Media Library by default
        sizeLimit: 50 * 1024 * 1024,  // 50 MB per file
      },
    },
  },
});

3. Rebuild ​

bash
npm run build
npm run develop

4. Add to a content type ​

  1. Open Content-Type Builder.
  2. Select an existing type (e.g. Article) or create a new one.
  3. Click Add another field.
  4. Click the Custom tab.
  5. Select Magic Editor X.
  6. Set the field name (e.g. content) and save.

The field is now available in the Content Manager for all entries of that type.

5. (Optional) Configure block allowlist ​

Restrict which blocks editors can insert:

typescript
'magic-editor-x': {
  enabled: true,
  config: {
    allowedBlocks: [
      'paragraph', 'header', 'list', 'quote',
      'image', 'code',  // only these 6 block types
    ],
  },
},

Useful for stripped-down editors (e.g. blog comments) vs full editors (e.g. articles).

6. WebSocket proxy (production) ​

If running Strapi behind a reverse proxy (nginx, Caddy), ensure WebSocket upgrade headers pass through:

nginx
location /magic-editor-x/ws {
  proxy_pass http://strapi:1337;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_set_header Host $host;
}

Without this, collaboration features fail silently (content still saves, but real-time sync is broken).

7. Test ​

  1. In Strapi admin, navigate to a content entry with a Magic-Editor-X field.
  2. Type a paragraph, press Enter, pick the Header block.
  3. Save. You should see the JSON structure in the API response.

Migration from existing rich-text content ​

If replacing a standard Strapi rich-text field, run the included migration:

bash
npx magic-editor-x migrate \
  --content-type api::article.article \
  --from markdown \
  --to-field content

This converts existing Markdown/HTML into Editor.js JSON blocks. Test on a staging database first — migration is one-way.

Next: Block Types →