Strapi Block Renderer

Accepted Types for Block Renderer

Allowed Strapi Block Node Types

1. Paragraph

{
  "type": "paragraph",
  "children": [
    {
      "type": "text",
      "text": "This is a normal paragraph."
    }
  ]
}

2. Heading

{
  "type": "heading",
  "level": 2,
  "children": [
    {
      "type": "text",
      "text": "This is a heading"
    }
  ]
}

Allowed heading levels are usually:

1 | 2 | 3 | 4 | 5 | 6

3. Ordered List

{
  "type": "list",
  "format": "ordered",
  "children": [
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "First item"
        }
      ]
    },
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "Second item"
        }
      ]
    }
  ]
}

4. Unordered List

{
  "type": "list",
  "format": "unordered",
  "children": [
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "Bullet item one"
        }
      ]
    },
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "Bullet item two"
        }
      ]
    }
  ]
}

5. Quote

{
  "type": "quote",
  "children": [
    {
      "type": "text",
      "text": "This is a quote."
    }
  ]
}

6. Code

{
  "type": "code",
  "children": [
    {
      "type": "text",
      "text": "console.log('Hello world');"
    }
  ]
}

7. Image

{
  "type": "image",
  "image": {
    "url": "/uploads/example.jpg",
    "alternativeText": "Example image",
    "name": "example.jpg",
    "width": 1200,
    "height": 800
  },
  "children": [
    {
      "type": "text",
      "text": ""
    }
  ]
}

Text Child Node

Inside most block nodes, text should look like:

{
  "type": "text",
  "text": "Normal text"
}

With formatting:

{
  "type": "text",
  "text": "Bold text",
  "bold": true
}

Supported marks usually include:

bold
italic
underline
strikethrough
code

Example:

{
  "type": "paragraph",
  "children": [
    {
      "type": "text",
      "text": "This is "
    },
    {
      "type": "text",
      "text": "bold",
      "bold": true
    },
    {
      "type": "text",
      "text": " and this is "
    },
    {
      "type": "text",
      "text": "italic",
      "italic": true
    }
  ]
}

Link Example

{
  "type": "paragraph",
  "children": [
    {
      "type": "text",
      "text": "Visit "
    },
    {
      "type": "link",
      "url": "https://example.com",
      "children": [
        {
          "type": "text",
          "text": "our website"
        }
      ]
    }
  ]
}

Convert Checklist to Valid List

Instead of:

{
  "type": "checklist",
  "children": [
    {
      "type": "checklist-item",
      "checked": false,
      "children": [
        {
          "type": "text",
          "text": "Accept terms"
        }
      ]
    }
  ]
}

Use:

{
  "type": "list",
  "format": "unordered",
  "children": [
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "Accept terms"
        }
      ]
    }
  ]
}

Or preserve checked/unchecked visually:

{
  "type": "list",
  "format": "unordered",
  "children": [
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "☐ Accept terms"
        }
      ]
    },
    {
      "type": "list-item",
      "children": [
        {
          "type": "text",
          "text": "☑ Profile completed"
        }
      ]
    }
  ]
}

Architecture Add New Theme