Using Modler and properties panel in TypeScript React

Developers Modeler
1

I am currently working on a TypeScript React project and am eager to integrate the Camunda BPMN Modler along with the properties panel. While exploring the documentation, I have encountered challenges with outdated examples, as most of them no longer work with the latest versions.
Considering the fast-paced nature of technology updates, I understand that maintaining documentation can be a challenge. Therefore, I would greatly appreciate your assistance in providing an up-to-date and working example or guidance on how to use BpmnModler and integrate the properties panel in a TypeScript React environment.

Thanks

2

The simplest implementation would look something like this:

export default function App() {
  const ref = useRef();
  const propertiesPanelRef = useRef();

  useEffect(() => {
    const modeler = new Modeler({
      container: ref.current,
      propertiesPanel: {
        parent: propertiesPanelRef.current
      }
    });

    modeler.importXML(xml, []);

  return (
    <div className="App">
      <div ref={ref} />
      <div ref={propertiesPanelRef} />
    </div>
  );
}