Consider a JSONRenderer

Nobody has claimed this yet.

I'd love to see a "JSONRenderer" which would be equivalent to the HTML renderer's output, except in a form like this:

{
  tagName: "h1",
  children: "whatever",
  attributes: {} 
}

Effectively, what I'm hoping for is something that would match (or be similar to) the vdom type currently being implemented in Jupyter frontends.

Example input:

## Try CommonMark

You can try CommonMark here.  This dingus is powered by
[commonmark.js](https://github.com/jgm/commonmark.js), the
JavaScript reference implementation.

1. item one
2. item two
   - sublist
   - sublist

Example output (click to expand me):

{
  "attributes": {
    "attributes": {},
    "children": [
      {
        "attributes": {},
        "children": "Try CommonMark",
        "tagName": "h2"
      },
      {
        "attributes": {},
        "children": [
          "You can try CommonMark here.  This dingus is powered by",
          {
            "attributes": { "href": "https://github.com/jgm/commonmark.js" },
            "children": "commonmark.js",
            "tagName": "a"
          },
          ", the\nJavaScript reference implementation."
        ],
        "tagName": "p"
      },
      {
        "attributes": {},
        "children": [
          { "attributes": {}, "children": "item one", "tagName": "li" },
          { "attributes": {}, "children": "item two", "tagName": "li" },
          {
            "attributes": {},
            "children": [
              {
                "attributes": {},
                "children": "sublist",
                "tagName": "li"
              },
              { "attributes": {}, "children": "sublist", "tagName": "li" }
            ],
            "tagName": "ul"
          }
        ],
        "tagName": "ol"
      }
    ]
  },
  "children": [
    {
      "attributes": {},
      "children": "Try CommonMark",
      "tagName": "h2"
    },
    {
      "attributes": {},
      "children": [
        "You can try CommonMark here.  This dingus is powered by",
        {
          "attributes": { "href": "https://github.com/jgm/commonmark.js" },
          "children": "commonmark.js",
          "tagName": "a"
        },
        ", the\nJavaScript reference implementation."
      ],
      "tagName": "p"
    },
    {
      "attributes": {},
      "children": [
        { "attributes": {}, "children": "item one", "tagName": "li" },
        { "attributes": {}, "children": "item two", "tagName": "li" },
        {
          "attributes": {},
          "children": [
            { "attributes": {}, "children": "sublist", "tagName": "li" },
            { "attributes": {}, "children": "sublist", "tagName": "li" }
          ],
          "tagName": "ul"
        }
      ],
      "tagName": "ol"
    }
  ],
  "tagName": "div"
}

Start by reading the existing HTML renderer and comparing its output with the requested JSONRenderer shape. Review the linked vdom specification and the supplied CommonMark example to define how tags, attributes, text, and nested children should be represented. Done means the renderer produces the requested structure for equivalent input.

Written by the indexing model from the issue text.

Description

Contributor guide

First steps

Research direction

Assessment