[Question] Add custom html inside canvas

Hi there,

I'm using grapes to export a custom json with all the information i need, instead of HTML and CSS. For doing that I'm parsing the gpjs-components stored on localStorage.

Now iI need to customize how components are rendered inside canvas. For example I have an Input component with two traits (label and value), and i would like to render it inside the canvas with the label traits as <label> tag and value as placeholder inside <input> tag.

Of course I can use a custom view, but doing that inside the localStorage will be saved also the label tag inside the object, but i would like to avoid it, because when i export all the canvas code I only expect to have

{
    "input": [
      {"label": "lblValue"},
      {"value": "traitValue"}
   ]
}

I have tried to modify how components are rendered inside the view, doing something like the following.

view: {
    init() {
      this.listenTo(this.model, 'change:attributes', this.updateComponentView);
    },
    onRender() {
      this.updateComponentView();
    },
    updateComponentView() {
      const { attributes } = this.model.attributes;

        if (!this.el.parentNode.querySelector(`#${this.model.cid}`)) {
          const newDOM = `
            <label id="${this.model.cid}" class="inputLabel" data-customelement>
              ${attributes.label}
            </label>`;
          this.el.parentNode.append(replaceDOM(newDOM), this.el);
        }
        const label = this.el.parentNode.querySelector(`#${this.model.cid}`);
        label.style.pointerEvents = 'none';
        this.el.value = attributes.fieldLabel;
        this.el.placeholder = attributes.fieldLabel || attributes.name;
        label.innerText = `${attributes.name} ${(attributes.required) ? ' *' : ''}`;
    },

It works, but when I drag other blocks inside the canvas and i reload the page, input components are not in the correct order anymore. I think is because adding new nodes inside the canvas, grapes cannot calculate the correct order.

Any suggestions on how to mange this case?

Thank you