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

See the Pen JointJS+: Stencil vs Diagram Elements by JointJS (@jointjs) on CodePen.

View on full screen

For a better experience, expand this demo to full screen.

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.

Learn about Jointjs+
Start free trial

Made with JointJS

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

Download JointJS
Github logo
View code on github

Features showcase

JavaScript

Element palette

Built-in shapes

Custom properties

More demos
See all demos
jointjs_core
Chatbot

Chatbot

Use this demo application to create an advanced Chatbot solution with an intuitive drag-and-drop editor.
jointjs_core
Kitchen Sink App

Kitchen Sink App

This demo presents all the main features of JointJS+ and is a useful guide to understand its capabilities.
jointjs_core
BPMN

BPMN

The BPMN demo demonstrates a standardized approach to modeling the steps of a business process from start to finish.
jointjs_core
MindMap

MindMap

This demo shows a diagram used to visually organize information into a hierarchy.
jointjs_core
Organizational Chart

Organizational Chart

This demo showcases the power of JointJS+ on one of the most widely used diagram types.
jointjs_core
Flowchart

Flowchart

This flowchart created using our JavaScript/Typescript diagramming library shows a simple checkout process.
jointjs_core
Decision Tree

Decision Tree

An AI-driven experiment based on reinforcement learning can be visualized as a decision tree. Check out such an example.
jointjs_core
ChatGPT MindMap

JointJS+ ChatGPT MindMap

Enter any text and create an interactive mind map using the ChatGPT API and JointJS+ capabilities.

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.
start Free trial
buy jointjs+
JavaScript diagramming library powering exceptional UIs.
The latest news
DISCOVER
FeaturesDemos & examplesCustomer storiesJointJS+About usFAQContact us
DEVELOP
DocumentationSupportCommunityCustom developmentResellersCustomer portal
USEFUL
NewsPricingLicensingSupport termsTry JointJS+ for freeBuy JointJS+JointJS+ comparison
discover
Icon
develop
Icon
useful
Icon
client.IO
We are part of client.IO, a company dedicated to developing Low-Code/No-Code tools and empowering innovative thinkers to create amazing products faster. Learn more
Appmixer
We are proud creators of Appmixer, an embedded iPaaS and workflow automation system. Powered by JointJS+. Learn more
Cookie PolicyPrivacy Policy
This website is haunted