Reusing the editor?

Hi guys,

I moved from threejs to babylon a couple of years ago, and your framework was a pure joy to use. I did use it in a .NET / Blazor webassembly project and I never had a problem with it. That project used 3D meshes to display an engineering model using the basic shapes and it worked flawlessly.

In my current project now, I need to do 2D only, and I need to implement and draw a Graph model (graph theory) exactly as you guys are doing it with the editor. You cannot imagine how many web libraries out there do not support Nodes having multiple ports, and ports connecting between them. I am super impressed with your editor implementation !!

But for the purpose of my project, there is no 3D anymore (no scene, camera, meshes, etc). So my extremely lame question comes now:
Is is possible for me to reuse the editor code, without having any refences to a scene and other artifacts (meshes, etc) ?
If this is not possible, can you please tell me which underlying library are you guys using to draw this kind of graph and if can it be used in any project ?
I need to display labeled Nodes (owning 1 or more Ports) and ports connected by edges.
Additionally, support events for Node and Edge selection to display additional information.

Thanks and best regards,


Hello, so glad you’re loving Babylon and welcome to the forums!

Since Babylon is an open source project you are totally welcome to use editor code! Here is the link to the repo! GitHub - BabylonJS/Babylon.js: Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

We kindly ask though if you would please just reference our team in the credits for whatever you are working on. Enjoy! :smiley:

Hi Pamela,

Thanks so much for replying and sending me the nice news of a possible reuse !
Do you have any hints you can provide ?
I referenced babylonjs.js and babylonjs.editor.js. I created a javascript file to call the editor on a button click event.
Unfortunately, when I call it I get an error: Microsoft.JSInterop.JSException: Cannot read property ‘mode’ of undefined

At this point: the editor is there, babylon is there, and my .NET code correctly called showEditor.
My minimal script “tries” to create the editor with the minimum dependencies on any external objects (scene, meshes, etc) and it does just this:

function showEditor () {
editorDisplayed = true;
var hostElement = document.getElementById(“host-element”);

//nodeMaterial: nodeMaterial,
hostElement: hostElement,
//customLoadObservable: customLoadObservable,

I left nodeMaterial and customLoadObservable undefined, because I thought the UI would just show an empty editor on my page, but it is not the case. I created a var that holds a nodeMaterial but I do not instantiate it.
Then, I decided to inspect the example here:
And I see that I can update labels on the fly on nodes and ports, which is awesome and exactly what I need !!!
but I have the dependency on the scene elements and I am lost there.

If I must have a scene and elements: what is the most lightweight way to try what I am trying to do with the minimal overhead on objects ?
Is there a way to just feed a JSON graph definition with an empty scene or something like this ?
In the meanwhile, I will keep reading the docs and inspecting the code of course.

Thanks and have a great day !