HTML UI integration

[keasy9]

As a deep perfectionist I'm always trying to write scalable and highly customizable code. So after finishing prototype of dialogue system in my game, I decided to build HTML UI-system on top of excalibur.

[keasy9]

Suddently press ctrl+enter and published unfinished question :)

as writed below, I'm building HTML UI-system on top of excalibur.js, vith vue. So, now I have just reactive object with nested objects describing my UI elements: containers, images, buttons, textbox, and more. It's very inconvenient, because I need to synchronize state from both sides (excalibur and vue), implementing new properties (in types or as class-members) and write new logic for it (in vue).

But I have idea, what if UI-elements will be actors too? But they should be using dom-elements references as graphics instead of canvas graphics. So should I implement custom rendering system or just custom graphic objects, or custom component for it?

Also will be super cool if there is example of such integration or examples of custom rendering system implementation, based on declarative rendering (pure html/xml or js-frameworks like vue/react)