Switching from viewer to modeler and vise versa?


I’m using the bower installation, I’m very new and struggling to get both the viewer and modler switch one to another, under the same url. I notice that the modeler is automatically instatiated on the load, but i can’t figure out a way to switch it off, or disable the listeners on the diagram.

Is there a way to achieve that?


What did you try in terms of source code? And what did not work?


This code bellow gives me the viewer only if i don’t load the modeler module, I couldn’t find a doc about the “BpmnViewer” and its options.

var viewer = new BpmnViewer({ container: '#js-canvas' });
viewer.importXML(diagram, function(err) {

  if (!err) {
  } else {
    console.log('something went wrong:', err);


Switching between both is not easily possible in the pre-bundled packages.

I assume you would like to do something like this:

var bpmnjs;

if (useModeler) {
  bpmnjs = new BpmnModeler(...);
} else {
  bpmnjs = new BpmnViewer(...);

Am I correct about this?

Could you give us a few more details on your use-case / the stuff you are trying to achieve and why?

Yep, that is basically what i want to achieve, but it looks like the last loaded module overrides the other.

Got it! That overide gave me the hint. Both the viewer and modeler expose the same function name “BpmnJS”.

@PatHuman, you could solve? I have the same problem.

It is not easily doable yet but we added an issue for a possible fix.

The idea would be to expose both, the Viewer as well as the Modeler as part of the bundle:

var bpmnjs;

if (useModeler) {
  bpmnjs = new BpmnJS(...);
} else {
  bpmnjs = new BpmnJS.Viewer(...);

Would that solve the issue for you guys?

I think it will solve, the problem occurs when isn’t a Node.js/browserify project, i can’t import the modules individually.