Estrutura de Dados

Como o foco do projeto é no frontend, me atentei em fazer num modelo de contrato de API usando JSON Schema. Pode-se manipular os dados diretamente no Live Editor.

O projeto é imaginado como sendo um Canvas com vários Layers e dentro desses Layers há vários Shapes, com suas propriedades.

Na implementação atual, para simplificar, há apenas um Layer

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "id": {
        "type": "string"
      },
      "name": {
        "type": "string"
      },
      "shapes": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "id": {
              "type": "string"
            },
            "type": {
              "type": "string"
            },
            "x": {
              "type": "number"
            },
            "y": {
              "type": "number"
            },
            "width": {
              "type": "number"
            },
            "height": {
              "type": "number"
            },
            "createdAt": {
              "type": "number"
            },
            "updatedAt": {
              "type": "number"
            },
            "fillColor": {
              "type": "string"
            },
            "strokeColor": {
              "type": "string"
            },
            "text": {
              "type": "string"
            },
            "fontFamily": {
              "type": "string"
            },
            "fontSize": {
              "type": "number"
            }
          },
          "required": [
            "id",
            "type",
            "x",
            "y",
            "width",
            "height",
            "createdAt",
            "updatedAt",
            "fillColor",
            "strokeColor"
          ]
        }
      }
    }
  }
}

Exemplo com dados