How to use BPMN modeler in react js application

I want to use BPMN.iO in my react js web application and below mentioned are questions:

  1. How to create new BPMN diagram by drag and drop bpmn shapes for particular user.
  2. How to get created BPMN flow diagram(JSON/XML format to retrieve) and show the same in another page for that user.

Thanks in advance

Hi @sathiyamoorthy!

  1. How to create new BPMN diagram by drag and drop bpmn shapes for particular user.

Can you be a bit more specific with this use case? What scenario do you want to describe?

  1. How to get created BPMN flow diagram(JSON/XML format to retrieve) and show the same in another page for that user.

I think what you’re looking for is the saveXML API.

const { xml } = await modeler.saveXML();

You can use the exported XML then wherever you want.

Thanks for the reply Niklas_Kiefer.

STEP 1: I want to create a new BPMN diagram in my react js project using the modeler concept in BMPN. how to import this in react js? and i have attached an screenshot of my expected output.
STEP 2: Second thing is like, I want to get the XML/JSON of created BPMN diagram. Which was created in step1 to use in some other part of my project.

Example: Am creating new BPMN diagram in react js. after creation i have save button onclicking save button i want XML of created JSONExpected_Output

Question 1: Did you check out this example? Next to this, how to embed bpmn-js into a React application was asked quite often in this forum, you can use the search function.

Question 2: As I already said in my previous comment, the saveXML API is what you’re looking for.

Answer 1: Yes i have tried out https://github.com/bpmn-io/react-bpmn this example and it showing blank page. Not able see BPMN shapes on left side for flow creation. Missing feature is highlited in red mark.

BPMN.io_creation|1366x768 BPMN.io_missing

Sorry, I just saw the react-bpmn module only embeds the NavigatedViewer, not the Modeler.

You can simply create another React component, but using the Modeler instead.

import BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';

Thanks Niklas, It is working now. But i have another issue.

  1. Unable to drag and drop icons and also not able to type text in icon.

Attached Screenshot FYR.
Unabletodrop|1366x768

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

Thanks Niklas_Kiefer,

I have implemented successfully