vml.json

{
  "version": "0.0.1",
  "root": {
    "kind": "flexbox",
    "props": {
      "flex-direction": "column",
      "children": [
        {
          "kind": "text",
          "props": {
            "text": "Simple text"
          }
        },
        {
          "kind": "text",
          "props": {
            "text": [
              {
                "text": "Complex",
                "font-size": {"unit": "point", "value": 12},
                "font-color": {"default": "#F00"}
              },
              {
                "text": "text",
                "font-size": {"unit": "point", "value": 20},
                "font-color": {"default": "#00F"}
              }
            ]
          }
        },
        {
          "kind": "flexbox",
          "props": {
            "children": [
              {
                "kind": "image",
                "props": {
                  "src": "https://placekitten.com/200/300",
                  "content-mode": "contain"
                },
                "layout": {
                  "width": {"unit": "point", "value": 50},
                  "height": {"unit": "point", "value": 50}
                }
              },
              {
                "kind": "image",
                "props": {
                  "src": "https://placekitten.com/200/300",
                  "content-mode": "center",
                  "corner-radius": {"unit": "point", "value": 10}
                },
                "layout": {
                  "width": {"unit": "point", "value": 50},
                  "height": {"unit": "point", "value": 50}
                }
              },
              {
                "kind": "image",
                "props": {
                  "src": "https://placekitten.com/200/300",
                  "content-mode": "cover",
                  "corner-radius": "max"
                },
                "layout": {
                  "width": {"unit": "point", "value": 50},
                  "height": {"unit": "point", "value": 50}
                }
              }
            ]
          }
        },
        {
          "kind": "flexbox",
          "props": {
            "children": [
              {
                "kind": "solid-color",
                "props": {
                  "background-color": {"default": "#F00", "pressed": "#000"},
                  "tap-action": "red"
                },
                "layout": {
                  "width": {"unit": "point", "value": 50},
                  "height": {"unit": "point", "value": 50}
                }
              },
              {
                "kind": "solid-color",
                "props": {
                  "background-color": {"default": "#0F0", "pressed": "#000"},
                  "corner-radius": {"unit": "point", "value": 10},
                  "tap-action": "green"
                },
                "layout": {
                  "width": {"unit": "point", "value": 50},
                  "height": {"unit": "point", "value": 50}
                }
              },
              {
                "kind": "solid-color",
                "props": {
                  "background-color": {"default": "#00F", "pressed": "#000"},
                  "corner-radius": "max",
                  "tap-action": "blue"
                },
                "layout": {
                  "width": {"unit": "point", "value": 50},
                  "height": {"unit": "point", "value": 50}
                }
              }
            ]
          }
        }
      ]
    }
  }
}