Serialization

The Blocks editor takes MDX as an input and an output. Underneath the covers it transforms MDX into [Slate][] schema for the editor itself, and then emits changes back out as MDX again.

Input

# Hello, __world!__

<YouTube id="1234" />

Schema

{
  "document": {
    "nodes": [
      {
        "object": "block",
        "type": "heading-one",
        "data": {},
        "nodes": [
          {
            "object": "text",
            "leaves": [
              {
                "object": "leaf",
                "marks": [],
                "text": "Hello, "
              },
              {
                "object": "leaf",
                "text": "world!",
                "marks": [
                  {
                    "object": "mark",
                    "type": "bold",
                    "data": {}
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "object": "block",
        "type": "jsx-void",
        "data": {
          "type": "YouTube",
          "props": {
            "id": "1234"
          }
        }
      }
    ]
  }
}