Disclaimer - The following tutorial was created with a past version of JointJS. The tutorial is still provided for those who may face a similar problem, but it may no longer show the best practices of JointJS. You may encounter the following issues:
Our current recommendations on best practices can be found in the appropriate sections of the basic and intermediate tutorials.
Many times, you might want to use HTML inputs or other HTML elements inside your JointJS graphs. This
tutorial describes a way of doing this. The technique used in this tutorial is creating a custom
view that renders your HTML and takes care of the interaction with the HTML. A different approach might
be to use the
foreignObject and
embed it in the markup of your JointJS elements.
This technique is however problematic due to a poor browser support. (However, this seems to be the right
way
of combining HTML with SVG in JointJS in the future.)
The good news is that if you setup your custom HTML view properly, you can take advantage of many of the features JointJS has to offer.
The code below shows how you can create a custom JointJS view that renders HTML (including functional inputs). The trick is to update the HTML element position and dimension so that it follows the underlying JointJS element. Additionally, we observe changes on the embedded inputs and update the JointJS model accordingly. This also works the other way round, if the model changes, we reflect the changes in the HTML.