Arrow icon
See all demos


The BPMN demo app showcases a standardized method of modeling a business process from beginning to end. It's written in JavaScript but can be seamlessly integrated with React, Vue, Angular, or Svelte.
Demo instructions
Add or remove elements to/from the diagram, connect them together and see how the command manager works.

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.

The role of JointJS in building a BPMN application

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a wide range of prebuilt features that make creating applications such as BPMN builders a breeze. 

We equip developers with all the plugins they need to save time and focus their energy elsewhere such as:

  • BPMN shapes
  • BPMN2 shapes
  • GridLayout
  • PaperScroller
  • CommandManager
  • Keyboard
  • Selection
  • Stencil
  • Toolbar
  • Tooltip
  • Inspector
  • FreeTransform
  • Halo
  • SwimlaneBoundary
  • SwimlaneTransform
  • Print

New to this topic? Learn more about BPMN and its benefits 👇

What is BPMN?

The shortcut BPMN stands for Business Process Modeling Notation, which is a flowchart approach for modeling the steps of a planned business process from start to finish. Simply put, a BPMN diagram assembles symbols and visually explained the logic to represent a business process. As shown below, the main advantage is understanding such visual explanation across different departments - technical and non-technical.

What is it good for?

The main goal of the BPMN language is to erase the communication gap between the business process design and process implementation by providing a graphical notation that all the technical and business users can understand.

Needless to say, the diagram might be much easier to comprehend than narrative text. It facilitates communication and collaboration in order to achieve the goal of an efficient process that yields a high-quality outcome.

What elements and symbols does BPMN contain?

For business process diagrams, BPMN illustrates these four element types:

  • Objects such as events, activities, gateways,
  • Connecting objects like sequence flow, message flow, association,
  • Swimlanes such as pools or lanes,
  • Artifacts represented by data objects, groups and annotations.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get the source code of the BPMN application, and go from zero to a fully functional app in no 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.