Arrow icon
See all demos

Stencil vs Diagram Elements

Are you looking for a way to represent stencil elements in a way other than their actual appearance in the diagram? Check out this demo example that shows a different representation of elements during the drag-n-drop sequence (template-preview-diagram).
Demo instructions
Drag elements from the stencil onto the canvas and watch how their appearance changes.
JointJS – Stencil vs Diagram Elements

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.