Rich Media JSON Samples

JSON examples for popular rich text editors (TipTap, Quill, Slate)

Key Facts

Category: Data Formats
Items: 3
Format Families: json, text

Sample Overview

JSON examples for popular rich text editors (TipTap, Quill, Slate) This sample set belongs to Data Formats and can be used to test related workflows inside Elysia Tools.

📋 Quill Delta JSON

🟢 simple

Quill Delta ops with headers, bold text, lists, and links

{
  "ops": [
    { "insert": "Release Notes" },
    { "insert": "\n", "attributes": { "header": 2 } },
    { "insert": "Highlights:\n", "attributes": { "bold": true } },
    { "insert": "- Faster sync\n- Offline mode\n" },
    { "insert": "\n" },
    { "insert": "Read more", "attributes": { "link": "https://example.com/release" } }
  ]
}

📋 TipTap Rich Text JSON

🟡 intermediate

ProseMirror-style document with headings, lists, marks, and code block

{
  "type": "doc",
  "content": [
    {
      "type": "heading",
      "attrs": { "level": 2 },
      "content": [{ "type": "text", "text": "Project Update" }]
    },
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "We shipped " },
        { "type": "text", "text": "v2.3", "marks": [{ "type": "bold" }] },
        { "type": "text", "text": " with improved sync and offline mode." }
      ]
    },
    {
      "type": "bulletList",
      "content": [
        {
          "type": "listItem",
          "content": [
            { "type": "paragraph", "content": [{ "type": "text", "text": "Latency down 18%" }] }
          ]
        },
        {
          "type": "listItem",
          "content": [
            { "type": "paragraph", "content": [{ "type": "text", "text": "New read-only sharing" }] }
          ]
        }
      ]
    },
    {
      "type": "codeBlock",
      "attrs": { "language": "json" },
      "content": [
        { "type": "text", "text": "{\"status\":\"ok\",\"version\":\"2.3.0\"}" }
      ]
    }
  ]
}

📋 Slate Rich Text JSON

🟡 intermediate

Slate editor value with paragraphs, marks, and a bulleted list

[
  {
    "type": "heading-two",
    "children": [{ "text": "Design Review" }]
  },
  {
    "type": "paragraph",
    "children": [
      { "text": "Status: " },
      { "text": "approved", "bold": true },
      { "text": " for Q2." }
    ]
  },
  {
    "type": "bulleted-list",
    "children": [
      { "type": "list-item", "children": [{ "text": "Audit contrast" }] },
      { "type": "list-item", "children": [{ "text": "Finalize icon set" }] }
    ]
  }
]

🎯 Recommended Samples