How to open a BPMN diagram on Reactjs App using BPMN-JS in a readOnly mode

I have a situation where I want to display a BPMN Diagram to the user interface by highlighting the current task a specific process is in a read-only mode, meaning without the left panel that comes by default with the BPMN-js library.
my code is at
I have gotten a method setColor for highlighting the specified task but that does not work.

Any help would be appreciated.

Thank you

Let’s split your question up in sub-tasks:

  1. The read-only mode you’re talking about is doable by just using the Viewer, instead of the Modeler. Check out this example on how to use the Viewer.
  2. You’re using canvas.setColor which is not an API we’re offering. I think what you meant was modeling#setColor
  3. If you’re using the Viewer instead of the Modeler, the Modeling API won’t help you, since this module is not available in the Viewer.

What you could do instead is to use the underlying logic to set the color manually:

const elementRegistry = viewer.get("elementRegistry");

const graphicsFactory = viewer.get("graphicsFactory");

function setColor(element, stroke, fill) {
  const businessObject = element.businessObject;

  businessObject.di.set("stroke", stroke);
  businessObject.di.set("fill", fill);

  const gfx = elementRegistry.getGraphics(element);

  const type = element.waypoints ? "connection" : "shape";

  graphicsFactory.update(type, element, gfx);

const element = elementRegistry.get("CalmCustomerTask");

setColor(element, "green", "yellow");

I updated your CodeSandbox a bit to solve this problem inside the Viewer.

Hello Niklas,
Thank you for the enlightenment and the sample at CodeSandbox. Are there API docs as the ones on the Camunda BPMN API for java?

Currently not, but we’re currently working on our documentation.

Okay, Thank you very much