Modeler into HTML

Hi, I’m trying to import the BMPN to an HTML to see how it works and also, in the future, use it in a React Webpage.

So, I installed the bpmn-js-8.3.1 and also downloaded the examples.
The first thing I wanted to do is to, be able to create a diagram on the webpage, so I’m trying to execute the Modeler example, but, when I click the “create new diagram” nothing happens.

If I use “npm start dev”, it works, but I don’t understand what that command does and how to make it work on my HTML page.

Thanks!

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

Now I just want to get this:

So I can create my diagrams.

And I was trying to execute this: bpmn-js-examples/modeler at master · bpmn-io/bpmn-js-examples · GitHub
I’m sorry I can’t get to work the CodeSandbox.

So I’ll try to explain what is going on.

When I launch the modeler/index.html with the “Live Server Extension” module from VSC I get this page:

And when I click the “Create New Diagram” nothing happens.

I have all files and I haven’t changed anything, so Maybe I need to do something in order to make it work.

What’s the error in the devtools? You can open that via F12 or the menu.

It looks like you did not build the app but opened the app/index.html with the VSC extension. Make sure you followed the steps under building and check if you use the files in modeler/public

1 Like

Uncaught SyntaxError: Cannot use import statement outside a module app.js:1

And app.js:1 is: import $ from ‘jquery’;

Yes, doing the “npm run dev”, works fine, I know.
But if in the future I want to embed this into a webpage, how can I run that command? Maybe this isn’t possible.

What I want, is to have in my React webpage a button that opens the diagram creator in a

window

Running npm run all will create the files you need to deploy to your server in /public

1 Like

Check out the React example: GitHub - bpmn-io/react-bpmn: Display BPMN 2.0 diagrams in React.

1 Like

Ok… just running the index.html from /public worked… thanks :joy:

But this only displays diagrams right? I can’t build them. But anyways. This is a problem for the future me. Now I managed to make it work in a normal HTML webpage. Thanks!