You can create domkit components using HIDE. Right click on the file tree to create such a component:

This will open this view:

• on the left you have your CSS
• on the right you have your DML (Domkit markup language)
• both of these are checked in realtime while you're typing

In order to display in realtime the Domkit component in your game (using your own custom components), you can use this code:

hxd.res.Resource.LIVE_UPDATE = true; // allow live refresh of resources (only in LocalFileSystem)
var style = new h2d.domkit.Style();
style.allowInspect = true;
style.load(hxd.Res.style); // your custom global CSS
var res = hxd.Res.load("ui/mockup/test.domkit"); // the resource that was created with HIDE
var viewer = new hrt.impl.DomkitViewer(style, res); 
s2d.addChild(viewer);

In order to inherit an existing component, you can use the following syntax:

<my-custom-comp:inherited-comp(arg1, arg2...)>
</my-custom-comp>

In order for customize Domkit components to be able to use common global less variables or script variables, you can add the following to your HIDE configuration in res/props.json:

{
  "script.api.files" : ["../api.xml"],
  "script.api" : {
      "domkit" : {...} // your script configuration for mockups
  },
  "less.includes" : ["ui/style/common.less"] // your files containing your variables
}

For script configuration details, refer to HScript-Notes

And on the viewer side, you can define:

• viewer.addVariables(hxd.Res.load("ui/style/common.less")) to add the variables at runtime
• viewer.addContext(new MyCustomContext()) to add an execution context

In order to define your custom parsers, add "domkit-parsers" : ["MyClass"] to your HIDE configuration.