Arrow icon
See all demos

Bootstrap Tabs

Need to create multiple Bootstrap Tabs while displaying and manipulating diagram content? The following demo shows how to integrate Bootstrap Tabs with JointJS. The first tab displays a button for translating a JointJS element, and this translation is reflected in the diagram on the second tab.
Demo instructions
Navigate between Bootstrap Tabs via mouse or keyboard. Click on the button in the first tab to manipulate diagram content on the second.
Bootstap Tabs

See the Pen JointJS+: Bootstrap Tab by JointJS (@jointjs) on CodePen.

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.