Proper way to modify ProtoUI

I need to make a few changes to the html of the default property of:

webix.protoUI({
name:“counter”,
defaults:{

By simply copying the entire function and loading after Webix I was able to make my adjustment and all is working fine. However, I suspect there is a more elegant way.

I did read up on some of the documentation but am still not certain best approach. Can you advise?

A bit better approach will be to create a custom widget

webix.protoUI({ 
  name:"mycounter", 
  $cssName:"counter",
  defaults:{
        template:function(){
              //custom rendering logic here
        }
  }
}, webix.ui.counter );

and use “mycounter” instead of “counter”

As alternative solution, you can use onAfterRender event

webix.protoUI({ 
  name:"mycounter", 
  $cssName:"counter",
  $init:function(){
      this.attachEvent("onAfterRender", function(){
           //this.$view is HTML root node
           //alter content in any necessary way
      })
  }
}, webix.ui.counter );