Please Help me Customize the Hipster Template

This is embarrassing but I am struggling to customize the Hipster invoice template. I need to move the logo to the LEFT in the top row, inline and before the | “From” entry for my company.
I tweaked the code a bit but could surely use some help to move the logo to the other side of the page. Can anyone here help? Thanks in advance!

Here is the template code:

[
  {
    "columns": [
      {
        "width": 10,
        "canvas": [
          {
            "type": "line",
            "x1": 0,
            "y1": 0,
            "x2": 0,
            "y2": 75,
            "lineWidth": 0.5
          }
        ]
      },
      {
        "width": 140,
        "stack": [
          {
            "text": "$fromLabelUC",
            "style": "fromLabel"
          },
          "$accountDetails"
        ]
      },
      {
        "width": 30,
        "stack": [
          {
            "text": " "
          },
          "$accountAddress"
        ],
        "margin": [
          10,
          0,
          0,
          16
        ]
      },
      {
        "width": 10,
        "canvas": [
          {
            "type": "line",
            "x1": 0,
            "y1": 0,
            "x2": 0,
            "y2": 75,
            "lineWidth": 0.5
          }
        ]
      },
      {
        "stack": [
          {
            "text": "$toLabelUC",
            "style": "toLabel"
          },
          "$clientDetails"
        ]
      },
      [
        {
          "image": "$accountLogo",
          "fit": [
            90,
            90
          ]
        }
      ]
    ]
  },
  {
    "text": "$entityTypeUC",
    "margin": [
      0,
      4,
      0,
      8
    ],
    "bold": "true",
    "fontSize": 22
  },
  {
    "columnGap": 16,
    "columns": [
      {
        "width": "auto",
        "text": [
          "$invoiceNoLabel",
          " ",
          "$invoiceNumberValue"
        ],
        "bold": true,
        "color": "$primaryColor:#bc9f2b",
        "fontSize": 10
      },
      {
        "width": "auto",
        "text": [
          "$invoiceDateLabel",
          " ",
          "$invoiceDateValue"
        ],
        "fontSize": 10
      },
      {
        "width": "auto",
        "text": [
          "$dueDateLabel?",
          " ",
          "$dueDateValue"
        ],
        "fontSize": 10
      },
      {
        "width": "*",
        "text": [
          "$balanceDueLabel",
          " ",
          {
            "text": "$balanceDue",
            "bold": true,
            "color": "$primaryColor:#bc9f2b"
          }
        ],
        "fontSize": 10
      }
    ]
  },
  {
    "margin": [
      0,
      26,
      0,
      0
    ],
    "style": "invoiceLineItemsTable",
    "table": {
      "headerRows": 1,
      "widths": "$invoiceLineItemColumns",
      "body": "$invoiceLineItems"
    },
    "layout": {
      "hLineWidth": "$none",
      "vLineWidth": "$amount:.5",
      "paddingLeft": "$amount:8",
      "paddingRight": "$amount:8",
      "paddingTop": "$amount:8",
      "paddingBottom": "$amount:8"
    }
  },
  {
    "columns": [
      {
        "stack": "$notesAndTerms",
        "width": "*",
        "margin": [
          0,
          12,
          0,
          0
        ]
      },
      {
        "width": 200,
        "style": "subtotals",
        "table": {
          "widths": [
            "*",
            "36%"
          ],
          "body": "$subtotals"
        },
        "layout": {
          "hLineWidth": "$none",
          "vLineWidth": "$notFirst:.5",
          "paddingLeft": "$amount:8",
          "paddingRight": "$amount:8",
          "paddingTop": "$amount:12",
          "paddingBottom": "$amount:4"
        }
      }
    ]
  },
  "$signature",
  {
    "stack": [
      "$invoiceDocuments"
    ],
    "style": "invoiceDocuments"
  }
]

Anyone able to help?

Never mind, figured it out myself. Here is the customized Hipster invoice template code for anyone else that may want/need it:

[
  {
    "columns": [
      {
        "image": "$accountLogo",
        "fit": [
          120,
          100
        ],
        "margin": [
          0,
          0,
          20,
          30
        ]
      },
      {
        "width": 10,
        "canvas": [
          {
            "type": "line",
            "x1": 0,
            "y1": 0,
            "x2": 0,
            "y2": 85,
            "lineWidth": 0.5
          }
        ]
      },
      {
        "width": 135,
        "stack": [
          {
            "text": "$fromLabelUC",
            "style": "fromLabel"
          },
          "$accountDetails"
        ]
      },
      {
        "width": 30,
        "stack": [
          {
            "text": " "
          },
          "$accountAddress"
        ],
        "margin": [
          10,
          0,
          0,
          16
        ]
      },
      {
        "width": 10,
        "canvas": [
          {
            "type": "line",
            "x1": 0,
            "y1": 0,
            "x2": 0,
            "y2": 85,
            "lineWidth": 0.5
          }
        ]
      },
      {
        "width": 180,
        "stack": [
          {
            "text": "$toLabelUC",
            "style": "toLabel"
          },
          "$clientDetails"
        ]
      },
      []
    ]
  },
  {
    "text": "$entityTypeUC",
    "margin": [
      0,
      4,
      0,
      8
    ],
    "bold": "true",
    "fontSize": 22
  },
  {
    "columnGap": 16,
    "columns": [
      {
        "width": "auto",
        "text": [
          "$invoiceNoLabel",
          " ",
          "$invoiceNumberValue"
        ],
        "bold": true,
        "color": "$primaryColor:#bc9f2b",
        "fontSize": 10
      },
      {
        "width": "auto",
        "text": [
          "$invoiceDateLabel",
          " ",
          "$invoiceDateValue"
        ],
        "fontSize": 10
      },
      {
        "width": "auto",
        "text": [
          "$dueDateLabel?",
          " ",
          "$dueDateValue"
        ],
        "fontSize": 10
      },
      {
        "width": "*",
        "text": [
          "$balanceDueLabel",
          " ",
          {
            "text": "$balanceDue",
            "bold": true,
            "color": "$primaryColor:#bc9f2b"
          }
        ],
        "fontSize": 10
      }
    ]
  },
  {
    "margin": [
      0,
      26,
      0,
      0
    ],
    "style": "invoiceLineItemsTable",
    "table": {
      "headerRows": 1,
      "widths": "$invoiceLineItemColumns",
      "body": "$invoiceLineItems"
    },
    "layout": {
      "hLineWidth": "$none",
      "vLineWidth": "$amount:.5",
      "paddingLeft": "$amount:8",
      "paddingRight": "$amount:8",
      "paddingTop": "$amount:8",
      "paddingBottom": "$amount:8"
    }
  },
  {
    "columns": [
      {
        "stack": "$notesAndTerms",
        "width": "*",
        "margin": [
          0,
          12,
          0,
          0
        ]
      },
      {
        "width": 200,
        "style": "subtotals",
        "table": {
          "widths": [
            "*",
            "36%"
          ],
          "body": "$subtotals"
        },
        "layout": {
          "hLineWidth": "$none",
          "vLineWidth": "$notFirst:.5",
          "paddingLeft": "$amount:8",
          "paddingRight": "$amount:8",
          "paddingTop": "$amount:12",
          "paddingBottom": "$amount:4"
        }
      }
    ]
  },
  "$signature",
  {
    "stack": [
      "$invoiceDocuments"
    ],
    "style": "invoiceDocuments"
  }
]

Thanks for sharing the solution!

The design editor is pretty painful to use, in the next version it will be replaced with HTML/CSS.

Of course Hillel, sharing is caring. Looking forward to an improved invoice editor. Any idea on general ETA (even if within a quarter) for V2?

We hope to release the first alpha (ie, buggy) release by the end of the month.