MagicDX

Theme

Magic-Editor-X — Block Types ​

Text blocks ​

Paragraph ​

json
{ "type": "paragraph", "data": { "text": "Hello <b>world</b>." } }

Inline formatting: <b>, <i>, <code>, <a>, <mark>.

json
{ "type": "header", "data": { "text": "Chapter 1", "level": 1 } }

Levels 1–6.

Quote ​

json
{ "type": "quote", "data": { "text": "Stay hungry, stay foolish.", "caption": "Steve Jobs", "alignment": "left" } }

Warning ​

json
{ "type": "warning", "data": { "title": "Important", "message": "Read carefully." } }

List blocks ​

List ​

json
{
  "type": "list",
  "data": {
    "style": "unordered",
    "items": ["Apple", "Banana", "Cherry"]
  }
}

style: "ordered" | "unordered". Nested lists supported.

Checklist ​

json
{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Buy groceries", "checked": true },
      { "text": "Write docs", "checked": false }
    ]
  }
}

Media blocks ​

Image ​

json
{
  "type": "image",
  "data": {
    "url": "https://cdn.example.com/photo.jpg",
    "caption": "A cat",
    "alt": "A ginger cat sitting on a window sill",
    "stretched": false,
    "withBackground": false,
    "withBorder": false
  }
}

Uploads via Strapi Media Library.

json
{
  "type": "gallery",
  "data": {
    "images": [
      { "url": "...", "caption": "..." },
      { "url": "...", "caption": "..." }
    ]
  }
}

Video ​

json
{
  "type": "video",
  "data": {
    "url": "https://cdn.example.com/video.mp4",
    "poster": "https://cdn.example.com/poster.jpg",
    "caption": "Product demo"
  }
}

Audio ​

json
{ "type": "audio", "data": { "url": "https://cdn.example.com/audio.mp3", "caption": "Episode 42" } }

Attachment ​

json
{
  "type": "attachment",
  "data": {
    "file": { "url": "https://cdn.example.com/report.pdf", "size": 1048576, "extension": "pdf" },
    "title": "Q1 2026 Report"
  }
}

Structured content ​

Table ​

json
{
  "type": "table",
  "data": {
    "withHeadings": true,
    "content": [
      ["Name", "Price", "Stock"],
      ["Widget", "$10", "250"],
      ["Gadget", "$25", "100"]
    ]
  }
}

Code ​

json
{
  "type": "code",
  "data": {
    "code": "const x = 42;\\nconsole.log(x);",
    "language": "javascript"
  }
}

Supports 50+ languages with syntax highlighting.

Embeds ​

Embed ​

json
{
  "type": "embed",
  "data": {
    "service": "youtube",
    "source": "https://youtu.be/abc123",
    "embed": "https://www.youtube.com/embed/abc123",
    "width": 580,
    "height": 320,
    "caption": "Launch video"
  }
}

Supported services:

  • YouTube
  • Vimeo
  • Twitter / X
  • CodePen
  • Figma
  • Coub
  • Imgur
  • Gfycat
  • Generic iframe (with allowlist)

Special ​

Delimiter ​

json
{ "type": "delimiter" }

Horizontal rule.

Raw HTML ​

json
{ "type": "raw", "data": { "html": "<div class='custom-widget'>...</div>" } }

Escape hatch. Use sparingly — can break the editor if malformed.

Inline formatting ​

Inside paragraphs, headers, list items, and quotes:

MarkSyntax
Bold<b>text</b>
Italic<i>text</i>
Inline code<code>text</code>
Link<a href="...">text</a>
Highlight<mark>text</mark>

Restricting blocks per field ​

typescript
'magic-editor-x': {
  config: {
    allowedBlocks: ['paragraph', 'header', 'list', 'code'],
    // Blocks not in this list are hidden from the toolbar.
  },
},

Per-field configuration is possible via the Content-Type Builder (Advanced tier).

Custom blocks ​

Register your own:

typescript
// src/plugins/magic-editor-x-custom/register.ts
export default ({ strapi }) => {
  strapi.plugin('magic-editor-x').registerBlock({
    type: 'cta',
    title: 'Call to Action',
    icon: '<svg>...</svg>',
    toolbox: { title: 'CTA Button' },
    renderer: {
      mount(data) { /* your mount function */ },
      save(block) { return { label: block.label, url: block.url }; },
    },
  });
};

Custom blocks appear in the toolbar alongside built-ins.

Next: Collaboration →