How to implement Diagram Diffing in react js

Hi Team,

I have implemented some BPMN.js functionality in my react js application. And i also want to implement Diagram Diffing to Compare two diagram. How to implement diagram diffing in react application?

Thanks in advance

Did you already check out these projects?

Thanks Niklas,

Could you please provide codesandbox for this . it will be easy for me to check how it was implemented.

You can find it here.

Thanks Niklas,

i have gone through the codesanbox and i have one doubt.

loadDiagram(“left”, { url: “samples/old.bpmn” });
loadDiagram(“right”, { url: “samples/new.bpmn” });

In above method the bpmn is imported in URL format. I want to send my bpmn in xml format as a variable like mentioned below.

let oldXML = myXML;
let newXML = myXML;

loadDiagram(“left”, {oldXML });

loadDiagram(“right”, { newXML });

But this is not working


See the implementation of the loadDiagram function in the example:

function loadDiagram(side, diagram) {
  var viewer = getViewer(side);

  function done(err) {
    diagramLoaded(err, side, viewer);

  diagramLoading(side, viewer);

  if (diagram.xml) {
    return viewer.importXML(diagram.xml, done);

  $.get(diagram.url, function (xml) {
    viewer.importXML(xml, done);

As you can see, it checks for the xml in a property xml: diagram.xml. Therefore, if you change your snippet to

let oldXML = myXML;
let newXML = myXML;

loadDiagram(“left”, { xml: oldXML });

loadDiagram(“right”, { xml: newXML });

it should work.