rug

live parser demo6 blocks
source
[
  {
    "type": "prose",
    "contents": "Welcome to rug — edit on the left, watch it parse on the right.\n\nPlain text stays as prose, and line breaks are preserved\nexactly as you type them.\n",
    "start": 0,
    "end": 148
  },
  {
    "type": "comment",
    "contents": "this line is a comment, lifted out of the prose",
    "start": 149,
    "end": 198
  },
  {
    "type": "prose",
    "contents": "",
    "start": 199,
    "end": 199
  },
  {
    "type": "component",
    "name": "heading",
    "properties": {
      "id": "title",
      "class": "accent",
      "text": "Hello, rug",
      "level": 1
    },
    "start": 200,
    "end": 254,
    "nameRange": [
      200,
      208
    ],
    "bodyRange": [
      224,
      254
    ]
  },
  {
    "type": "component",
    "name": "button",
    "properties": {
      "label": "Try the inline form",
      "href": "#"
    },
    "start": 255,
    "end": 299,
    "nameRange": [
      255,
      262
    ],
    "bodyRange": [
      299,
      299
    ]
  },
  {
    "type": "component",
    "name": "card",
    "properties": {
      "title": "Block form",
      "body": "Properties parse as a small, predictable YAML-like structure.",
      "tags": [
        "demo",
        "nuxt",
        "vue"
      ]
    },
    "start": 300,
    "end": 421,
    "nameRange": [
      300,
      305
    ],
    "bodyRange": [
      306,
      421
    ]
  }
]