How to Integrate/use yFiles for Html BPMN editor in React frontend to edit bpmn diagrams?

Question

I am working on a React-Python/Flask app which takes input bpmn diagram image from user & through python scripts convert it into bpmn file which then can be downloaded through flask api on user's device. I am working on react UI. Now i have to edit the diagrams & apply some visualization to them. So how can i integrate yFiles for html BPMN editor in my app. I have already downloaded its evaluation package from yworks.com & integrated the pack in React following the demos. But now i am stuck because there are not much tutorials available specifically for yFiles with react. When i searched for it, i found lots of tutorials of bpmn.js with react. Please help me with how can i go about it. I am new to yFiles I have looked into yFiles evaluation pack tutorials and i still dont know how to go about it in react. Also i have to use yFiles only due to client's requirement. Thank you for any help.

Answer 1

yFiles for HTML is not a React component - in fact it's a plain JavaScript component, that is not based on any third party framework or even software.

This doesn't mean that you cannot integrate it into React or Angular or Vue.js or any other well-behaved JavaScript client framework. In fact yFiles has been built to support the integration into all of these frameworks and if it doesn't work with a specific framework, this usually indicates a short-coming or more likely a bug in the third party framework, rather than in yFiles! After all yFiles is just this: plain JavaScript that manages a part of your HTML5 DOM (one div element and all it children, to be precise), a few lines of CSS and the rest is just JavaScript. If your UI library can provide these basic requirements (and React does, of course), yFiles can be made to run with that framework.

As you said, there are these various integration samples available that show how to integrate third party frameworks and yFiles (both with yFiles being a "client" as well as yFiles hosting DOM snippets created and maintained by these third party frameworks: https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit

For React, there is actually an additional repo on GitHub (which is not part of the evaluation package): https://github.com/yWorks/yfiles-react-integration-basic

React is very opinionated about the way an application or component should work. yFiles does not follow the React approach (and I honestly believe it would be a bad idea if it did), but the component you build can. The idea is to create a custom React component that internally uses yFiles for HTML for the visualization, the editing, and the handling of the BPMN editor. Just like you would encapsulate a native HTML5 textarea and two buttons into a React component, you encapsulate the "div" that is used by yFiles to manage the BPMN visualization and editor.

The BPMN demo does not use React. In fact it uses plain old HTML and does not use any real framework for the UI. This means you need to (and can) take that code and wrap it into a custom React component. With the node module version of yFiles for HTML and the es6 style sample code, this should not be too difficult. After all it's just JavaScript without any further dependencies.

There are no additional tutorials for yFiles in the context of React. However that should not be much of a problem as any tutorial that shows how to wrap a generic JavaScript component or how to create a new one from scratch should be applicable.

If you run into a specific issue, post your question here (if it's about React) or contact the support team at yWorks if you are sure this is a problem specific to yFiles and not a generic JavaScript problem. Of course StackOverflow might work, too, in the yFiles case, however there aren't that many yFiles developers that hang around at StackOverflow, I think. Most of the time it's me or someone from the yWorks team, anyway.